Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX CODE E-COMMERCE PRODUCT FILTERS
Starting an eCommerce business? This tutorial will show you how to add multiple product filters (e.g. price slider, category dropdowns) to your online store using Wix Repeaters. Help your customers find specific products and improve conversion rates. We will provide you with the webpage elements and sample codes required to implement this feature.
THE DEMO
Design your online store by adding a Wix Repeater and filter buttons (e.g. dropdown and slider) to your webpage. Showcase your products and allow customers to filter product by category and by price.
Add Wix Code to your webpage to filter specific products by category and price.
When customers filter products by category and price, only relevant products are displayed.
Design your online store by adding a Wix Repeater and filter buttons (e.g. dropdown and slider) to your webpage. Showcase your products and allow customers to filter product by category and by price.
THE ELEMENTS
The Page
Repeater: #repeater1
User Input (Filters):
-
Category Filter (Dropdown): #dropdown1
-
Price Filter (Slider): #slider1
Button Elements:
-
Filter Button: #Filter
-
Reset Button: #Reset
The Database
Create a database: Products (dataset1)
Recommended fields:
-
Product Name Field: product
-
Product Description Field: description
-
Product Image Field: image
-
Price Field: price (for filtering)
-
Product Category Field: type (for filtering)
Then link fields to your repeater.
THE CODE
Page Code
import wixData from 'wix-data';
export function Filter_click(event, $w) {
let type = $w("#dropdown1").value
let price = $w("#slider1").value
$w("#dataset1").setFilter(wixData.filter()
.eq('type',type)
.lt('price',price)
)
}
export function Reset_click(event, $w) {
$w("#dataset1").setFilter(wixData.filter());
}
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.