Table of Contents

  1. Overview
  2. What you need
  3. Code
  4. YouTube Tutorial Video

Overview

This tutorial shows an example on how to filter your repeater using WIX selection tags. Easily display selection tags that lets visitors select categories displayed on your repeater.

Selection Tags are useful especially when building store websites, real estate websites, hotel websites, and many more; Utilizing the power of selection tags, visitors can sort between what category of items (Shoes, T-shirts, Pants, etc.), type of building to rent or buy (Condominium, Town home, etc.), and the number of rooms to rent in the case of a hotel.

In this tutorial we created a database that displays shoes for men, women, and kids. We created these categories in our database and added a button to display their labels on respective shoe. The button shoes which category (Men, women, or kids) a shoe is assigned to. This connection was made possible using the WIX dataset (A glue that connects our database field to elements on the wix editor).


What you need

Step 1: Add Selection Tags to your Editor

Add Selection Tags to your Editor
Manage Choices and then add fields, change their label and value to what best suites you. (The value should be used in your database)

Step 2: Add a button to repeater

Add a button to repeater
Style the button to your taste and place it at your desired position withing the repeater

Step 3: Create a new field on your database where you will add your tag values and set the Field Type to ‘Tags’

Create a new field on your database where you will add your tag values and set the Field Type to 'Tags'
Change the Field Type to ‘Tags’

Step 4: Add code to your ‘Page Code’

Step 5: Replace IDs and Field Keys on the Code (instruction’s in the code. Watch video for more)

Preview your website and test it out


Code

Copy and paste code into your page code section.

import wixData from 'wix-data';

const collectionName = 'MyStore'; //Replace 'MyStore' with your store name
const fieldToFilterByInCollection = 'tag'; //Replace 'tag' with the field key of the field on your database you saved your tags
 
$w.onReady(function () {
 
    setRepeatedItemsInRepeater();
    loadDataToRepeater();
 
    $w('#tags').onChange((event) => { //Replace '#tags' with the ID of your Selection Tags
        const selectedTags = $w('#tags').value;
        loadDataToRepeater(selectedTags);
    })
});
 
function loadDataToRepeater(selectedCategories = []) {
 
    let dataQuery = wixData.query(collectionName);
 
    if (selectedCategories.length > 0) {
        dataQuery = dataQuery.hasAll(fieldToFilterByInCollection, selectedCategories);
    }
 
    dataQuery
        .find()
        .then(results => {
            const itemsReadyForRepeater = results.items;
            $w('#repeater1').data = itemsReadyForRepeater; //Replace '#repeater1 with the ID of your repeater
            const isRepeaterEmpty = itemsReadyForRepeater.length === 0
 
            if (isRepeaterEmpty) {
                $w('#noResultsFound').show(); //Add a text element and change the ID to '#noResultsFound'
            } else {
                $w('#noResultsFound').hide();
            }
        })
}
 
function setRepeatedItemsInRepeater() {
 
    $w('#repeater1').onItemReady(($item, itemData) => {
        $item('#text6').text =itemData.title;
        $item('#text6').src = itemData.image;
        $item('#image1').tooltip = itemData.title;
        $item('#text2').text = '$' + itemData.productPrice;
        $item('#button2').text =itemData.tags;
 
    })
}
 


YouTube Tutorial Video

Please Subscribe to our channel for more video tutorials

Leave a Reply

Your email address will not be published. Required fields are marked *