How to hide/show an element added to the Product page?

Ask the community
, ,
1

I have been developing a workaround for the built-in Wix Stores to enable some specific items in our store to be added to a “Quote Cart”, rather than directly purchased as other things are. As part of this, I added a button to the Product page that needs to be hidden or collapsed when an item is not for quote. The only issue I have yet to solve, is that enable/disable, hide/show, collapse/expand commands don’t work. Is this a problem with Dynamic pages or for Wix Stores specifically?

For clarity, none of the following commands do anything (to elements added to the Product page-they work perfectly on other pages):
$w( “#myButton” ).enable
$w( " #myButton " ).disable
$w( " #myButton " ).hide
$w( " #myButton " ).show
$w( " #myButton " ).collapse
$w( " #myButton " ).expand
However, I can change other properties, such as the text displayed on the button:
$w( "# myButton " ).label = “New Text!”

It is rather frustrating that something so simple is not working for me. Any and all ideas/knowledge/wisdom/insights would be appreciated!

Thanks for your time in reading this :slight_smile:

2

Hi,

It’s not recommended to place buttons to the Wix stores product page since it changes dynamically. This may cause issues with your layout on different browsers and may be difficult to correlate the products that are “not for quote” to the buttons you’re trying to hide.

I’d suggest building out your own custom product page and then try to input your code to hide your button based on the product being viewed on the product page using the getProduct() function.

Also, I noticed in your code each method is missing the parenthesis to invoke the event. It should look like this:

 $w("#myButton").hide();

You also might want to check if the element ID is matching the correct component.

I tried testing out a few of the methods you mentioned on buttons placed on the product page just to test it out, and I was able to get it to work on my end.

You can see my code here with a console log to make sure it’s working:

1237×681 103 KB

Here it is working in preview:

1418×712 103 KB

Hope this information was helpful to you! If you’re still having trouble building this out, please provide a link to your site along with your full code and relevant component ID’s, so we can take a look.

Best regards,
Miguel

3

Hi Miguel, I was not aware parenthesis were required. As you can probably tell by that comment, I don’t really know what I’m doing and have just been figuring things out as I go! Literally all it took was to add (); and everything is now functioning correctly.

By the way, I take your point about why the way I am doing this is not ideal, but due to my inexperience and time constraints, I am concerned about trying to build everything from the ground up.

Thank you so much for your time and your help!