Skip to content

Search Integration

The two main components used for enabling search in eSales Fashion are the Search assistant component, <esales-search-assistant>, and the Search results component, <esales-search-results>. With these components added, it is possible to search via the eSales Search assistant, showing the results on the search page via the Search results component.

Search assistant

The Search assistant component must be added to enable a search box. It is recommended to add it to the header and to make it available to all pages.

<body>
  <nav>
    <header>
      <esales-search-assistant placeholder="Search"></esales-search-assistant>
    </header>
  </nav>
</body>

Search page

The Search page must include the Search results component. The URL of the Search page must match the URL provided by searchPageUrlPrefix in the Script Initialisation.

<body>
  <main>
    <esales-search-results></esales-search-results>
  </main>
</body>

It is highly recommended to include the Category navigation component to the search page. For more information, see Navigation Integration.

Facets

The search page will include default facets for colour, department, brand, price, size, and material. Facets management such as removing and adding facets is performed in the Settings tab in the Experience app.

The order of the facet values can be set to either Sort by relevance or Alphabetical. Additional facets can be added if they are defined as custom_attributes for products in the data feed.

Default facets - Search page

There are several different ways of implementing the search experience and its responsiveness. It can be done solely by adding the search assistant component, <esales-search-assistant>, and supplying it with a break point-value where it will toggle between mobile and desktop mode. It can also be done by adding both the search assistant input component, <esales-search-assistant-input>, and the search assistant trigger component, <esales-search-assistant-trigger>, and toggling them with a CSS media query.

<header>
  <nav>...</nav>
  <esales-search-assistant breakpoint="992"></esales-search-assistant>
</header>
<header>
  <nav>...</nav>
  <esales-search-assistant-input></esales-search-assistant-input>
  <esales-search-assistant-trigger></esales-search-assistant-trigger>
</header>
esales-search-assistant-trigger {
  display: none;
}

@media (max-width: 992px) {
  esales-search-assistant-trigger {
    display: block;
  }
  esales-search-assistant-input {
    display: none;
  }
}

The different parts of the search assistant component, <esales-search-assistant>, can be used separately to create a custom search box. For descriptions of the different parts, see the Component API.

Input field styling

A custom styled input field for search can be used while still maintaining the default drop-down that includes the search suggestions and results. This requires that the class set on the input field is used as the value of the input-selector attribute on the search assistant drop-down, <esales-search-assistant-dropdown>.

The following example uses the class search-input to style the input field and to connect it to the search assistant drop-down. Note that value of the input-selector attribute must start with a period sign, ..

<div class="container">
  <input type="search" placeholder="Search" class="search-input">
  <esales-search-assistant-dropdown input-selector=".search-input"></esales-search-assistant-dropdown>
</div>

Search assistant result styling

It is possible to show search results and suggestions in a different style drop-down or modal than the default drop-down by using the search assistant result, <esales-search-assistant-result>. This allows for the creation of fullscreen search inputs and results.

The following example uses a custom styled drop-down where the results are shown in a <div> rather than the default search assistant drop-down, <esales-search-assistant-dropdown>.

<div class="container">
  <input type="search" placeholder="Search" class="search-input">
  <div class="dropdown">
    <esales-search-assistant-result
      (blur)="${ this.handleClose }"
      (resultsRender)="${ this.resultsRendered }"
      input-selector=".search-input">
    </esales-search-assistant-result>
  </div>
</div>

For the mobile search experience it is possible to use a custom styled trigger to open the search assistant modal, <esales-search-assistant-modal>, instead of using the default search assistant trigger, <esales-search-assistant-trigger>.

The following example has an HTML button with a custom class, modal-trigger. A JavaScript is used to listen to click events on elements with this class to open the search assistant modal.

<button class="modal-trigger">Search</button>
const btn = document.querySelector('.modal-trigger');
btn.addEventListener('click', function() {
  const modal = document.createElement('esales-search-assistant-modal');
  modal.placeholder = 'Search me'
  document.body.appendChild(modal);
});
×
Copyright

This online publication is intellectual property of Apptus Technologies. Its contents can be duplicated in part or whole, provided that a copyright label is visibly located on each copy and the copy is used in conjunction with the product described within this document.

All information found in these documents has been compiled with utmost attention to detail. However, this does not guarantee complete accuracy. Neither Apptus Technologies nor the authors shall be held liable for possible errors or the consequences thereof.

Software and hardware descriptions cited in these documents might be registered trademarks. All trade names are subject to copyright restrictions and may be registered trademarks. Apptus Technologies essentially adheres to the manufacturer’s spelling. Names of products and trademarks appearing in this document, with or without specific notation, are likewise subject to trademark and trade protection laws and may thus fall under copyright restrictions.

CLOSE