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.

Recommendation *

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. Can be either COMPLEMENTARY or ALTERNATIVE.
label Label of the zone that is displayed in the top of the component.

The navigation page component, <esales-navigation-page>, contains the filters and product-listing.

This component is not dependent on other components but is normally used in combination with <esales-left-navigation> or <esales-navigation-assistant>.

Example

<div class="wrapper">
  <esales-left-navigation></esales-left-navigation>
  <esales-navigation-page></esales-navigation-page>
</div>

Left navigation *

The left navigation component, <esales-left-navigation>, is used to navigate between different categories and is used with either the navigation page component, <esales-navigation-page>, or the search results component, <esales-search-results>.

The navigation tree which is displayed in the <esales-left-navigation> is set up by using the navigation-editor in the eSales Experience app.

Example

<div class="wrapper">
  <esales-left-navigation></esales-left-navigation>
  <esales-navigation-page></esales-navigation-page>
</div>

<div class="wrapper">
  <esales-left-navigation search></esales-left-navigation>
  <esales-search-results></esales-search-results>
</div>

Attributes

Attribute Description
search Is used to tell the component if it should communicate with a search-page instead of a navigation-page.

The navigation assistant component, <esales-navigation-assistant>, is used for navigation in mobile-mode as well as to interact with the navigation page component, <esales-navigation-page>.

The navigation tree which is displayed in the <esales-navigation-assistant> is set up by using the navigation-editor in the eSales Experience app.

Example

<header>
  <nav>...</nav>
  <esales-navigation-assistant></esales-navigation-assistant>
</header>

* Limited availability

×