Example Description
This example demonstrates how to filter and sort your store products using 2 different methods:
Dataset + code: Use this method if you have a dataset on your page that connects your database collection content with your page elements.
Only code: Use this method if you do not have a dataset on your page and you want to use code to manage the connections between your database collection content and page elements.
Each method is demonstrated on its own site page.
For each method, site visitors can choose to filter by product name or SKU, and to sort by product name or price. On the ‘Only with code’ page, visitors can also filter by products that are in stock.
You can view a tutorial on this example here.
How We Built It
Database Collection
This example uses the Stores/Products collection that is automatically added to any site with a Wix Store.
Database Connections
On the ‘filter with dataset plus code’ page, we use a dataset to connect the data in the Stores/Products collection with the image, name, price, and SKU of the displayed products.
Page Elements
On both pages of our site, we added the following elements:
Input field to enter the product name or its SKU.
Dropdown to choose how to sort the products.
Repeater to display the results.
Button to switch to the page with the other filter method.
On the Filter only with code page, we also added the following elements:
Checkbox to select whether you want to display only products that are in stock.
Text element to display messages.
Code
Dataset plus code
If text is entered into the search bar or the sort dropdown changes, filter the dataset by doing the following:
If there is text in the search bar, set the filter to include only products with names containing the text, or SKUs matching the text. Note that filtering by SKU only works if the visitor enters the complete SKU.
Set the sort according to the visitor’s choice in the dropdown.
Apply the filter and sort to the dataset.
Only code
In the queryAndSort.jsw backend module, build and refine a data query for filtering by name or SKU, and sorting by name or price. Also refine the query results to include only in stock items if requested.
In the page code, when text is entered into the search bar, or the sort dropdown or in stock checkbox changes, run the imported backend function to query, filter, and/or sort the data from the database collection.
If something goes wrong, display an error message.
Set the repeater’s data and then load the repeater elements with the filtered data.
Related Examples
Did this help?
|
Thanks for your feedback!
Filter With Multiple Options
Filter a repeater with multiple options using the Selection Tags element.
Intermediate
Custom Store Filters
Filter store products by name and price
Intermediate
Search a Database
Let visitors quickly search your site content.
Intermediate