...

...

Inhaltsverzeichnis

...

1.

...

UI-Komponenten

1.1 Grundstruktur

Jede WebComponent beginnt mit dem Präfix ws- und folgt der bekannten HTML-Syntax. Sie müssen wie HTML-Elemente geöffnet und geschlossen werden und können zusätzlich erweitert werden.Ein einfaches Beispiel für die Struktur einer um Attribute oder zusätzliche HTML-Elemente ergänzt werden, um die Funktionalität und das Design individuell anzupassen.

Beispiel für eine einfache WebComponent:

<ws-searchbox> </ws-searchbox>

WebComponents können auch um zusätzliche HTML-Elemente oder Attribute ergänzt werden, um die Funktionalität und das Design individuell anzupassen.

Zum BeispielDiese Komponente kann erweitert werden, indem beispielsweise zusätzliche Attribute oder Eingabefelder innerhalb der Komponente ergänzt werden:

<ws-searchbox use-suggest="true">
    <input type="search" name="query" placeholder="Artikel suchen">
</ws-searchbox>

1.2 CSS & Styling

Die UI-Komponenten können automatisch CSS-Anweisungen, die von den WebComponents generiert werden, Klassen generieren, die das grundlegende Erscheinungsbild definieren. Diese Klassen können in eigene CSS-Dateien übernommen oder und durch zusätzliche weitere Anweisungen ergänzt werden, um das Erscheinungsbild vollständig die Darstellung an das individuelle Shop-Design anzupassen.

Einige Komponenten generieren jedoch keine eigenen Klassen und überlassen das Styling vollständig den Entwicklern. Dies wird bei der jeweiligen Komponente beschrieben.

1.

...

Die von WEBSALE bereitgestellten WebComponents basieren auf dem React-JS-Framework. Dadurch können sie React-spezifische Funktionalitäten nutzen, wie beispielsweise das <template>-Tag.

...

3 Überblick der UI-Komponenten

...

...

2. Template Placeholder für dynamische Inhalte

2.1 Grundstruktur

Neben den sichtbaren UI-Komponenten bieten die WebComponents auch sogenannte Template Placeholder an. Diese Platzhalter stellen dynamische Daten aus der Suche oder anderen Backend-Prozessen bereit und sind für die Anzeige von Inhalten wie Suchergebnissen oder Produktinformationen verantwortlich. Sie basieren auf Datenbindungen und geben ausschließlich Inhalte ohne zusätzliche visuelle Gestaltung aus.

Ein Beispiel für Template Placeholder

<template id="resultItemTemplate">
    <div classNameclass="result-item">
        <h3>{product{record.name}}</h3>
        <p>{{productrecord.price}} €</p>
    </div>
</template>

2. Übersicht der WebComponents

<ws-pagination> für Blätterfunktion / Paginierung

Die WebComponent <ws-pagination> stellt eine Blätterfunktion bereit, mit der Nutzer zwischen verschiedenen Seiten der Ergebnisse einer Suche oder Filterung navigieren können.

Die Komponente wird nur angezeigt, wenn Ergebnisse vorhanden sind, die auf mehrere Seiten verteilt werden müssen.

Voraussetzung

• Die Paginierungsfunktion ist abhängig von den Einstellungen der Komponente <ws-paging-size-selector>.

• Die Paginierung wird nur angezeigt, wenn der Standardwert oder der vom Nutzer gewählte Wert für die Anzahl der angezeigten Ergebnisse pro Seite kleiner ist als die Gesamtzahl der Suchergebnisse.

Eingabe und Ausgabe

Die Komponente kann wie folgt auf der Suchergebnisseite und Kategorie eingebunden werden:

<ws-pagination maxVisiblePages="5">
    <button slot="prev"><</button>
    <button slot="current" style="font-weight: bold;"></button>
    <button slot="standard"></button>
    <button slot="next">></button>
</ws-pagination>

• maxVisiblePages: Gibt an, wie viele Seitenzahlen gleichzeitig angezeigt werden sollen.

• Slots:

  • prev: Button für die vorherige Seite (<).

  • current: Zeigt die aktuelle Seite (hervorgehoben).

  • standard: Zeigt die Seitennummern der anderen sichtbaren Seiten.

  • next: Button für die nächste Seite (>).

Müssen das Buttons sein oder könnte ich hier auch Links verwendet werde oder sowas? oder muss ich hier schreiben: Zusätzlicher oder anderer HTML-Code kann nicht innerhalb der Komponente eingefügt werden.

Zusatzanweisungen per CSS können hinzugefügt werden?

Die Komponente erzeugt den folgenden Quellcode:

<nav class="pagination">
    <button class="pagination-prev"><</button>
    <span class="pagination-page current">1</span>
    <span class="pagination-page">2</span>
    <span class="pagination-page">3</span>
    <button class="pagination-next">></button>
</nav>

Die folgenden CSS-Klassen werden in der Ausgabe generiert und können für individuelles Styling verwendet werden:

• .pagination: Container für die Paginierung.

• .pagination-prev: Styling für den "Zurück"-Button.

• .pagination-next: Styling für den "Weiter"-Button.

• .pagination-page: Styling für die einzelnen Seitenzahlen.

• .pagination-page.current: Styling für die aktuell ausgewählte Seite.

Die folgenden WebComponents stehen zur Verfügung:

...

<ws-searchbox>: Eingabefeld für die Suche mit optionaler Suggest-Funktion.

...

<ws-search-result>: Darstellung der Suchergebnisse.

...

<ws-pagination>: Navigation durch mehrere Seiten von Suchergebnissen.

...

<ws-sortbox>: Auswahl der Sortieroptionen für Suchergebnisse.

...

<ws-filter>: Dynamische Filter, z. B. Checkboxen, Slider oder Range-Filter.

...

<ws-applied-filters>: Liste der aktuell aktiven Filter.

...

<ws-set-filter-back>: Button zum Zurücksetzen aller Filter.

...

Hierbei greift {{record.name}} auf den Produktnamen zu, während {{record.price}} den Preis aus den Suchergebnissen darstellt. Die verfügbaren Felder werden im JSON-Response des Such-Moduls bereitgestellt.

2.2 Datenbindung mit JSON

Die Daten für die Placeholder stammen aus einem JSON-Objekt, das von der Such-API bereitgestellt wird. Diese Daten können direkt im HTML-Template eingebunden werden, z. B.:

{
  "results": [
    {
      "_index": "search_index_20241210063555",
      "_id": "402396",
      "_score": 40.209557,
      "_source": {
        "number": "402396",
        "prodindexbase": "402396",
        "name": "Hose",
        "price": "32.00",
        "brand": "Levis",
        "thumbnail": "https://www.hir-shop.de/produkte/medien/bilder/klein/B402396.jpg"
      }
    }
  ],
  "total": 2192
}

Der Zugriff erfolgt über record.fieldname, zum Beispiel:

<p>{{record.name}}</p> <!-- Gibt "Hose" aus -->
<p>{{record.price}} €</p> <!-- Gibt "32.00 €" aus -->

2.3 Übersicht der Template Placeholder

...

...

3. React-JS-Basis

Die WebComponents basieren auf dem React-JS-Framework, was ihnen erweiterte Funktionalitäten und eine effiziente Aktualisierung der Benutzeroberfläche ermöglicht. Dank dieser Technologie können auch React-spezifische Features, wie das <template>-Tag, verwendet werden.

Ein Beispiel für eine React-basierte Produktanzeige:

<template id="resultItemTemplate">
    <div className="result-item">
        <h3>{product.name}</h3>
        <p>{product.price} €</p>
    </div>
</template>