How to change the Grid Gallery filter settings programmatically

Ask the community
,
1

Is it possible to change the Grid Gallery widget filters programmatically?

Bear in mind, the “Grid Gallery” is a standard Wix widget and dedicated gallery-type widget.

This is not the standard gallery. That means I can’t do something like the snippet below:

$w("#gridGallery").items = filteredProducts;

And that’s because this widget doesn’t have a strong API nor expose this type of properties.

2

Hi Fábio,

By " Filters " you mean the color filters? Or what items to display?

3

@ahmadnasriya welcone back :wink:

4

Hello Ahmad,
The Grid Gallery widget filter options are based on the products’ collections. See a live example here: https://www.bboptic.com/okulary-korekcyjne
So, I want to filter based on the product’s collection.

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

6

@russian-dima Thank you :wink:

7

Hello Ahmad,

Like I said, the Grid Gallery widget is not a standard gallery. It doesn’t have the “items” property . So, I can’t do something like:

$w ( ‘#gallery’ ). items = finalProducts ;

The Grid Gallery widget doesn’t have a strong API nor exposes such type of properties.

8

@fabiomolinar Oh! Do you mean a Wix Product Gallery? If that’s the case you can’t do anything about it :cry: Unfortunately.