Add to cart does not work with JS disabled

[bakura10]

Hi,

As of today Dawn output a select: https://github.com/Shopify/dawn/blob/main/sections/main-product.liquid#L235

However another one is set in the product form: https://github.com/Shopify/dawn/blob/main/sections/main-product.liquid#L260

Because you cannot have two input with the same name, in this situation the last one (depending on the block order) will take the control, and as add to cart is typically after selectors, only the add to cart one will win.

Dawn add to cart form with non JS is therefore currently stuck to the first available variant.

I think Dawn should make sure that the name="id" only exists once within the form and be synchronized in JS.

[tomatic]

The problem seems to be that the select that's rendered in <noscript> isn't contained within the form, therefore the product with the id that's set in a hidden form field within the form is used. If JS is active, changing the variant changes the value in that hidden field, but without JS the id always stays the same.

[colinloretz]

+1 We are using our own theme built on Dawn and ran into this with a live customer. Going to go ahead and update our version to fix this but definitely a fix should be considered.