ws-suggest

The <ws-suggest> component is used to display search suggestions within a search box. The individual suggestions are displayed as a list and can be selected by mouse click or via the keyboard (arrow keys for navigation, Enter to select). Optionally, an additional “Show all results” element can be shown at the end of the list, which is treated like a regular suggestion. When selected, a search with the current search term is triggered. The placeholder {%query%} in show-all-message is dynamically replaced with the entered search term.

Component

The component can be embedded within <ws-search-box> to control the display of the suggest box:

<ws-suggest
  suggest-container-class="suggestions"
  suggest-item-class="suggestion-item"
  use-show-all="yes"
  show-all-class="suggestion-show-all-item"
  show-all-message="Show all results for: <strong>{%query%}</strong>">
</ws-suggest>

Attributes
- suggest-container-class – Specify CSS class(es) for the container of the suggest box.
- suggest-item-class – Specify CSS class(es) for the suggest items.
- use-show-all
  - true / yes – Activates the additional “Show all” element (show all results) at the end of the suggestion list.
- show-all-class – Specify CSS class(es) for the “Show all” element.
- show-all-message – Display text for the “Show all” element. In the display text, {%query%} can be replaced with the current search term. Default: Show all results for: '{%query%}'.

The attributes use-show-all, show-all-class, and show-all-message are only relevant in the simple mode (without <ws-suggest-result>). In orchestrator mode, show-all is configured via a <ws-suggest-result source="show-all"> element.

Orchestrator mode

As soon as <ws-suggest> contains at least one <ws-suggest-result> child element, Orchestrator Mode is activated automatically. In this mode, <ws-suggest-result> takes over control of the display per result type (for example search suggestions, products, categories). Further details on the configuration of <ws-suggest-result> are described here.

suggest-container

The suggest-container attribute can be set on any HTML element. This causes that element (including all child elements) to be hidden and shown together with the associated <ws-suggest-result> – for example, to hide section headings together with the result area because no results are available. Example

<ws-suggest class="wsSuggest">

    <!-- Everything within this container (including the container itself)
         is shown/hidden together with ws-suggest-result -->
    <div suggest-container>
      Search suggestions

      <ws-suggest-result source="query">
        <template id="wsQuerySuggestTemplate">
          {%result.label%}
        </template>
      </ws-suggest-result>

    </div>

</ws-suggest>

Mustache delimiters in templates

Since the VX template engine uses {{ }} as delimiters, which leads to conflicts with the Mustache rendering of the components, different delimiters are used in all web component templates:

Webcomponents (ws-suggest, ws-suggest-result, …) uses {% %}
VX template engine uses {{ }}

Example

<template id="wsProductSuggestTemplate">
  <a href="{%result.url%}" data-value="{%result.name%}">
    {%result.name%}
    {%result.price%} {%result.currency%}
  </a>
</template>

Styling via CSS

If no own CSS classes are specified via the component, the search sets default classes:

suggestions
suggestion-item
show-all-item

Example source code for the suggest container

<ws-suggest use-show-all="yes" show-all-class="suggestion-show-all-item" show-all-message="Show all results for: &lt;strong&gt;{%query%}&lt;/strong&gt;">
...

      Mokassin (90)
      Mokassin-Ballerina (73)
      Mokassin-Handnaht (50)
      Show all results for: <strong>Mokas</strong>

...
</ws-suggest>

WS-Search

Setup

Integration into templates (Storefront)

Web components – Template placeholders

Web components – UI components

Component

Orchestrator mode

suggest-container

Mustache delimiters in templates

Styling via CSS

​Component

​Orchestrator mode

​suggest-container

​Mustache delimiters in templates

​Styling via CSS

Component

Orchestrator mode

suggest-container

Mustache delimiters in templates

Styling via CSS