Wized Multiple Filters

[littlegeniustoyspvtl]

Hey, I am facing an issue making an e-commerce site in wized and Supabase. I have a card which is used in the homepage for rendering best-seller products and trending products. Also I have some category pages to load products by filtering categories’ slug.
Now, let me give you my DB structure. I currently have 4 tables -
1.**categories- id, name, slug; products- name, code,
2. category_id (foreign key with categories);
3. product_labels- id, product_id (fks) and label_id(fks with labels table);
4. labels- id, name, slug
**
Now I have a request from the categories table and filter it down by categories slug = n.path( the current page slug), from this request, I am populating the product name, price, etc with the help of a foreign relation. That’s working fine, but now I want to get all products that have the labels- slug( best-seller) . Can I do this from the same request, or I have to add a separate request for product_labels and change the wized attribute in the cards.

Wized read-only link- Wized

[c793035]

What a coincidence, same problem I’m facing currently and can’t figure it out what’s the right approach.

[elvisben]

Hi @littlegeniustoyspvtl

Welcom to the Wized forum! Thank you for sharing your project details.

I’ve taken a look at the wized preview link - there can be two ways of doing it:

1. By use of a Matches Pattern filter where if there isn’t a value you need to filter the patterns changes to allow all values otherwise it uses the pattern pre-defined as below:
   

   
   
   
   

2. Use of a request to get all the data without the filter

[littlegeniustoyspvtl]

No, you are not getting what I meant.

I have a GET request called get_all_products, which returns all the products from the database.

I’m using this data in two different filters:

1. Filter by category slug
   I store the result in v.filtered_products_by_category, which runs this logic:
   r.get_all_products.data.filter(product => product.category.slug === v.slug)
   (v.slug comes from n.path of the current page.)

2. Filter by label (best-seller)
   I also have another filter:
   r.get_all_products.data.filter(product => product.labels && product.labels.slug === “best-seller”)

My problem is this:
When I try to display product fields like name, code, and image, I use:
v.filtered_products_by_category[v.index].name

But this only works when I’m using the category filter.
It does NOT work when I’m using the best-seller or “featured” filter, because that filter isn’t stored in v.filtered_products_by_category.

So what I’m trying to figure out is:
How can I populate the name, code, and image in a way that works for BOTH the category filter and the best-seller filter?

I know this is a very common thing, but somehow I can’t figure it out

[elvisben]

Sorry I misunderstood - just rechecked the project though I do not see where the v.filtered_products_by_category is located - could you guide me to where it is?

[littlegeniustoyspvtl]

Hey, Elvisben, I actually changed this. I just want to know what the standard procedure is to get items throughout the site? Currently I am using a card component with the same wized attribute. Suppose I want those product items whose slug is equal to cthe urrent path, for that I am using a get_category_products request with the filter slug = v.slug . In the repeater, I add v.products_data, and inside these variables, I have
return r.get_all_products.data || r.get_category_products.data[0].product;
And in the event I set a condition in page loading - return n.path.startsWith(“/categories”);
and for the get_all_products I see a condition n.path= “/”. So, by doing this, I can use different filters. Is this the right way and industry standard?

[elvisben]

Yes you can use the same component to render it.

What needs to be consistent is that you load the data and use the same variable from the filter in setting content for the products.

Eg if you save the filter in a variable say v.myFilteredVariable you cannot try setting text using data from the request eg r.myRequestName.data[v.index].name you need to use the variable having the filtered data ie v.myFilteredVariable[v.index].name

[littlegeniustoyspvtl]

Ok, thanks for clearing it. Now, in the home page, I have 2 sections, one is for best-seller and 2nd is for all featured products. Then how can I do this by setting an event by restricting it to the specific page, which is “/”. I am already using this for getting all best-seller products, now how can I get the featured product by using “/”?

[c793035]

Maybe for separate section you need all different wized attribute. But it’s still a headache.

[elvisben]

For clarity I think you’ll need two wized variables storing the data that has been filtered for each of the two sections.

Then on the variable you want the condition it would be a simple if else statement on the initial value like so:

if(n.path === '/'){
  return r.get_data.data.filter .....
}else{
  return null;
}

Then use both variables to have two separate render list actions for each section.

[c793035]

So, if my site has 3 to 4 different sections in the Home page like amazon or nike or any other ecommerce sites, I have to use different wized attributes for the item wrapper, then name, price, image? Will it be scalable as wized only gives 100 elements in the small plan.

See with the same wized attribute of a card item i can use different filter through different request like get_category( run if the page is “/categories”, get_best_seller( run if the page is “/”. Even in the add to cart page i can showcase those with the same attribute. I only need more wized elements ( wized attribute) if I want to render different filter, different request on the same page ( like in the add to cart page if I want to showcase “Your save latter products” along with the cart products. And I have to upgrade my plan for that. Just tell me if this is the industry standard way to work. Thank you​:grinning_face:

[elvisben]

Yes - for the different sections you’ll need separate Wized elements for this as well as variables to store the filtered data if you filter the data to render