Zum Hauptinhalt springen
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. 
<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. 
<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. 
<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. 
<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 
<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: 
<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: 
<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>
Diese Lösung ist nur nötig, wenn mehr als ein Index genutzt wird.

​
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: 
<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: 
{
  "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": ""
}
Um die Felder unter _source verfügbar zu machen, muss der WEBSALE-Support kontaktiert werden. Dieser schaltet die Felder in der Backend-Konfiguration frei.

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