Custom Store Filters

Database Collection

In this example, we use the "Stores/Products" database collection. This collection is automatically added when you install Wix Stores on your site.

Data Connections

We added a Stores/Products dataset to connect the Stores/Products collection to the following elements:

• Repeater: For displaying products in the repeater

• Pagination bar: To paginate the repeater

Page Elements

We added the following elements to our site:

• Repeater: Displays the filtered products

• Text input: Search bar for entering product names to search for

• Slider: For setting the maximum product price to filter on

• Button: For clearing the filters

• Text: Displays the total number of filtered items

• Pagination Bar: For paging through the filtered products

Code

We added the following code to our site:

1. When a site visitor navigates to the default stores Shop page, redirect him to our custom My Shop page.

2. On the My Shop page, when the dataset is ready do the following:

3. Check the dataset total count (number of filtered products) and display it in a text element.

4. Define which data from the Stores/Product collection will populate the repeater elements. Note that the onItemReady() function is placed in the dataset onReady() function since the dataset defines which items from the collection are loaded into the repeater.

5. When a site visitor enters text in the search bar, first implement a delay to allow the visitor to finish typing, and then pass the search text to a filter function.

6. When a site visitor moves the price slider, pass the new value of the slider to a filter function.

7. If a site visitor clicks the Clear Filters button, reset the search bar and slider, and pass empty values to a filter function. Note that passing empty values to the function will clear the dataset filter.

8. In the filter function, do the following:

9. Check whether the search text or slider price changed. If so, create a new dataset filter.

10. If the search text has a value, filter by products whose name contains the search text, and whose price is less than or equal to the previously set slider value.

11. If the price has a value, filter by products whose price is less than or equal to the value, and whose name contains the previously set search text.

12. Apply the filter to the dataset.

13. Check the dataset total count (number of filtered products) and display it.

14. Update the variables containing the most recent name and price values for use in the next filter function.