HELP!!! Adding filters from database

Ask the community
, ,
1

Hi,
I have searched hi and low all over the wix forums for some sort of solution, but I can’t seem to get things to work out. I’m not sure what I’m doing wrong here.

I am going to be selling tires, wheels and various other products so the excel data i have is large and it would be nice if people can filter what they are looking for.

Similar to this site https://www.1010tires.com/Wheels/AR+ATX I want a checkbox style filter (that can be expanded and collapsed) like the one attached.

I enabled Corvid, created a new page called “Wheels”. I imported my excel template data into the database called “wheels”, added a repeater from the “lists and grid” templates. I connected all the data from my database. Everything shows when i preview my page.

However, when i add “add multi section” or a “dropdown” from the “Add – User Input” section, I cannot get it connected to my fields from my database.

I would like to add checkboxes so that customers can narrow their search.

I am trying to add the following boxes: Brand, Style, Diameter, Width, Offset, Finish, ect.

PLEASE HELP!!!

Can someone please help me out with this. Perhaps provide me with examples that i can edit, or some type of step by step instructions, rather than links.
Your help is greatly appreciated!!!

349×707 22.1 KB

******* This is an example from the above website. Checkbox style filter that can be expanded and collapsed.***
I would like to create this on the left side of my web page.

******* This is from my database. These are the columns that i would like to filter.***

865×527 8.92 KB

From all of my research I was able to ALMOST get it from the help of the tutorial from @codequeen
I was able to get a dropdown, and the list did show on my preview page, however I could not select items from the list to generate my filter and also, the 2nd dropdown was not listing items at all.
**This was for a test to see if i could get it to work. I don’t really want a dropdown, i want a checkbox style filter list.

This is the code that I used.

export function BrandDropdown1_change(event) {
//Add your code for this event here:
}
export function StyleDropdown1_change(event) {
//Add your code for this event here:
}
import wixData from ‘wix-data’;
$w.onReady( function () {
uniqueDropDown1();
});
function uniqueDropDown1 (){
wixData.query(“wheels”)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(" #BrandDropdown1 “).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.brand);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function BrandDropdownd1_change(event, $w) {
uniqueDropDown2();
$w(” #StyleDropdown1 “).enable();
}
function uniqueDropDown2 (){
wixData.query(“wheels”)
.contains(“Brand”, $w(” #BrandDropdown1 “).value)
.limit(1000)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w(” #StyleDropdown1 “).options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.style);
return [… new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
$w.onReady( function () {
});
export function wheelBrandDropDown_change(event, $w) {
$w(” #StyleDropdown1 “).enable();
locationCityFilter();
}
function locationCityFilter (){
$w(” #wheel “).setFilter( wixData.filter()
.eq(“fieldkey”, $w(” #dropdown ").value)
);
}
***When i select the brand, it does not display. it still displays the entire inventory.

693×341 109 KB

Thank you for taking the time in reading this long post.

2

Your imports and onReady need to be at the top of the page, plus you can’t have more than the one onReady call in your code, yet you have added it twice.
https://www.wix.com/corvid/reference/$w.html#onReady

Also, this line in your code.

 .eq("fieldkey", $w("#dropdown").value)

Is ‘fieldkey’ the actual key of the field that you are wanting to use from your dataset, or should it be linked to your field in the dataset with name of ‘Brand’ and probably having a field key of ‘brand’.

Is ‘dropdown’ the actual id of the dropdown that you are using as it already looks like you have it listed previously in your code as ‘BrandDropdown1’.

You don’t need the two export function lines at the start of your code as they should be after the onReady call and you have one of them twice in your code too.

export function BrandDropdown1_change(event) {
//Add your code for this event here: 
}

export function StyleDropdown1_change(event) {
//Add your code for this event here:

Make sure that your code is correct with the id names.

export function BrandDropdownd1_change(event, $w) {

You can also change the dropdowns to checkboxes instead, although you will need to change your code to suit that too.
https://www.wix.com/corvid/reference/$w.Checkbox.html
https://www.wix.com/corvid/reference/$w.CheckboxGroup.html

I would have thought that your code would look something similar to this for example.

import wixData from 'wix-data';

$w.onReady(function () {

    wixData.query("menu")
      .limit(1000)
      .find()
      .then(results => {
           const uniqueItems = getUniqueItems(results.items);
           $w("#dropdown1").options = buildOptions(uniqueItems);
      });

  function getUniqueItems(items) {
        const itemsOnly = items.map(item => item.title);
     return [...new Set(itemsOnly)];
    }

    function buildOptions(uniqueList) {
        return uniqueList.map(curr => {
            return {label:curr, value:curr};
        });
    }
});

export function dropdown1_change(event, $w) {
    let sort = $w("#dropdown1").value;
    $w("#dataset1").setFilter(wixData.filter().eq("title", sort));
}
3

Plus, I do remember that you have asked the same question in a previous forum post and I put an example similar to that website design that you wanted with the checkboxes and slider, however you seem to have not used it for a base to start working off of.

920×450 148 KB

THE ELEMENTS

The Page
Product Repeater (#repeater1​)​
Product Image: #image1​​
Product Name: #text1
Product Description: #text2
Product Price: #text3
Buy Now Button: #button1​​​​​​
​​
Filter Elements
Size Slider Bar: #slider1
Checkbox (Heels): #checkbox1
Checkbox (Boots): #checkbox2​
Checkbox (Sneakers): #checkbox3
Submit Button: #submit
Container Box: #box1

The Database
Create a database: Products (dataset1)
​
Recommended fields:
Product Name Field: product
Product Description Field: description
Price Field: price
Product Type (Boolean): heels (for filtering)
Product Type (Boolean): boots (for filtering)
Product Type (Boolean): sneakers (for filtering)

THE CODE

Page Code

import wixData from 'wix-data';

function ProductFilter() {
        wixData.query("Products")
                .eq("heels", $w("#checkbox1").checked)
                .or(
                        wixData.query("Products")
                        .eq("boots", $w("#checkbox2").checked)
                )
                .or(
                        wixData.query("Products")
                        .eq("sneakers", $w("#checkbox3").checked)
                )
                // add or statements for the other checkboxes
                .find()
                .then((results) => {
                        console.log(results.items);
                        let Product = results.items;
                        $w('#repeater1').data = Product;
                })
                .catch((err) => {
                        let errorMsg = err;
                        console.log(errorMsg);
                });
}

$w.onReady(function () {
​
        ProductFilter();
​
        $w('#repeater1').onItemReady(($w, itemData) => {

                // Add here all the relevant elements of the repeater
                $w('#text1').text = itemData.name;
                $w('#text2').text = itemData.description;
                $w('#text3').text = String(itemData.price);
                $w('#image1').src = itemData.image;
        });
});

export function checkbox1_change(event) {
        ProductFilter();
}

export function checkbox2_change(event) {
        ProductFilter();
}

export function checkbox3_change(event) {
        ProductFilter();
}