Component API

Component list

Main Components Description
<esales-search-assistant> A responsive search field with support for recent searches, phrase suggestions, and product suggestions.
<esales-search-results> A product listing with contextual filters, sorting, and headers for presenting a search result.
<esales-product-page> An empty container indicating a product page for notification and context purposes.
<esales-recommendation> A list of products displaying recommendations. Requires the esales-product-page component.
<esales-navigation-assistant> A search field with support for recent searches, autocomplete, autocorrect, and product suggestions.
<esales-navigation-page> A product listing with contextual filters, sorting, and headers for presenting category listings.
<esales-category-navigation> A navigation component that is used together with with product listing components, such as esales-search-results and esales-navigation-page.
<esales-filterable-list> A component that is used to pre-filter a product list before it is rendered.

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, autocorrect, and product suggestions. The results will be shown in a pop-up next to the input field. At a certain breakpoint the component is instead rendered as a button. The button opens a modal for input on click, suitable for mobile devices.

Example

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

Attributes

Attribute Type Description
placeholder string Placeholder text for when the search input field is empty.
breakpoint number Specifies a breakpoint of the window width, where the search assistant toggles from an input field to an icon.

Advanced

To build a custom search assistant or customize responsiveness, parts of the search assistant can be used separately.

Search assistant parts Description
<esales-search-assistant-trigger> A button which on click opens a connected esales-search-assistant-modal.
<esales-search-assistant-input> A styled input field which presents suggestions in a connected esales-search-assistant-dropdown.
<esales-search-assistant-dropdown> A drop-down that presents suggestions. Can be connected to a custom input field.
<esales-search-assistant-modal> A modal including an input field and search suggestions. Can be connected to a custom trigger.
<esales-search-assistant-result> The suggestion result, presented in both the esales-search-assistant-dropdown and the esales-search-assistant-modal. Can be used to build a custom drop-down or modal.

Search results

The search results component, <esales-search-results>, is composed of a product listing and contextual filters. The content is determined by the search query and uses the URL query parameter q of the current page to determine the result. Any changes to the sorting or facets will update the search result without a page load.

Example

<esales-search-results></esales-search-results>

Slots

The search results supports a slot for empty states, e.g content that is displayed when the query results in no hits.

<esales-search-results>
  <div slot="no-search-hits">
    <p>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>
Slot id 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, see Recommendation integration. A recommendation component can be either static or as a product carousel.

Example

<esales-product-page [product-key]="product.key"></esales-product-page>
<esales-recommendation zone-id="sp2" size="8" carousel breakpoint="1200" type="ALTERNATIVE" label="Similar items"></esales-recommendation>
<esales-recommendation zone-id="sp1" size="4" type="COMPLEMENTARY" label="You might also like"></esales-recommendation>

Attributes

Attribute Description
zone-id Zone id, used to identify the specific zone. The zone id is recommended to be related to the functionality and placement of the recommendation component.
size The amount of products that should be displayed within the 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.
carousel Defines if recommended products should be displayed in a product carousel.
breakpoint Optional attribute when using the carousel attribute. Defines the breakpoint in pixels when the carousel scroll arrows are either outside or inside of the carousel. The default value is 1050.

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-category-navigation> or <esales-navigation-assistant>.

Example

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

The navigation components should be placed on all pages below a given path, e.g under all pages under https://example.com/categories/*. The navigation components should also be placed on any old category page where the eSales Fashion category listings are to be used.

To test the navigation page, make sure to have the navigationPagePathPrefix properly set in the script initialisation. In the case above it would for example be https://example.com/categories set as navigationPagePathPrefix. Once in place, test the components by navigating to a URL where there is a mapped category in the taxonomy tree.

Category navigation

The category navigation component, <esales-category-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-category-navigation> is set up by using the navigation editor in the eSales Experience app.

Example

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

<div class="wrapper">
  <esales-category-navigation search></esales-category-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. It interacts with the navigation page component, <esales-navigation-page>, used for listings in both desktop and mobile mode.

The categories displayed in the <esales-navigation-assistant> are determined by the taxonomy. The taxonomy is set up and altered using the navigation editor in the eSales Experience app.

Example

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

Slots

The navigation assistant supports slots for custom content in 3 positions. Slots can either be displayed on all subcategories or only main categories. The attribute sticky indicates this.

Slot Sticky default Description
header-top true* The content for this slot will be displayed at the bottom of navigation assistant on all departments.
*sticky cannot be changed.
header-bottom false The content for this slot will be displayed at the bottom of navigation assistant on all departments.
footer false The content for this slot will be displayed at the bottom of navigation assistant on all departments.
Attribute Type Description
sticky boolean True if the slot should be visible on all subcategories.

Example

<header>
  <nav>...</nav>
  <esales-navigation-assistant>
    <span slot="footer">Displayed at the bottom.</span>
    <span slot="header-top">Displayed above departments.</span>
    <span slot="header-bottom" sticky="true">Displayed right beneath departments.</span>
  </esales-navigation-assistant>
</header>

Filterable list

The filterable list component, <esales-filterable-list>, is used to pre-filter a product list before it is rendered. The component enables the use of facets and custom attributes to filter out products that should be displayed before page rendering is done. Facets that are used for pre-filtering are not shown as selected facets within the Navigation page component, <esales-navigation-page>, nor in the page URL.

Example

<esales-filterable-list data-custom.category_facet="Shorts|Pants" data-selling_price="[0,100]"></esales-filterable-list>

Attributes

Attribute Description
data-{attribute}="{value}" Is used to tell the component what filters should be applied.
All standard attributes must be prefixed with data-.
All custom attributes must be prefixed with data-custom..
The value must be a valid attribute value of the given attribute to be applied.
The attribute and the attribute value must use the same format as in the data feed.
Multiple values are seperated with a pipe character, |, e.g. "Shorts|Pants".
Range values are enclosed within square brackets, [], e.g. [0,100].
×
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