Vorbly Code | WIX REPEATER WITH FILTER BUTTONS

Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX REPEATER WITH FILTER BUTTONS

Starting an eCommerce business? This tutorial will show you how to add product filter buttons 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/3

THE ELEMENTS

The Page

Repeater: #repeater1​​

Button Elements

  • Bike Button: #BikeButton

  • Board Button: #BoardButton

  • All Button: #AllButton

The Database

Create a database: Products (dataset1)

Recommended fields:

  • Product Name Field: product

  • Product Description Field: description

  • Price Field: price

  • Product Type Field: producttype (for filtering)

Then link fields to your repeater.

THE CODE

Page Code

import wixData from 'wix-data';

export function BikeButton_click(event, $w) {

    console.log("filtering bike");

    $w("#dataset1").setFilter(wixData.filter().contains('producttype','Bike'));

    $w("#BikeButton").style.backgroundColor = "Green";

    $w("#BoardButton").style.backgroundColor = "Grey";  

    $w("#all").style.backgroundColor = "Grey";

}

export function BoardButton_click(event, $w) {

    console.log("filtering board");

    $w("#dataset1").setFilter(wixData.filter().contains('producttype','Board'));

    $w("#BikeButton").style.backgroundColor = "Grey";

    $w("#BoardButton").style.backgroundColor = "Green";  

    $w("#AllButton").style.backgroundColor = "Grey";

}

export function AllButton_click(event, $w) {

    console.log("reset filters");

    $w("#dataset1").setFilter(wixData.filter().contains('producttype',''));

    $w("#BikeButton").style.backgroundColor = "Grey";

    $w("#BoardButton").style.backgroundColor = "Grey";  

    $w("#AllButton").style.backgroundColor = "Green";

}

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

No comments. Be the first to leave a comment.

Thank you for this tutorial! Can you explain how to do this if the field is a Reference field?

William

Oct 26, 2019

0

Hi William,

Thanks for leaving a comment!

Is your reference field setup in the dataset you are trying to filter? If so, the same code applies, you should be able to filter your dataset by the reference field. Do let us know if you have successfullly implemented this. Thank you!

Andrew (Vorbly)

Nov 02, 2019

0

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP