Skip to main content

Product Search

Product search has had some UI and UX improvements which will be released on 3rd of July 2023, giving 2 weeks period to apply breaking changes. The changes below are not yet in sandbox or production, therefore the new state variables and widgets won't become available until 3rd of July 2023. This page only exists to allow you time to prepare your code so that when the changes are released, your frontend code will have the new features enabled.

Filter changes​

With HAPI Backend API, you can either search with product name or apply filters. In the HAPI Elements UI, it was not obvious to the end user and it kind of indicated that you can apply both product name and filters.


We have added "OR" text between the Product Name and the other filters in the "Channel Filters" accordion. We have also added a disclaimer text below Product Name that clearly indicates this behavior.


As per feedback we have received, it was not clear to the end user that when you change the filters (type into product name field, or select an option from select dropdowns), the product search was reactively going to update. We have added a button to manually apply the filters, which automatically closes the accordion to allow more space for reviewing the list of search results. The button's text changes based on the filters:

  • It shows "Search by Product Name" when user has product name input filled in
  • It shows "Apply Filters" when user has not filled in the product name input

Widget changes​

he-product-filters-applybutton added​

If you have constructed your own UI for product search (using filter widgets), in this case, you will need to add the he-product-filters-applybutton at the bottom of your form.

State changes​

filtersAccordionIsOpen added​

You can use this new variable from product module and manage the expanded/collapsed state of the accordion.

Sorting added​

We have added Sorting for product search to sort by:

  • Recommended First
  • High Price
  • Low Price

Widget changes​

he-product-sortby added​

If you have constructed your own UI for product search (using product search widget like he-product-list-layout-card"), you can add this dropdown widget in between your widgets.

State changes​

searchSortBy added​

If you want to manage the sorting yourself, you can use this new variable with values of ProductSortBy enum, and you can use sortByKeys variable such as window.hapi.product.utils.sortByKeys.priceHighToLow to prevent hardcoding the values as we might change them later.

Breaking changes​

With the addition of the new button that applies the search filters, the product list does not reactively update and either the user needs to click the button to update the list, or you need to call a function to update it. If you are prefilling product search filters, then you might need to call the function to update it depending on the approach you take to prefill the filters:

If you are prefilling the filters via hapi:load:script​

In this case, when the widget loads, as it is the very first time of getting list of products, your prefilled filters will be applied and you don't need to call any function.

If you are prefilling the filters via some other way (like inside onChange listeners)​

In this case, you will need to call the below function after prefilling so the next time the widget is loaded, it will load with correct set of products:

// ...
// your prefilling code

// apply filters after prefilling
window.hapi.product.service.onChangeFilters()