Prerequisites
- You have installed the eCommerce Module version 1.2.1 or higher
- You have created a Product List Layout and outputted it on a Page
- You have created Products and added pricing to them
Introduction
In this article, I'll explain how you can sort and filter products by their price and return the results in an order of your choice.
We'll be using the URL to store the parameters we will use to sort and filter by. JavaScript will set these parameters in the URL and Liquid will read them and adjust the query accordingly. In the next document, I'll go through an example of how this can be done.
Adding the required parameters to Product List include
Firstly, we'll need to add the useadvsearch parameter to your Product List include- this is need for both Sorting and Filtering.
{%- include 'ecommerce/products', layout: "my-layout", type: 'list', use_adv_search: 'true' -%}
If you're Sorting there are a couple of other parameters that are needed, if you would just like to filter your Products skip to "Filtering Products by their Price".
{%- include 'ecommerce/products', layout: "my-layout", type: 'list', use_adv_search: 'true', sort_type: context.params.sort_type, sort_order: context.params.sort_order -%}
Sorting Products by their Price
Let's explore how we can sort our Products using the parameters within the URL, the parameters within the URL will be added to context.params- these are then outputted to our includes parameters 'sorttype' and 'sortorder'. Let's look at what these are doing:
Parameters
sort_type- the field we're sorting our Products by, this could be any field- for example, "name" or "release_date".sort_order- the ordering in which the sorted products will be outputted in, this can be "asc" or "desc".
We'll need to format our URL and its parameters to allow the sorting to work, both "sorttype" and "sortorder" will need values in order for the sorting to work (separated by the & symbol).
Sort type
Let's start with "sort_type", here's how this should look to sort by the price field:
https://my-website.staging.oregon.platform-os.com/product-list?sort_type=properties.module_field_14/product/price/currency/1
So 'product-list' is the name of my page, notice this is followed by a ? symbol- this simply tells the URL that parameters are being added after it. Then after the ? our first parameter can be been added:sort_type=properties.module_field_14/product/price/currency/1
Replace "currency" with the abbreviation (in lowercase) for whichever currency you're using. For me, this would be "gbp"- in the next document, I'll explain how you can add the Site's currency dynamically. Here's the field we're sorting by-which is the longer reference for the "pricecharge" field:`properties.modulefield_14/product/price/gbp/1`
The "1" at the end of the field name refers to Chargeable Price. Use "2" if you want to use Display Only Price instead.
Sort order
Now let's add the "sortorder" parameter- this will default to ascending order if no specified. To change the order add the & symbol just after our "sorttype" parameter, followed by "sort_order".
Full example (sort type and sort order):
https://my-website.staging.oregon.platform-os.com/product-list?sort_type=properties.module_field_14/product/price/currency/1&sort_order=desc
Filtering Products by their Price
We'll be using a range to filter our Products by price, this means that only Products with a price in between the "greater than" and "less than" parameters.
Parameters
range_field- the field we'll be sorting by, for the price this would be'properties.module_field_14/product/price/currency/1'.range_gt- price is greater than the specified value.range_lt- price is less than the specified value.
Filtering by price also required these parameters to be added to the URL- however, they're not needed on our include for Product list.
Range field
This represents the field we'll be sorting by, to sort by price this would be:properties.module_field_14/product/price/currency/1
Make sure you swap "currency" to whichever currency the Site is using- I'll example how to do this dynamically in the next document.
Here's how this will look for my Site:https://my-website.staging.oregon.platform-os.com/product-list?range_field=properties.module_field_14/product/price/gbp/1
Range greater than
The "rangegt" parameter will contain the minimum price that Products can have when being outputted, which is represented in "cents" (or pennies). If I only want Products with a price greater than £10 (or 1000 pence) then "rangegt" would need to be set to '1000'.
Use range_gte instead for >= logic.
Range less than
This parameter will control the maximum price a Product can have when being outputted, this is also formatted in "cents". To only output Products that have a price lower then £20 (or 2000 pence) then the parameter's value would be '2000'
Use range_lte instead for <= logic.
Full example (price between £10 and £20)
https://my-website.staging.oregon.platform-os.com/product-list?range_field=properties.module_field_14/product/price/gbp/1&range_gt=1000&range_lt=2000
Troubleshooting
Problem - the URL is correct, but the List is not being filtered
Check - Did you remember to add the useadvsearch parameter to your Product List include as explained at the beginning of the Article?
Related Articles
- A full example of filtering and sorting products front end - including JavaScript examples to help you get started building a User Interface for filtering and sorting Products
- See other uses of the useadvsearch parameter for filtering dynamic items