ws-suggest-result

The <ws-suggest-result> component is a child element of <ws-suggest> and lets you configure and display several result types (for example search suggestions, products, categories) separately. As soon as at least one <ws-suggest-result> is present, Orchestrator Mode is activated automatically in <ws-suggest>.

Component

Results are grouped per type – for each type (for example product, category), a separate <ws-suggest-result> instance is used as a child element of <ws-suggest>.

<ws-suggest class="wsSuggestContainer">

  <ws-suggest-result class="wsQuerySuggest" source="query">
    <template id="wsQuerySuggestTemplate">

        {%result.label%}

    </template>
  </ws-suggest-result>

  <ws-suggest-result class="wsShowAllSuggest" source="show-all">
    <template id="wsShowAllSuggestTemplate">

        Show all results for: {%query%}

    </template>
  </ws-suggest-result>

  <ws-suggest-result class="wsProductSuggest" source="product">
    <template id="wsProductSuggestTemplate">

        ...

    </template>
  </ws-suggest-result>

</ws-suggest>

Attributes

Value	Description
`source`	Defines the result type displayed by this instance. Possible values: - `query` – search suggestions - `product` – product suggestions - `category` – category suggestions - `content` – content suggestions - `show-all` – “Show all results” link
`use-ajax`	Optional Enables external rendering via the `wsLoadAjax` template function (`wsResultDispatcher.subscribe("suggest", ...)`). - Requires `ws-search-template-helper` from version 1.0.6 onwards. - With `use-ajax="no"`, a `<template>` element is required for rendering (see example above).
`data-value`	Required for clickable elements Every clickable element within a template must have the `data-value` attribute so that keyboard navigation works correctly. For `source="show-all"`, the value may be empty: `data-value=""`.

show-all: Simple text replacement

With the other source types (for example query, product), Mustache is used – a template system that replaces placeholders such as {%result.value%} with actual values from the API response and can also process logic such as loops or conditions. For source="show-all", this is not necessary since there is only one dynamic value: the current search term. Instead, a simple text replacement is used – {%query%} is directly replaced with the entered search term.

Important: The only working placeholder is {%query%}. Other Mustache placeholders such as {%result.value%} are not evaluated here and appear unchanged in the HTML.

Example

<ws-suggest-result source="show-all">
  <template id="wsShowAllSuggestTemplate">

      Show all results for: {%query%}

  </template>
</ws-suggest-result>

hide-with

hide-with is deprecated and is replaced from ws-search-component-1.9.1.js onwards by the visibility attribute. hide-with still works, but should no longer be used in newer projects.

The hide-with attribute can be set on any element to hide it depending on a <ws-suggest-result> or <ws-search-result> – for example tab buttons or headings that should only be visible when the associated result area has content. Syntax: hide-with="ws-search-result-<source>" or hide-with="ws-suggest-result-<source>"

hide-with is currently only available for ws-suggest-result and ws-search-result.

Example

<button type="button" hide-with="ws-search-result-product">Products</button>
<button type="button" hide-with="ws-search-result-category">Categories</button>
<button type="button" hide-with="ws-search-result-content">Content</button>

<h3 hide-with="ws-search-result-product">Products</h3>
<ws-search-result source="product"></ws-search-result>

<h3 hide-with="ws-search-result-category">Categories</h3>
<ws-search-result source="category"></ws-search-result>

<h3 hide-with="ws-search-result-content">Content</h3>
<ws-search-result source="content"></ws-search-result>

total-container

The total-container attribute (or the CSS class of the same name) enables the display of search result metadata in the frontend. There are two usage modes:

Mode	Description	Available keys
With `source` attribute	Rendered by the web components.	- `from` – start of the current page (for example `1` for a page size of 16) - `to` – end of the current page (for example `16` for a page size of 16) - `total` – total number of search results
Without `source` attribute	Rendered by the template helper (`>=v1.0.6`).	- `query` – current search term - `from` – start of the current page (for example `1` for a page size of 16) - `to` – end of the current page (for example `16` for a page size of 16) - `size` – page size (for example `16`) - `total` – total number of search results

Example

<h1 class="wsHeadlineBig mb-3 total-container"
    data-template="Search for &quot;{%result.query%}&quot; ({%result.total%} hits)">
</h1>

sort-order

Overrides the backend sorting for the element on which it is set. Intended primarily for <ws-suggest-result>, to sort displayed suggestions by a field. Syntax: <field-name>_<direction> Explanation

Part	Description
`field-name`	Field name from the API response; must be entered in the configuration of the search module under `display_fields`.
`direction`	`asc` (ascending) or `desc` (descending). Default: `asc`

Example

<ws-suggest-result source="category" sort-order="cat_str_path_asc" use-ajax="yes" id="wsCategorySuggest">
</ws-suggest-result>

<ws-suggest-result source="content" sort-order="title_asc">
  <template id="wsContentSuggestTemplate">
    <a href="/{%result._id%}" class="wsSuggestItem" data-value="{%result._id%}">
      {%result._source.title%}
    </a>
  </template>
</ws-suggest-result>

WS-Search

Setup

Integration into templates (Storefront)

Web components – Template placeholders

Web components – UI components

Component

show-all: Simple text replacement

hide-with

total-container

sort-order

​Component

​show-all: Simple text replacement

​hide-with

​total-container

​sort-order

Component

show-all: Simple text replacement

hide-with

total-container

sort-order