Streaming live at 10am (PST)

Choose variant with checkbox (Jquery)

Hello,

I’m looking for some help from a Javascript ninja or maybe some Webflow staff…

I am trying to use checkboxes for selecting variants - see here - https://ecommerce-ds.webflow.io/product/bag-1a

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?


Here is the shareable link - https://preview.webflow.com/preview/ecommerce-ds?utm_medium=preview_link&utm_source=dashboard&utm_content=ecommerce-ds&preview=674831694e1c9750b0a76c6547a95235&mode=preview

The site is cloneable if anyone wants to play with it - https://webflow.com/website/ecommerce-ds-addons


Any ideas or help would be greatly appreciated @vincent @samliew @dram @webdev

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 :cry: )… 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.

1 Like

I don’t think it’s impossible.

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”

$('#empty-cart').click(function() {
	$('.w-commerce-commercecartitem a').each(function() {
    $(this).click(function() {
           this.click();
        }).click()
  });
})

Just struggling to do the same for the variant dropdown select…which is probably the same as preselecting a country in the checkout.

Any more thoughts would be great?

2 Likes

Interesting :slight_smile:
I’m going to try that !

[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 :slight_smile: and will share if it can help

I was wondering, have you tried this solution : Trick: setting default option for e-commerce variant

Maybe it holds the key to your issue.