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

Einen Überblick aller UI-Komponenten finden Sie hier.

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 class="result-item">
        <h3>{{record.name}}</h3>
        <p>{{record.price}} €</p>
    </div>
</template>

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

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>