How to change the Grid Gallery filter settings programmatically

Ask the community
,
5

@fabiomolinar You can only do that by storing an array of the products and their collections, filter them based on user selection and then assign the items to the gallery.

const collection = $w('#collection').value; // User's selected collection

// Products
const products = [
    {name: 'TV', col: 'Electronics', img: 'https://...', link: 'https://...' },
    {name: 'Silver', col: 'Earings', img: 'wix:image//..', link: 'https://...' }
]

// Filter based on user slection
const filtered = products.filter(items => items.col === collection);

const finalProducts = []; // An array to store the gallery products

// Prepare the products as gallery items
filtered.forEach(product => {
    finalProducts.push({
        type: 'image',
        src: product.img,
        link: product.link,
        title: product.name
    })
})

// Assign the final items to the gallery items
$w('#gallery').items = finalProducts;

Hope this helps~!
Ahmad