top of page
Multiple Filter Methods

Multiple Filter Methods

Apply multiple filters to store products, with or without a dataset

Intermediate.png

Intermediate

8K

Published:

January 14, 2021

Anchor 1
Hire a Developer

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.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

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

  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.

APIs We Used

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Related Articles

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Filter With Multiple Options

Filter With Multiple Options

Filter a repeater with multiple options using the Selection Tags element.

Intermediate.png

Intermediate

Custom Store Filters

Custom Store Filters

Filter store products by name and price

Intermediate.png

Intermediate

Search a Database

Search a Database

Let visitors quickly search your site content.

Intermediate.png

Intermediate

Anchor 2
bottom of page