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.


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


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


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.


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


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.


<esales-product-page [product-key]=""></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>


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.