Skip to content

Component API

Search assistant

The search assistant component, <esales-search-assistant>, is a search field that provides built in support for features such as recent searches, autocomplete, and product suggestions. The results will be shown in a pop-up next to the input field.

Example

<esales-search-assistant placeholder="Search"></esales-search-assistant>

Attributes

Attribute Description
placeholder Placeholder text for when the search input field is empty.

Events

Read more about events and tracking in the component library.

Event name Description event.detail Payload
esales-product-suggestion Whenever a customer clicks on a product suggestion. { productKey: string, searchPhrase: string }

Search results

The search results component, <esales-search-results>, uses the URL query parameter q of the current page to display dynamic search results. Any changes to the sorting or facets will update the search result without a page load.

It is also possible to display arbitrary content for different states, such as when search is empty.

Example

<esales-search-results>
  <div slot="no-search-hits">
    <p>Since your search did not match anything, feel free to check these sources for help.<p>
    <ul>
      <li><a href="/help-section">Help section</a></li>
      <li><a href="/contact">Contact page</a></li>
    </ul>
  </div>
</esales-search-results>

Slots

A <slot> is a way for web components (with ShadowDOM) to display content inside them. The slot attribute is used to show content in a specific slot, e.g. <p slot="[name-of-the-slot]">. The list below shows which slots are available for this component.

Slot Description
no-search-hits The content for this slot will be displayed when there are zero search results for the query.

Recommendations [BETA]

The recommendation component, <esales-recommendation>, is a product-listing of zones containing various recommendations based on the given algorithm-type. The recommendation component relies on a <esales-product-page> existing on the same page.

Example

<esales-product-page [product-key]="params.id"></esales-product-page>
<esales-recommendation zone-id="sp1" type="COMPLEMENTARY" label="Recommendations for you"></esales-recommendation>
<esales-recommendation zone-id="sp2" type="ALTERNATIVE" label="You might also like"></esales-recommendation>

Attributes

Attribute Description
zone-id Zone id, used to identify the specific zone.
type The algorithm-type of the zone, i.e. COMPLEMENTARY or ALTERNATIVE.
label Label of the zone that is displayed in the top of the component.
×