Showing and hiding dropdowns on product page, based on selected values
Hello.
I would like my product page to show different subsequent dropdowns based on individual dropdown values.
I've managed to achieve this via JavaScript, but I do not like how it works.
As far as I can tell, there is no proper identifier for each individual dropdown to determine which one it is, so all I can do at the moment is to rely on their order in the DOM, which is bad and makes it difficult for me to create a solution that would work for all products.
For instance, if the following is a single attribute:
<div class="catProductAttributeGroup" style="display: none;"><div class="catProdAttributeTitle">Metallic Foiling</div><div class="catProdAttributeItem"><select><option value="">-- Please select --</option><option value="6051720">Not required </option><option value="6051721">Foil ONE side + £45</option><option value="6051722">Foiling BOTH sides + £75</option></select></div></div>
I would like the outer-most div to have some sort of html attribute that holds the product attribute id. Something like, data-attribute-id="XXXXXXX". Is that possible?
Here's what I have up to this point:
I use {tag_attributes_json}, {tag_product_json} and {tag_currency} to get these values into javascript on page load, so I can use them later.
Then, I hook to change events of the drodpowns I have and then toggle their visibility based on which ones are selected. I rely on the jequery ':eq(n)' selector to achieve this, which I do not like. Is there an option for the {tag_attributes} helper which would make it add some extra information (such as attribute ID on the dropdown) on the generated HTML?
All of this works initially, but If I then 'Add to cart', the product element get's ajax-reloaded and the events are suddenly unhooked, so it doesn't work anymore. For that one, there are two options:
1. I could hook to an event that triggers once the product has been added to cart and the page is ready again. Is there such an event?
2. I could implement my own add to cart using bcInternals.shop.addToCart. I tried doing this, but I have two problems with it.
a. addToCart seems to add my selection twice, for some reason. Any ideas what I might be doing wrong?
b. the cart info in the top right corner doesn't refresh. it seems it tries to refresh, but there's some sort of access error in the script. This part is not yet fully added to the page, but there's a function that would do the adding to cart at the bottom of the bigger script block. Am I using the built in addToCart function incorrectly?
This is the page I have the partially implemented functionality added on:
The scripts are currently embedded inside the HTML. Once I have it properly implemented, I'd like to extract it into a separate file. Search for "$productAttributesElement" to find the block with the functionality and for "productInfo" to find the part where I store the product data with the _json tags.
