Add to cart button only adding first variant to cart (Warehouse Theme)

[adammahon]

Hi all. I am attempting to setup the gift card product on the following website: floorzy.com - however when I select a gift card denomination, for example: £250.. it still only adds the first possible variant to the cart, which is in this case is £10.

I am using the Warehouse theme for this project.

My add to cart button code is below:

<button type="submit" class="product-form__add-button button button--primary" data-action="add-to-cart">{{ 'product.form.add_to_cart' | t }}</button>

You can view the full code here:
https://jsfiddle.net/pL92ehfy/

Any help appreciated. Thanks in advance.

[LitCommerce]

Hi @adammahon,

Please send me product link 'gift card', I will check it.

[adammahon]

Hi, thanks for this!

This is still a draft product, can you see using this link?
https://4dj2f8ax8b6zc0tz-60222701807.shopifypreview.com/products_preview?preview_key=cb6b3817ba73ce5...

[LitCommerce]

Hi @adammahon,

I checked and you have removed 'data-product-json' at product-info.liquid file, you just need to add it again, everything will work fine. Refer code:

<script type="application/json" data-product-json>
    {
      "product": {{ product | json }},
      "options_with_values": {{ product.options_with_values | json }},
      "selected_variant_id": {{ selected_variant.id }}
      {%- if section.settings.show_inventory_quantity -%}
        ,"inventories": {
          {%- for variant in product.variants -%}
            {%- if variant.available -%}
              {%- if variant.inventory_management and variant.inventory_policy == 'deny' and section.settings.low_inventory_threshold > 0 -%}
                {%- if variant.inventory_quantity <= section.settings.low_inventory_threshold -%}
                  {%- capture inventory_message -%}{{ 'product.form.low_stock_with_quantity_count' | t: count: variant.inventory_quantity }}{%- endcapture -%}
                {%- else -%}
                  {%- capture inventory_message -%}{{ 'product.form.in_stock_with_quantity_count' | t: count: variant.inventory_quantity }}{%- endcapture -%}
                {%- endif -%}
              {%- else -%}
                {%- if variant.inventory_policy == 'continue' and variant.inventory_quantity <= 0 and selected_variant.requires_shipping -%}
                  {%- capture inventory_message -%}{{ 'product.form.oversell_stock' | t }}{%- endcapture -%}
                {%- else %}
                  {%- capture inventory_message -%}{{ 'product.form.in_stock' | t }}{%- endcapture -%}
                {%- endif -%}
              {%- endif -%}
            {%- else -%}
              {%- capture inventory_message -%}{{ 'product.form.sold_out' | t }}{%- endcapture -%}
            {%- endif -%}

            "{{ variant.id }}": {
              "inventory_management": {{ variant.inventory_management | json }},
              "inventory_policy": {{ variant.inventory_policy | json }},
              "inventory_quantity": {{ variant.inventory_quantity | json }},
              "inventory_message": {{ inventory_message | json }}
            }{% unless forloop.last %},{% endunless %}
          {%- endfor -%}
        }
      {%- endif -%}
    }
  </script>

Hope it helps!

[adammahon]

Hi @LitCommerce I appreciate your help here. I have tested adding this to all relevant files but I am still having the same issue?

TIA

[LitCommerce]

Hi @adammahon,

Can you create a staff account for me? I will help you debug it

[adammahon]

Hi @LitCommerce currently I am unable to create staff accounts on the website as I do not have suffice permission as the website has just been pushed live. Apologies as this will make the task much more difficult.

[LitCommerce]

Hi @adammahon,

You can also export the theme source and send it to me, I will debug it at my site and send you the update

[adammahon]

Hi @LitCommerce great idea! Thanks for that. I have attached the theme code below:
-- https://we.tl/t-AgIB1c5tlg

[LitCommerce]

Hi @adammahon,

I checked and it seems that the source you sent is not correct, can you check it again?

And please send me the link to the preview site, I will check it.

[adammahon]

Hi @LitCommerce apologies on the delay, I sent over the theme source code which I downloaded directly from Shopify. I'm not sure what other code you would require.

Thank you for your help on this!

[LitCommerce]

Hi @adammahon,

Please send me the link to the preview site, I will check it.

[adammahon]

Hi, This is the preview link to the gift card page:
https://z97jkoin6vmuocio-60222701807.shopifypreview.com/products_preview?preview_key=eafe089c7a71bf1...

Thanks!

[LitCommerce · Accepted solution]

Hi @adammahon,

Please change the code I sent before to the following code, it will work fine

<script type="application/json" data-product-json>
    {
      "product": {{ product | json }},
      "options_with_values": {{ product.options_with_values | json }},
      "selected_variant_id": {{ selected_variant.id }},
      "inventories": {
          {%- for variant in product.variants -%}
            {%- if variant.available -%}
              {%- if variant.inventory_management and variant.inventory_policy == 'deny' and section.settings.low_inventory_threshold > 0 -%}
                {%- if variant.inventory_quantity <= section.settings.low_inventory_threshold -%}
                  {%- capture inventory_message -%}{{ 'product.form.low_stock_with_quantity_count' | t: count: variant.inventory_quantity }}{%- endcapture -%}
                {%- else -%}
                  {%- capture inventory_message -%}{{ 'product.form.in_stock_with_quantity_count' | t: count: variant.inventory_quantity }}{%- endcapture -%}
                {%- endif -%}
              {%- else -%}
                {%- if variant.inventory_policy == 'continue' and variant.inventory_quantity <= 0 and selected_variant.requires_shipping -%}
                  {%- capture inventory_message -%}{{ 'product.form.oversell_stock' | t }}{%- endcapture -%}
                {%- else %}
                  {%- capture inventory_message -%}{{ 'product.form.in_stock' | t }}{%- endcapture -%}
                {%- endif -%}
              {%- endif -%}
            {%- else -%}
              {%- capture inventory_message -%}{{ 'product.form.sold_out' | t }}{%- endcapture -%}
            {%- endif -%}

            "{{ variant.id }}": {
              "inventory_management": {{ variant.inventory_management | json }},
              "inventory_policy": {{ variant.inventory_policy | json }},
              "inventory_quantity": {{ variant.inventory_quantity | json }},
              "inventory_message": {{ inventory_message | json }}
            }{% unless forloop.last %},{% endunless %}
          {%- endfor -%}
        }
    }
  </script>

[adammahon]

Hi @LitCommerce thankyou very much this works perfectly!!