I created a store page and showing products but I want to create a filter with dropdowns. I am showing all categories with a checkbox but can’t filter.
I’m using Wix Studio
import wixData from ‘wix-data’;
$w.onReady(function () {
populateFormattedPrice();
populateCategoriesDropdown()
populateProductsRepeater();
$w(“#dropdown1”).onChange(handleCategoryFilterChange)
});
async function populateFormattedPrice() {
$w(“#dynamicDataset”).onReady(() => {
$w(‘#repeater1’).onItemReady(($item, itemData, index) => {
const numberWithCommas = (x) => {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, “.”);
}
$item(‘#text38’).text = “₺” + numberWithCommas(parseInt($item(‘#text38’).text, 10));
});
});
}
async function populateProductsRepeater() {
const productQueryResult = await wixData
.query(“Stores/Products”)
.limit(100)
.find();
const products = productQueryResult.items;
console.log(“products”, products);
$w(“#repeater1”).data = products
}
async function handleCategoryFilterChange() {
const collectionId = $w(‘#dropdown1’).value;
const productsQueryResult = await wixData
.query(“Stores/Products”)
.hasSome(“collections”, collectionId)
.limit(100)
.find();
const products = productsQueryResult.items;
console.log(“filtered products”, products);
$w(“#repeater1”).data = products;
}
async function populateCategoriesDropdown() {
const collectionsQueryResult = await wixData.query(“Stores/Collections”).find()
const collections = collectionsQueryResult.items;
console.log(“collections”, collections)
$w(“#dropdown1”).options=collections.map((collection) =>({
label : collection.name,
value : collection.id,
}))
}
