How to make add to cart work without JavaScript

An add to cart that only works once scripts have run is unusable to any agent that stopped at your markup, and that is most of them most of the time. An agent takes the cheapest path to an answer, and rendering a full page is not the cheap path.

This is cart requires js.

The action has to exist in the page

The distinction is between a button that means something and a button that only means something to your script. A styled element with a click handler is invisible as an action: there is nothing in the markup saying what it does or where it would send anything.

A form with a method, an action and named inputs states the action. Anything reading the page can see that adding to the cart is possible, what it needs, and where it goes.

You keep the version you have

This is progressive enhancement, which means adding a floor rather than replacing a ceiling.

1. Wrap the add to cart control in a real form pointing at the endpoint your script already calls.
2. Include the variant identifier and quantity as named inputs, so the request is complete without client side state.
3. Let your existing script intercept the submit and do exactly what it does now.
4. Make sure the non scripted path ends somewhere coherent, a cart page rather than a blank response.

For a shopper with scripts enabled, nothing changes. For everything else, the action became expressible.

The variant half of the same problem

A form that posts a variant identifier is only useful if something can determine which variant to post. If your options are attached client side, you have made the action expressible and left it unaddressable.

Fix both together: see how to make variant pickers agent accessible.

Test it

Disable JavaScript, open a product page, choose a variant and add it to the cart. If you reach a cart containing the right item, an agent can too. If the button does nothing, you have found the failure and it is usually one template away from fixed.