ws-search-result-tabs

​

Prerequisite

• The <ws-search-result> instances must be child elements within <ws-search-result-tabs>.
• JavaScript bundle ws-search-component-<version>.js from version 1.9.1 onwards

​

Component

<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="Products ({% result.product.sub_total %})"></ws-search-info>
    </div>
    <div slot="content">
      <!-- Filter/Sort buttons only for the product tab -->
      <div class="row mb-3">...</div>
    </div>
  </template>

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

  <!-- Bundle content_static and content_blog into a shared "content" tab -->
  <template slot="tab-content">
    <div slot="label">
      <ws-search-info source="content" data-template="Content ({% 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>

• Attributes
  • container-class: CSS classes for the tab-button container.
  • btn-class: CSS classes for the tab buttons.
  • content-class: CSS classes for the tab-content container.
  • pane-class: CSS classes for the individual tab panes.
  • default-tab: Determines which tab is opened after a search:
    • sticky: The tab last opened. (Default)
    • first: Always the first tab.
    • <source>: A source or a comma-separated list of sources, for example default-tab="product" or default-tab="product,content". With multiple sources, the first tab with results is selected.
  • on-empty: Controls the selection behavior when the tab selected via default-tab is empty:
    • skip: Jumps to the first tab with results. (Default)
    • show: The selected tab remains active even if it is empty.
  • empty-tab: Determines what happens with empty tabs:
    • disabled: Tabs remain visible but can no longer be selected (inactive). (Default)
    • enabled: Tabs remain visible and can still be selected.
    • hidden: Tabs are hidden.

​

tab attribute on ws-search-result

​

Tab templates

• <div slot="label">: Required. Content of the tab button. For dynamic hit counts in the label, ws-search-info can be used.
• <div slot="content">: Optional. Additional content within the tab, for example filter or sort elements that should only be displayed in this tab.

​

Behavior

• The tabs are generated automatically from the <ws-search-result> child elements.
• In the tab labels, ws-search-info can be used for dynamic hit counts; the display updates automatically when new search results are available.