Show object conditioned upon query result/filter query results on current Item

Ask the community
, ,
1

Hi, I designed a Dynamic custom product page with a product variants selector and add to cart function. I have a dropdown #sizeSelector linked to product size variants, which I need to show (its hidden on load) only if the current item has the specific “Size” product option. T-shirts have size options for example, and a bag doesn’t. I can’t have the dropbox showing in the bag product page.

I followed this wix tutorial https://support.wix.com/en/article/velo-wix-stores-products-collection-fields#product-options-productoptions , and it works perfectly quering all products, which means right now the dropdown always shows. But I can´t solve how to only get the current item results so that it shows accordingly.

This is my code, what I am doing wrong?

$w.onReady(() => {
    $w("#dynamicDataset").onReady(() => {
 //gets current item
 let itemObj = $w("#dynamicDataset").getCurrentItem();
 //gets Id of current item
 let productId = itemObj._id;

//show dropdown only if has size product option
wixData.query("Stores/Products")
   .hasSome('productOptions.Size.value',['#S', '#M'])
   .find()
   .then(() => {
                    $w('#sizeSelector').show(); 
                })            
    .catch((error) => {
      console.log(error);
    });
});
});
2

Hello, it looks like in your query you are missing searching for just the product id. You will want to use .eq() to pull only that id if I am understanding you correctly.

Take a look at the API options in wix-data and I think you will find what you need here

3

Sorry, I´m not the best explaning as english is not my first language! I’ll try to clarify: I need the code to check if the current item of the dynamic page has the product option “Size” (the product option name). If it does, then show the dropdown. If it doesn’t it should remain hidden. The code I just showed you querys all products, not just the current Item. Which is why I think that it’s always showing the dropdown.

4

That’s okay, let me see if I can explain what I think you need a little more clearly so you can try.

In your code you are getting the product ID for the current item

In your query, you are querying the collection, but not passing in that product ID so it is returning all products. So you should use eq to select only the product that matches the ID in question
API docs for eq()

This code may not work exactly, I haven’t tested it but basically you need to query the collection by the ID and size options.

Then if you get results, show the dropdown else do nothing

wixData.query("Stores/Products")
.eq("_id", "productId")
.hasSome('productOptions.Size.value',['#S','#M'])
.then((results)=>{
if(results.items.length > 0){
$w('#sizeSelector').show();
}
5

Thank you very much Amanda! I´ve tried a few workarounds for days but still, or it shows with every product, or it never shows. It should be so simple but yet I can´t make it work.

This is the complete code. It never shows (it´s hidden on load)

$w . onReady (() => {
$w ( “#dynamicDataset” ). onReady (() => {
//gets current item
let itemObj = $w ( “#dynamicDataset” ). getCurrentItem ();
//gets Id of current item
let productId = itemObj . _id ;

wixData . query ( “Stores/Products” )
. eq ( “_id” , productId )
. hasSome ( ‘productOptions.Size.value’ ,[ ‘#S’ , ‘#M’ ])
. find ()

. then (( results ) => {
if ( results . items . length > 0 ) {
$w ( ‘#sizeSelector’ ). show ();
}
else {
$w ( “#sizeSelector” ). hide ();
}
})

. **catch** (( error ) => { 
  console . log ( error ); 
});

});
});

6

@eugeniagarat I will have to set something up and test this myself to see if I can offer you any better guidance. It may take a little time to get back to you so in the meantime if you do figure anything out please let me know!

If you are comfortable with sharing the url, please also share your site link. it may be easier to see looking there as well

7

@amandam yeeeeees can´t thank you enough! Of course I will!

Here is the URL, It’s a test site where I’m trying to code the product page functions so no design, just code and just the store and product page. Here it is!

https://totolon.wixsite.com/my-site-4/

8

@eugeniagarat Thank you. So this may take a little bit, but I want to show you how to debug in the FE which will help you nail down problems and also note some issues I see with the code that you will want to clean up as you go…

I’m also not seeing the code referenced above. I am looking at this url currently: https://totolon.wixsite.com/my-site-4/products/3-talles-en-stock

Can you point me to a page where that code is live?

How to debug in Chrome for FE code
Open your console and you will see a line like this telling you what file your code lives in

2712×986 526 KB

Finding that file can be a little tricky, but next you will go to the sources tab and look for the file here:

1358×1006 209 KB

Now that you can see your JS, you can do some debugging on the frontend with breakpoints and code testing without having to go to the editor.

finally, in the page I am on right now one thing to note is that you should only ever have ONE $w.onReady(() => {. This is your PAGE onReady function and should not be duplicated as it could lead to unusual behavior. I believe there are 3 or 4 onReady calls on this URL that I noticed.

1962×844 202 KB

9

@amandam Thank you Amanda! I came to see if you replied every day since I last replied you and didn’t realize your answer was hidden, I didn’t see the load more button till just now. Sorry about that! I´ll check all that right now.
The code should be live in the url you were looking at cause that’s the dynamic product page. Is there anything I can do for you to see it?
I’ve been trying for this code/filter to work since then but still couldn’t. Did you get the chance to find out anything else?

Thanks again,
Euge

10

@eugeniagarat Hello again. No problem and sorry the load more got you. I just looked at your page code again and the first issue you need to address is still there.

You have multiple page onReady calls in your product page. You will want to clean this up first. There should only be one per page.

Here is a long post Yisrael wrote about the page $w.onReady if you want to learn more OnReady Guide

That is likely one issue causing odd behavior, then when you are debugging as I showed above you can put breakpoints in your code so that you can see what is returning from the query which should help discover what is going on with your elements

In this ss below, the size selector came back hidden but i had to refresh the page multiple times to get the code to fire which could be due to the onready issue

1038×700 79.9 KB

11

Copy that! I´ll read Yisrael code and correct the onReady calls and see what happens. I´ll let you know! thanks!