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