Multiple Filter Methods

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

1. If text is entered into the search bar or the sort dropdown changes, filter the dataset by doing the following:

2. 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.

3. Set the sort according to the visitor’s choice in the dropdown.

4. Apply the filter and sort to the dataset.

Only code

1. 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.

2. 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.

3. If something goes wrong, display an error message.

4. Set the repeater’s data and then load the repeater elements with the filtered data.