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

# ws-search-result

> ws-search-result rendert die Trefferliste der Suche oder Kategorie mit Produktdaten, Templates und Platzhaltern aus der Such-API-Response.

Die Komponente `<ws-search-result>` ist dafür verantwortlich, die Ergebnisse einer Suche oder Filterung in der Storefront darzustellen. Sie verarbeitet die Antwort (Response) des Such-Moduls und gibt für jedes gefundene Produkt bzw. jede gefundene Kategorie eine Referenz aus.

***

## Komponente

Ergebnisse werden pro Index gruppiert - für jeden Index (z.B. `product`, `category`) wird eine eigene `<ws-search-result>`-Instanz verwendet, die frei im Layout platziert werden kann.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-search-result
  source="product"
  use-ajax="yes"
  wrapper-class="result-grid"
  item-class="result-item">
  <template slot="result-placeholder">
    ...
  </template>
</ws-search-result>

<ws-search-result
  source="category"
  use-ajax="yes"
  wrapper-class="category-grid"
  item-class="category-item">
  <template slot="result-placeholder">
    ...
  </template>
</ws-search-result>
```

**Attribute**

* `source`: Gibt den Quellindex an, dessen Ergebnisse diese Instanz darstellt. Wird kein `source` gesetzt, verhält sich die Komponente wie bisher. Mögliche Werte:
  * `product`
  * `category`
  * `content`
* `use-ajax`: Gibt an, ob ein Ajax-Call zum Nachladen der WEBSALE Produktboxen genutzt wird
  * `true/yes`: Ajax-Call wird genutzt
  * Wenn nicht gesetzt, rendern die Web Components die Produktboxen
* `wrapper-class`: Setzt die CSS-Klasse für den Wrapper-Container. Relevant beim direkten Rendern durch die Komponente (d.h. wenn `use-ajax="no"`)
* `item-class`: Setzt die CSS-Klasse für die einzelnen Ergebnis-Items. Relevant beim direkten Rendern durch die Komponente (d.h. wenn `use-ajax="no"`).

***

## Placeholder-Template

Damit es beim Laden der Boxen nicht zu Höhenverschiebungen kommt, kann innerhalb von `<ws-search-result>` ein `<template>` mit dem Slot `result-placeholder` angegeben werden. Es wird für jedes Ergebnis als Platzhalter angezeigt, bis die Box vollständig geladen ist.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ws-search-result class="result-grid" use-ajax="yes">
  <template slot="result-placeholder">

      ...

  </template>
</ws-search-result>
```

***

## HTML-Ausgabe

**Produkte** (`source="product"`): Die Komponente erzeugt für jedes gefundene Produkt einen Container mit dem ID-Präfix `wsProductWebComponent-` und dem Attribut `data-product-id`. Über die ID kann per AJAX die WEBSALE-Produktbox nachgeladen werden.

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

    <div id="wsProductWebComponent-430856" data-product-id="430856">
        ...
    </div>

    <div id="wsProductWebComponent-450366" data-product-id="450366">
        ...
    </div>

</ws-search-result>
```

**Kategorien** (`source="category"`): Für die Kategorieergebnisse wird analog das ID-Präfix `wsCategoryWebComponent-` sowie das Attribut `data-category-id` verwendet. Die ID wird in der Storefront vom AJAX-Script genutzt, um die WEBSALE-Kategoriebox nachzuladen.

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

    <div id="wsCategoryWebComponent-100012" data-category-id="100012">
        ...
    </div>

</ws-search-result>
```

***

## Total-Container

Die Komponente `<ws-search-result>` übernimmt auch das Rendern von Total-Containern. Ein Total-Container zeigt Informationen zur Gesamtanzahl der Suchergebnisse sowie zur aktuellen Paginierung an.

Wichtig: Die CSS-Klasse `total-container` muss im `class`-Attribut enthalten sein, damit die Komponente den Container erkennt und rendert.

