Filtering the Store/Products data by Collection

Ask the community
, ,
1

I am constructing a mobile page for a store using a repeater instead of using the standard layouts from the Store app, as my client wants two columns of products on-screen on a phone…and the standard app layout defaults to one column on mobile.

I pull the data from the collection in code, and can display it fine. I then want to be able to add a filter for Collections, as referenced in the multi-ref field in Products.

I’ve read everything I can find to figure out how to do this in code but cannot figure out how to code it…the direction in the API docs just confuses me more.

What I have today is the following:


let allProducts = await wixData.query("Stores/Products").include("collections").find().then((results)=>{return results.items})
    console.log(allProducts);

    $w('#repeater1').data = allProducts;
    $w('#repeater1').onItemReady(($item, data, index)=>{
        $item("#productImage").src = data.mainMedia;
        $item("#productTitle").text = data.name;
        $item('#productPrice').text = "£"+data.price.toString();
        if (data.discount.type!=="NONE"){
            $item('#sale').show();
           $item('#productPrice').text = "£"+data.discountedPrice.toString();
        }
    })

This sets the page up fine but how can I set up a filter from here, using the value from a dropdown menu?? I can grab the value fine, but what do I do with it to filter the data?

I really need some detailed coding guidance on how to re-filter allProducts by Collection…can anyone help??

Simon.

2

Figured this out for myself. :grinning:

I grab the ID from the Collections collection that matches the category that I am looking for (the one in my dropdown menu on the page):

let lookupIds = await wixData.query("Stores/Collections").contains("name",$w('#FilterDropDown').value).find().then((results)=>{return results.items});
let categoryId = lookupIds[0]._id;

Then I modified the query to pull only when that ID is in the Products collection:

let allProducts = await wixData.query("Stores/Products").eq("collections", categoryId).limit(100).find().then((results)=>{return results.items})

I’ll probably run that first query when the site first loads and store it locally, to avoid having to run two queries to load this page.

1 Like