> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# WebComponents

> WEBSALE WebComponents mit ws-Präfix: HTML- und CSS-Bausteine für Suche, Filterung und Paginierung einfach in Storefront-Templates einbinden.

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

***

## UI-Komponenten

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-search-box> </ws-search-box>
```

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-search-box use-suggest="true">
    <input type="search" name="query" placeholder="Artikel suchen">
</ws-search-box>
```

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

### Überblick der UI-Komponenten

[UI-Komponenten](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten)

***

## Template Placeholder für dynamische Inhalte

### Grundstruktur der Template Placeholder

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:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<template id="resultItemTemplate">

        <h3>{{record.name}}</h3>
        <p>{{record.price}} €</p>

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

### 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.:

```json theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{
  "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:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<p>{{record.name}}</p>
<p>{{record.price}} €</p>
```

### Übersicht der Template Placeholder

[Template Placeholder](/ws-search/integration-in-die-templates-storefront/webcomponents/template-placeholder)

***

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<template id="resultItemTemplate">

        <h3>{product.name}</h3>
        <p>{product.price} €</p>

</template>
```