**Beispiel**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div class="total-container" source="product" data-template="{%result.from%} - {%result.to%} von {%result.total%} Produkten"></div>
```

Nach Erhalt der Suchergebnisse wird der Container durch `ws-search-result` gerendert:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div class="total-container" source="product" data-template="{%result.from%} - {%result.to%} von {%result.total%} Produkten">
  1 - 24 von 123 Produkten
</div>
```

**Attribute**

* `source`: Der Index, dessen Total angezeigt werden soll. Mögliche Werte sind `product`, `category` und `content`.
* `data-template`: Ein String-Template, das zum Rendern des textContent verwendet wird. Enthält Platzhalter, die durch die tatsächlichen Werte ersetzt werden:
  * `{%result.total%}`: Anzahl der Suchergebnisse insgesamt.
  * `{%result.from%}`: Paginierung: Ab welchem Ergebnis angezeigt wird (z.B. `1` → zeigt ab dem 1. Ergebnis an).
  * `{%result.to%}`: Paginierung: Bis zu welchem Ergebnis angezeigt wird (z.B. `24` → zeigt bis zum 24. Ergebnis an).

**Gesamtes Total über mehrere Indizes hinweg**

Wenn mehrere Indizes genutzt werden (z. B. `product`, `category`, `content`) und das indexübergreifende Gesamt-Total angezeigt werden soll, muss der Total-Container ohne `source`-Attribut verwendet werden. Da diese Funktionalität aktuell noch nicht nativ in den Web Components enthalten ist, wird sie über ein Script im Template gelöst:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<script>
  // Update global total-containers (without source attribute)
  var globalTotalContainers = document.querySelectorAll('.total-container:not([source])');

  for (var i = 0; i < globalTotalContainers.length; i++) {
    var template = globalTotalContainers[i].getAttribute('data-template');

    if (template) {
      var data = {
        total: event.detail.total,
        query: event.detail.query,
        from: event.detail.from + 1,
        to: Math.min(event.detail.from + event.detail.size, event.detail.total)
      };

      var rendered = template.replace(/{%\s*result\.(\w+)\s*%}/g, function(match, key) {
        return data[key] !== undefined ? data[key] : match;
      });

      globalTotalContainers[i].innerHTML = rendered;
    }
  }
</script>
```

<Info>
  Diese Lösung ist nur nötig, wenn mehr als ein Index genutzt wird.
</Info>

***

## Debugging und Ausgabe in der Konsole

Um die Anzeige der Ergebnisse mit dem technischen Response zu überprüfen, können Sie das folgende Skript verwenden. Es gibt die Ergebnisse in der Browser-Konsole aus:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<script>
  wsResultDispatcher.subscribe("result", function(resultData) {
    console.log(resultData); // Gibt die vollständige JSON-Antwort in der Konsole aus
  });
</script>
```

Die JSON-Antwort enthält die Liste der gefundenen Produkte sowie die im Such-Modul konfigurierten Produktattribute:

```json theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{
  "product": {
    "results": [
      {
        "_id": "430856",
        "_source": {
          "prodindexbase": "430856",
          "name": "Jogginghose",
          "price": "50.99",
          "brand": "adidas",
          "image": "https://ihr-shop.de/path/to/image.jpg"
        }
      }
    ],
    "sub_total": 1
  },
  "category": {
    "results": [
      {
        "_id": "100012",
        "_source": {
          "name": "Hosen",
          "url": "https://ihr-shop.de/hosen"
        }
      }
    ],
    "sub_total": 1
  },
  "total": 129,
  "filters": {},
  "applied_filters": {},
  "zero_result_filters": [],
  "wssearchdata": ""
}
```

<Info>
  Um die Felder unter `_source` verfügbar zu machen, muss der WEBSALE-Support kontaktiert werden. Dieser schaltet die Felder in der Backend-Konfiguration frei.
</Info>

***

## CSS & Styling

Die Komponente `<ws-search-result>` selbst erzeugt keine spezifischen CSS-Klassen. Das Styling wird vollständig über das `<template>`-Tag definiert. Sie können innerhalb dieses Templates beliebige CSS-Anweisungen verwenden, um die Darstellung der Suchergebnisse individuell anzupassen.