Products listing
products listing template page. This page template is based on a category or search query. It is created to produce better products listings based on a specific need or purpose set by the developer.This page is a key feature for a better customer experience as it funnels site visitors to product detail pages and closer to conversion.
Example
Variables
ProductsListingPage
page
object
optional
title
string
optional
slug
enum<string>
optional
Allowed values:
product.indexproduct.index.latestproduct.index.searchproduct.index.tagproduct.index.offers
id
string
optional
Default:
When page.slug=`product.index` => page.id = category.id | When page.slug=`product.index.tag` => page.id = tag.id
category
object (Category_Products_Listing)
optional
name
string
optional
url
string
optional
sub_categories
array[object (Category) {14}] | null
category | null
image
string | null
optional
sort_options
array [object {3}]
optional
id
enum<string>
optional
Allowed values:
ourSuggestbestSelltopRatedpriceFromTopToLowpriceFromLowToTop
name
string
optional
is_selected
boolean
optional
search_query
string | null
optional
Components
JS Web Components
<salla-products-list>Hooks
products listing template page calls for the following hooks in order to inject extra information.Usage
products that contains all of the products that need to be listed on this page. As we explained before, these products have a common category, offers, tags, or search result. page.title. This is to show the type of listing being used, filteration, on this page.sort_list contains the sorting methods for the product listing, which can be displayed with a for-loop statement. Each element inside that array consists of an object that contains a pair of values, which indicates the sorting method.ourSuggest, bestSell, topRated, priceFromTopToLow, priceFromLowToTop. The developer may retrieve the value of sort.is_selected in order to check if a specific sorting method has already been selected.products object within a for-loop statement can be used to display a list of the received products. The developer may use any style for display purposes.product.name, product.image.url, product.url, product.price, and many more.trans('pages.categories.no_products') in the case of no products in the listing. This is to make sure that the page is showing the correct content for the end user.Educational Clip