Product Listing

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 Collection, and Search Results layouts.

You can configure a number of settings for this widget, including Display Options, and Web Application Configuration options.

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
id	This must be same as the property name on the product on which you want to sort. This can also be a dynamic property.
displayText	This is the localized value of what you want to display in the widget.
Order	Either asc for ascending sort order or desc for descending sort order.
maintainSortOrder	Set to true if you want the view models to use the parameter set for Order. If set to false, the order will default to asc for ascending order.
serverOnly	Set to true for sorting on the server side. Set to false to sort on client side within the available data.