In the example above, I am using Jquery to trigger the checkboxes to change the variant dropdown values for “CLIPS ADD ON” and “LIGHTS ADD ON” (these dropdowns are visible now for debugging but will not be when the site is live)
The checkboxes are working to change the values but they do not update the “Price” of the item nor do they register when added to the cart. I have used .trigger(‘change’) and .click() when changing the values in Jquery but neither seems to work.
Is there a way to get it working - to simulate a click using jquery? Or how can the cart / price update be triggered?
Sadly this seems to be impossible to solve with jquery… because I believe it is the cart cookie that is generated server side that holds this information.
Just like you can’t create a button that empties the whole cart with jquery (tried it and failed )… Or you can’t preselect a country in the checkout (The UI will tell you your JS / Jquery is working but the actual thing is not updating accordingly.).
All those seem to be linked to a cookie which holds the information and is updated when user navigates and shops.
I’ve managed to remove items from the cart without opening it with Jquery - and this will remove all the items from the cart using a button with an id of “empty-cart”
[UPDATE] Your script is working great > And I just noticed testing it that Webflow corrected a former bug where there were “ghost products” when you deleted products or restored backups (which was the use case for an “empty cart” button)
I was trying to clear the cookie with JS, your approach actually clicking each element is a nice workaround ! Maybe I’ll have some ideas on how to use that for other purposes and will share if it can help
You cannot use jQuery’s .click() or .trigger('change') as Webflow added an event validation step before allowing the actual update. jQuery’s click does not fire a real click event so you have to do this slightly differently.
Put in site header code:
<script>
function updateAll() {
s=document.getElementsByTagName('select');for(let i=0;i<s.length;i++){setTimeout(el=>{const e=document.createEvent('HTMLEvents');e.initEvent('change',false,true);el.dispatchEvent(e);},i*10,s[i])};
}
</script>
Use this immediately after the changing any select (dropdown) element’s value:
updateAll();
Wow!
I rarely read pings and notifications, so if you need more help, you can always contact me via my website webflowexpert.com
It’s not completely setup - but with a small bit of tweaking you can get it working to set the default once the page loads and remove the add-ons when clicked the second time. When I’ve more time, I’ll set it up - but won’t be for a few weeks at the earliest.
Sorry to bother you again but this solution isn’t working - it’s strange - it works on a very seldom occasion but not every time. I can see the checkbox changing the value - but then when the updateAll() function runs - it seems to revert it back to the “Select an option” option.