|<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-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-filterable-list>||A component that is used to pre-filter a product list before it is rendered.|
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.
||string||Placeholder text for when the search input field is empty.|
||number||Specifies a breakpoint of the window width, where the search assistant toggles from an input field to an icon.|
To build a custom search assistant or customize responsiveness, parts of the search assistant can be used separately.
|Search assistant parts||Description|
||A button which on click opens a connected
||A styled input field which presents suggestions in a connected
||A drop-down that presents suggestions. Can be connected to a custom input field.|
||A modal including an input field and search suggestions. Can be connected to a custom trigger.|
||The suggestion result, presented in both the
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.
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>
||The content for this
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.
<esales-product-page [product-key]="product.key"></esales-product-page> <esales-recommendation zone-id="sp2" size="8" type="ALTERNATIVE" label="Similar items"></esales-recommendation> <esales-recommendation zone-id="sp1" size="4" type="COMPLEMENTARY" label="You might also like"></esales-recommendation>
||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.|
||The amount of products that should be displayed within the zone.|
||The algorithm-type of the zone. Can be either
||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
<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.
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,
The navigation tree which is displayed in the
<esales-category-navigation> is set up by using the navigation editor in the eSales Experience app.
<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>
||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.
<header> <nav>...</nav> <esales-navigation-assistant></esales-navigation-assistant> </header>
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.
||true*||The content for this
||false||The content for this
||false||The content for this
||boolean||True if the slot should be visible on all subcategories.|
<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>
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.
<esales-filterable-list data-custom.category_facet="Shorts|Pants" data-selling_price="[0,100]"></esales-filterable-list>
||Is used to tell the component what filters should be applied.
All standard attributes must be prefixed with
All custom attributes must be prefixed with
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,
Range values are enclosed within square brackets,
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