Why does Ajax only add the first variant to the cart from the homepage?

Store Design
1

Hi,

I have been trying to add a subscription item to the cart with Ajax from the homepage. I have got it working for the 1st Variant. However the product has two variants but it is always coming through with the 1st variant and i can’t work out how to get it to take the selected variant rather than the initial variant that’s loaded.

Any help would be massively apprecaited

Thanks

Site is - https://my-mini-maker.myshopify.com/

Code is -

<button type=“submit” name=“add” id=“addToCart-{{ section.id }}” onClick=“addItemToCart({{ variant.id }}, 1, {{product.selling_plan_groups[0].selling_plans[0].id}})” class=“btn btn–add-to-cart{% if section.settings.enable_payment_button %} btn–secondary-accent{% endif %}”{% unless variant.available %} disabled=“disabled”{% endunless %}>



{% if variant.available %}
{{ ‘products.product.add_to_cart’ | t }}
{% else %}
{{ ‘products.product.sold_out’ | t }}
{% endif %}

2

Hello @MyMiniMaker ,

Your code right a little issue is you are unable to get the variant correct ID.
Once check the {{ variant.id }} in source code when you change the variant selection. You will find there is no change mean if there is no change here how your onClick function will receive correct ID.
I suggest first fix this ( on change of variant selection update vaiant.id in source code ) after that your existing code will start working automatically with correct ID.

Thanks

3

Thansk Guleria , I don’t suppose you have an example that i could use?

“on change of variant selection update vaiant.id in source code”