ws-search-result-tabs

​

Voraussetzung

• Die <ws-search-result>-Instanzen müssen als Kindelemente innerhalb von <ws-search-result-tabs> liegen.
• JavaScript-Bundle ws-search-component-<Versionsnummer>.js ab Version 1.9.1

​

Komponente

<ws-search-result-tabs
  container-class="btn-group w-100"
  btn-class="btn btn-primary"
  content-class="tab-content mt-4"
  pane-class="tab-pane fade"
  default-tab="product,content"
  on-empty="skip"
  empty-tab="disabled">

  <template slot="tab-product">
    <div slot="label">
      <ws-search-info data-template="Produkte ({% result.product.sub_total %})"></ws-search-info>
    </div>
    <div slot="content">
      <!-- Filter/Sort Buttons nur für Product-Tab -->
      <div class="row mb-3">...</div>
    </div>
  </template>

  <template slot="tab-category">
    <div slot="label">
      <ws-search-info data-template="Kategorien ({% result.category.sub_total %})"></ws-search-info>
    </div>
  </template>

  <!-- content_static und content_blog in einen gemeinsamen Tab "content" bündeln -->
  <template slot="tab-content">
    <div slot="label">
      <ws-search-info source="content" data-template="Inhalte ({% result.total %})"></ws-search-info>
    </div>
  </template>

  <ws-search-result source="product" class="row"></ws-search-result>
  <ws-search-result source="category" class="row"></ws-search-result>
  <ws-search-result source="content_static" tab="content" class="row"></ws-search-result>
  <ws-search-result source="content_blog"   tab="content" class="row"></ws-search-result>

</ws-search-result-tabs>

• Attribute
  • container-class: CSS-Klassen für den Tab-Button-Container.
  • btn-class: CSS-Klassen für die Tab-Buttons.
  • content-class: CSS-Klassen für den Tab-Content-Container.
  • pane-class: CSS-Klassen für die einzelnen Tab-Panes.
  • default-tab: Bestimmt, welcher Tab nach einer Suche geöffnet wird:
    • sticky: Der zuletzt geöffnete Tab. (Default)
    • first: Immer der erste Tab.
    • <source>: Eine Source oder komma-separierte Source-Liste, z.B. default-tab="product" oder default-tab="product,content". Bei mehreren Sources wird der erste Tab mit Ergebnissen gewählt.
  • on-empty: Steuert das Auswahlverhalten, wenn der über default-tab gewählte Tab leer ist:
    • skip: Springt zum ersten Tab mit Ergebnissen. (Default)
    • show: Der gewählte Tab bleibt aktiv, auch wenn er leer ist.
  • empty-tab: Bestimmt, was mit leeren Tabs passiert:
    • disabled: Tabs bleiben sichtbar, sind aber nicht mehr auswählbar (inaktiv). (Default)
    • enabled: Tabs bleiben sichtbar und sind weiterhin auswählbar.
    • hidden: Tabs werden ausgeblendet.

​

Attribut tab an ws-search-result

​

Tab-Templates

• <div slot="label">: Pflicht. Inhalt des Tab-Buttons. Für dynamische Trefferzahlen im Label kann ws-search-info verwendet werden.
• <div slot="content">: Optional. Zusätzlicher Inhalt innerhalb des Tabs, beispielsweise Filter- oder Sortier-Elemente, die nur in diesem Tab angezeigt werden sollen.

​

Verhalten

• Die Tabs werden automatisch aus den <ws-search-result>-Kindelementen generiert.
• In den Tab-Labels kann ws-search-info für dynamische Trefferanzahlen verwendet werden; die Anzeige aktualisiert sich bei neuen Suchergebnissen automatisch.