This widget displays a list of products relevant to the shopper’s navigation context. When directly navigating via a collection, this widget displays products belonging to that collection. When navigating via a search, this widget displays a list of products matching the given search term. Each product is shown with the product image, name, and price.
It is available for the following layouts:
Collection Layout
Search Results Layout
For information on how to use this widget in popup stacks, see Add popup stacks.
Support generic sort on the product listing widget
The ProductListing widget uses productListingViewModel to fetch products, pagination, scroll and sort. You can enable the sort to use any product property as the sort parameter using this code in the product-listing widget:
widget.listingViewModel().useGenericSort = true;
You will need to update the sort options with the required parameters, described in the following table. For example if you want to add the sort option as displayName property, you might use the following:
var sortOptions = [{
"id": "displayName",
"displayText": Name - Asc,
"order": ko.observable("asc"),
"maintainSortOrder": true,
"serverOnly": true
}];Parameter | Description |
|---|---|
| This must be same as the property name on the product on which you want to sort. This can also be a dynamic property. |
| This is the localized value of what you want to display in the widget. |
| Either |
| Set to |
| Set to |
