FROM CACHE - en_header

Add to Cart Ajax Best Practices

GBarone87
Shopify Partner
1 0 0

Hey Shopify Community,

 

I'm building custom "add to cart" buttons with AJAX and was wondering if using data attributes to pass variant IDs into a javascript function would be bad practice.

 

I need to change variant IDs on the fly, so when a user clicks on an option to choose between two products, they populate an add to cart button with the final choice.

 

This is what the option button would look like:

 

<button class="sb-cta giveaway-btn" data-variant-id="{{ product_variant.first_available_variant.id }}">Choose</button>

 

Then I would just use the ID passed into the attribute and use it in an ajax function.

 

Are there security issues tied to this? Or any reason why this wouldn't be a good idea. Also, if there is a better solution, it would be great to get some insight.

 

Thank you.

Reply 1 (1)
LitExtension
Shopify Partner
4660 951 976

Hi @GBarone87,

You can totally use this, it's simple and only way for you to add to cart at product item. 

And now when you go to product page it will still work with add id variant mechanism to add to cart.

So you can rest assured and use it.

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify