Combining dynamic checkboxes

Ask the community
,
1

Hello Wix World,

The Velo provided examples have been much help so far - but I’m struggling to combine two filters based on the Velo Example : https://www.wix.com/velo/example/checkbox-dropdown

I have created a second set of dynamic created check box options, can get them to work independently but failing to combine two sets of options to result in one filter. Results should show all that matched items in the repeater that have one of the checked boxes (and…and) from both checkbox repeaters (and also the slider) - I have managed to have them work individually, but not combined. Some input would be highly appreciated.

Live test site:
https://pureston.wixsite.com/website-2/davits

610×649 40.5 KB


import wixData from "wix-data";

let lastFilterManufacturers = [];
let lastFilterMadein = [];

$w.onReady(() => {
 // handle each suggestion repeater item
    $w("#manufacturers").onItemReady(($item, itemData, index) => {
        $item('#optionCheckbox').onChange(() => {
            filterByCheckboxes()
        })
        $item("#optionText").text = itemData.value;
    });
    loadManufacturers();

    $w("#madein").onItemReady(($item, itemData, index) => { //same function??
        $item('#optionCheckbox2').onChange(() => {
            filterByCheckboxes2()
        })
        $item("#optionText2").text = itemData.value;
    });
    loadMadein();

$w("#repeater").onItemReady( ($w, itemData, index) => {
    console.log(itemData._forsale);    // show value of forSale field in developers console
 if(itemData._forsale === "yes") {
        $w("#button1").show();
        $w("#button8").show();
    }
 else {     // forSale field is "no"
        $w("#button1").hide();
        $w("#button8").hide();
    }
});

});

function loadManufacturers() {
    wixData.query('Manufacturers')
        .find()
        .then(results => {
            $w("#manufacturers").data = [];
 // Create and map an array for the dropdown menu options
 let manufacturerDropdownOptions = [];
            manufacturerDropdownOptions.push(...results.items.map(_manufacturer => {
 return { "_id": _manufacturer._id, "value": _manufacturer.title, "label": _manufacturer.title };
 
            }));
            $w('#manufacturers').data = manufacturerDropdownOptions;
        });
}

function loadMadein() {
    wixData.query('Madein')
        .find()
        .then(results => {
            $w("#madein").data = [];
 // Create and map an array for the dropdown menu options
 let madeinDropdownOptions = [];
            madeinDropdownOptions.push(...results.items.map(_madein => {
 return { "_id": _madein._id, "value": _madein.title, "label": _madein.title };
 
            }));
            $w('#madein').data = madeinDropdownOptions;
        });
}

// Filtering per options checked
function filterByCheckboxes() {
 let manufacturers = [];
    $w("#manufacturers").forEachItem(($item, itemData, index) => {
 if ($item('#optionCheckbox').checked) {
            manufacturers.push($item("#optionText").text);
        }
    });
    filter(manufacturers);
    $w('#numManufacturersText').text = `Makers${((manufacturers.length > 1) ? " " : " ")}(${manufacturers.length})`;
}

// Filtering per options checked
function filterByCheckboxes2() {
 let madein = [];
    $w("#madein").forEachItem(($item, itemData, index) => {
 if ($item('#optionCheckbox2').checked) {
            madein.push($item("#optionText").text);
        }
    });
    filter(madein);
    $w('#numMadeinText').text = `Made in${((madein.length > 1) ? " " : " ")}(${madein.length})`;
}

function filter(manufacturers) {
 let newManufacturersFilterCheck = compareArrays(manufacturers, lastFilterManufacturers);
 if (!newManufacturersFilterCheck) {
 let newFilter = wixData.filter();
        newFilter = newFilter.hasSome('_manufacturer', manufacturers);
        $w('#dataset1').setFilter(newFilter).then(function () {
 let count = $w("#dataset1").getTotalCount();
        });
        lastFilterManufacturers = manufacturers;
    }
}

// Code to compare string arrays
// Used to compare the current and previous _manufacturer selections
function compareArrays(newFilterArray, lastFilterArray) {
 if (newFilterArray.length !== lastFilterArray.length) { return false } //Checking if the number of items in the filter arrays match
 //Sort both arrays for easy comparison and checking if the items match
 let sortedNewFilterArray = newFilterArray.concat().sort()
 let sortedLastFilterArray = lastFilterArray.concat().sort()
 for (let index in sortedNewFilterArray) {
 if (sortedNewFilterArray[index] !== sortedLastFilterArray[index]) return false
    }
 return true
}

export function vectorImage1_click(event) { 
 if ($w('#manufacturers').collapsed === true) {
        $w("#manufacturers").expand();
    } else {
        $w("#manufacturers").collapse();
    }
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here: 
}

import wixLocation from 'wix-location';

export function reload_click(event) {
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here: 
 
 wixLocation.to(wixLocation.url);
 
}

export function optionCheckbox_click(event) {
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here: 
    $w('#reload').show();

}

export function optionCheckbox2_click(event) {
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here: 
    $w('#reload').show();

}

export function numManufacturersText_click(event) {
 
 if ($w('#manufacturers').collapsed === true) {
        $w("#manufacturers").expand();
    } else {
        $w("#manufacturers").collapse();
    }
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here: 
}