Shopify Default Variant Gets Added To Cart-CodePudding

I have a headache with this problem: no matter what product variant (our case: Size) the customer chooses, the default (first) one always gets added to cart and we have to ask each customer by phone on what size they wanted.

What makes it worse is that sometimes we get orders with size 40, but on confirmation call these customers say they actually selected size 38! I cannot reproduce this behavior and have no idea what influences it.

I did not alter the code of the product template in the sections related to variants or ATC but I did on elements below it (ie. product suggestions with metafields on line 532 or the button on line 518).

We use Cozy theme and the one add-on that might interfere would be "Product Filter & Search", but their support took a look and said their add-on is not interfering.

Browser console shows no related errors.

Here is the full product-template.liquid file: https://codeshare.io/DZM7kZ

• URL to check is: https://www.locapica.com/collections/rochii-de-seara/products/rochie-de-seara-electra-midi-petrecuta-cu-paiete-verzi

• Default variant is smallest size (ie. 36)

• I have hidden the second variation element (color) in CSS as we only have one per product and we just use it for the products filter

Relevant snippets for assist:

• Button type variants list:

 {%- when 'variant_picker' -%}
                      {%- unless product.has_only_default_variant -%}
                      {%- if block.settings.picker_type == 'button' -%}
                      <variant-radios  data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
                        {%- for option in product.options_with_values -%}
                        <fieldset >
                          <legend >{{ option.name }}</legend>
                          {%- for value in option.values -%}
                          <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
                                 name="{{ option.name }}"
                                 value="{{ value | escape }}"
                                 form="product-form-{{ section.id }}"
                                 {% if option.selected_value == value %}checked{% endif %}
                                 >
                          <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
                            {{ value }}
                          </label>
                          {%- endfor -%}
                        </fieldset>
                        {%- endfor -%}
                        <script type="application/json">
                    {{ product.variants | json }}
                        </script>
                      </variant-radios>

• Add to cart:

 <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
                          <div >
                            <button id="AddToCart"
                                    type="submit"
                                    name="add"
                                    
                                    {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                                    ><i ></i>
                              <span>
                                {%- if product.selected_or_first_available_variant.available -%}
                                {{ 'products.product.add_to_cart' | t }}
                                {%- else -%}
                                {{ 'products.product.sold_out' | t }}
                                {%- endif -%}
                              </span>
                              <div >
                                <svg aria-hidden="true" focusable="false" role="presentation"  viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                                  <circle  fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                                </svg>
                              </div>
                            </button>
  <button id="comtel" >
    <a href="tel:0767866566" alt="Comandă telefonic" title="Comandă telefonic">Comandă telefonic: <span>0767 866 566</span></a>
  </button>
  {% if section.settings.enable_payment_button %}
                            {{ form | payment_button }}
                            {%- endif -%}
<div  id="notify" data-toggle="modal" data-target="#notify-content"><i ></i><span>{{ 'products.product.notify_me' | t }}</span></div>   
                          </div>

On a final note, I checked the theme preview and the code is the same, which is very frustrating: https://theme-cozy.myshopify.com/password

Thanks for the (any) help!

CodePudding user response：

Add the code in a script tag in the same file as the code you pasted in the question in the end, I am assuming you have a document ready function.

This will work until you make a change to the code mentioned in your question

document.querySelectorAll('.product-single__header .product-form__input label').forEach(x=>{x.addEventListener('click',function(){JSON.parse(document.querySelectorAll('.product-single__header script')[0].innerHTML).map(y=>{if(y.option1 == x.innerHTML.trim()){document.querySelector('.product-form form input[name="id"]').setAttribute('value',y.id)}})})});

I tested in the console, it is working for me there.

This code will only work on product page and not on collection page.

P.S - Do share console errors if the script doesn't work.