Vorbly Code | WIX CODE E-COMMERCE PRODUCT FILTERS

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

1/4

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.

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP