> ## 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 beziehungsweise jede gefundene Kategorie eine Referenz aus.

***

## Komponente

Ergebnisse werden pro Index gruppiert. Für jeden Index wird eine eigene `<ws-search-result>`-Instanz verwendet, beispielsweise für `product` und `category`. Diese Instanzen können frei im Layout platziert werden.

```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`
  * `tab`: Nur innerhalb von [ws-search-result-tabs](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-result-tabs) relevant. Bündelt mehrere `ws-search-result`-Instanzen in einem gemeinsamen Tab. Ohne `tab` bildet die `source` den Tab.
  * `content`: Alle Content-Ergebnisse. Sind [mehrere Content-Quellen](/ws-search/konfiguration-des-such-moduls#mehrere-content-quellen-für-die-suche) konfiguriert, werden deren Ergebnisse zusammengefasst dargestellt.
  * `content_<name>`: Nur die Ergebnisse einer einzelnen Content-Quelle, beispielsweise `content_blog`. Siehe Abschnitt [Mehrere Content-Quellen](#mehrere-content-quellen).
* `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, also wenn `use-ajax="no"` gesetzt ist.
* `item-class`: Setzt die CSS-Klasse für die einzelnen Ergebnis-Items. Relevant beim direkten Rendern durch die Komponente, also wenn `use-ajax="no"` gesetzt ist.

***

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

***

## Mehrere Content-Quellen

<Info>
  Die getrennte Darstellung einzelner Content-Quellen setzt **websale\_search\_webcomponents v1.7.0** voraus. Im Backend werden zusätzlich **elasticsearch\_manager v1.15.0** und **websale\_search v1.18.0** benötigt.
</Info>

Sind im Such-Modul [mehrere Content-Quellen](/ws-search/konfiguration-des-such-moduls#mehrere-content-quellen-für-die-suche) konfiguriert, entscheiden Sie über das `source`-Attribut, ob eine Instanz alle Quellen zusammenfasst oder nur eine einzelne Quelle darstellt. Der Name nach dem Unterstrich entspricht dem `name` der Quelle aus der Konfiguration des Importmoduls.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<!-- Alle Content-Ergebnisse zusammengefasst -->
<ws-search-result source="content"></ws-search-result>

<!-- Nur die statischen Inhaltsseiten -->
<ws-search-result source="content_static"></ws-search-result>

<!-- Nur die Blog-Ergebnisse -->
<ws-search-result source="content_blog"></ws-search-result>

<!-- Nur die Magazin-Ergebnisse -->
<ws-search-result source="content_magazin"></ws-search-result>
```

Die Komponente erkennt automatisch, ob die Response im Multi-Content-Format vorliegt, die Ergebnisse also unterhalb von `content` pro Quelle verschachtelt sind. Eine Umstellung im Template ist nur dann nötig, wenn Sie einzelne Quellen getrennt ausgeben möchten.

<Info>
  Die bisherige Nutzung mit `source="content"` bei einer einzelnen Content-Konfiguration funktioniert unverändert weiter.
</Info>

***

## 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`, `content` sowie `content_<name>` bei mehreren Content-Quellen.
* `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. Der Wert `1` zeigt beispielsweise ab dem 1. Ergebnis an.
  * `{%result.to%}`: Paginierung, bis zu welchem Ergebnis angezeigt wird. Der Wert `24` zeigt beispielsweise bis zum 24. Ergebnis an.

**Gesamtes Total über mehrere Indizes hinweg**

Wenn mehrere Indizes genutzt werden, beispielsweise `product`, `category` und `content`, und das indexübergreifende Gesamt-Total angezeigt werden soll, verwenden Sie [ws-search-info](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-info) ohne `source`-Attribut.

<Info>
  Ab `ws-search-component-1.9.1.js` übernimmt die Komponente [ws-search-info](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-info) die Trefferanzeige, inklusive des indexübergreifenden Gesamt-Totals, das bisher ein Script im Template erforderte. Die hier beschriebene Vorgehensweise ist weiterhin nutzbar, sollte in neuen Projekten aber nicht mehr verwendet werden.
</Info>

```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": ""
}
```

Bei mehreren Content-Quellen stehen die Content-Treffer verschachtelt unterhalb von `content`. Jede Quelle bildet dort einen eigenen Block mit `results` und `sub_total`. Die Gesamttrefferzahl `total` summiert weiterhin über alle Indizes.

```json theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{
  "product": {
    "results": [],
    "sub_total": 120
  },
  "content": {
    "static": {
      "results": [],
      "sub_total": 3
    },
    "blog": {
      "results": [],
      "sub_total": 5
    },
    "magazin": {
      "results": [],
      "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.


## Related topics

- [ws-search-result-tabs](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-result-tabs.md)
- [ws-suggest-result](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-suggest-result.md)
- [ws-search](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search.md)
- [ws-pagination](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-pagination.md)
- [Sichtbarkeit von Elementen an Komponenten koppeln](/ws-search/integration-in-die-templates-storefront/sichtbarkeit-von-elementen-an-komponenten-koppeln.md)