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.

Hi guys, did you ever find a fix for this? Been trying for days to replicate something similar but i have had no luck!

@Ollie_King Nothing on my end yet anyway…

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

3 Likes

@samliew

It works! Magic - thank you very very much.

I’ll post a final solution here in the coming days.

@Diarmuid_Sexton Glad to see you found a solution, any chance you could post the results :)?

This is it in action

https://ecommerce-ds-addons.webflow.io/product/bag-addons-as-variants

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.

And this is the read-only link

https://preview.webflow.com/preview/ecommerce-ds-addons?utm_medium=preview_link&utm_source=designer&utm_content=ecommerce-ds-addons&preview=1f0fa65336cd633351574f5f1faa2853&pageId=5e4e825058d02b275309f3bf&itemId=5e4e825058d02b3b6f09f44e&mode=preview

And this is the link to clone the page

It doesn’t update the price… Or, it doesn’t actually do anything except changing the text in the dropdown menu.

I also got stuck here :confused:

Let me know if you manage to make it work. I’d love to implement the solution on one of my projects :slight_smile:

@samliew

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.

Any idea how to get it going?

Thanks in advance for any time you can give this.