ws-search-result

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.

<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 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 konfiguriert, werden deren Ergebnisse zusammengefasst dargestellt.
- content_<name>: Nur die Ergebnisse einer einzelnen Content-Quelle, beispielsweise content_blog. Siehe Abschnitt 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.

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

Mehrere Content-Quellen

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.

Sind im Such-Modul mehrere Content-Quellen 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.

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

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

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, 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 ohne source-Attribut.

Ab ws-search-component-1.9.1.js übernimmt die Komponente 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.

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

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.

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

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.

WS-Search

Einrichtung

Integration in die Templates (Storefront)

Webcomponents – Template-Placeholder

Webcomponents – UI-Komponenten

Komponente

Placeholder-Template

HTML-Ausgabe

Mehrere Content-Quellen

Total-Container

Debugging und Ausgabe in der Konsole

CSS & Styling

​Komponente

​Placeholder-Template

​HTML-Ausgabe

​Mehrere Content-Quellen

​Total-Container

​Debugging und Ausgabe in der Konsole

​CSS & Styling

Komponente

Placeholder-Template

HTML-Ausgabe

Mehrere Content-Quellen

Total-Container

Debugging und Ausgabe in der Konsole

CSS & Styling