...

...

Inhaltsverzeichnis

Prinzip der WEBSALE WebComponents

Die WEBSALE WebComponents sind wiederverwendbare Bausteine, die von WEBSALE bereitgestellt werden und automatisch Quellcode für HTML und CSS generieren. Sie vereinfachen die Integration komplexer Funktionen, wie Suche, Filterung oder Paginierung, in die Storefront-Templates.

...

...

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 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>

Diese 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-Klassen generieren, die das grundlegende Erscheinungsbild definieren. Diese Klassen können in eigene CSS-Dateien übernommen und durch weitere Anweisungen ergänzt werden, um 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.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>{{productrecord.name}}</h3>
        <p>{{productrecord.price}} €</p>
    </div>
</template>

Übersicht der WebComponents

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.

• <ws-paging-size-selector>: Auswahl der Trefferanzahl pro Seite.

Dann habe ich noch <template> in Michis Code gefunden. Dann wäre noch die Frage, was man bei jedem einzelnen angeben kann - also welche Werte.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>