Why does the default variant get added to cart regardless of customer selection?

Why does the default variant get added to cart regardless of customer selection?

Attrexx
Excursionist
17 1 10

Hello,
no matter what variant the customer chooses, the default (first) one gets added to cart and we have to ask each customer by phone on what size they wanted.
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).
We use Cozy theme and the one add-on that might interfere would be "Product Filter & Search".
Browser console shows no related errors.
Attached is the full product-template.liquid  file.


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

• 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 class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
                        {%- for option in product.options_with_values -%}
                        <fieldset class="js product-form__input">
                          <legend class="form__label">{{ 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 class="product-form__buttons">
                            <button id="AddToCart"
                                    type="submit"
                                    name="add"
                                    class="btn product-form__submit button button--full-width {% if product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
                                    {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                                    ><i class="mdi mdi-cart-outline"></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 class="loading-overlay__spinner hidden">
                                <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                                  <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                                </svg>
                              </div>
                            </button>
  <button id="comtel" class="btn product-form__submit button button--full-width button--secondary">
    <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 class="btn notify_btn{% if product.selected_or_first_available_variant.available == true %} hide{% endif %}" id="notify" data-toggle="modal" data-target="#notify-content"><i class="mdi mdi-email-outline"></i><span>{{ 'products.product.notify_me' | t }}</span></div>   
                          </div>

• 

 

Professional Web Products & Services • Website Development & Online Advertising on an European scale
Replies 2 (2)

Guleria
Shopify Partner
4083 801 1154

Hello @Attrexx ,

1) Why variant code is outside the scope of form tag.
2) Compare your variant change functionality with the theme preview. I mean check a product in the theme demo and notice if there is a change in URL when variant changes. I think variant ID changes in the URL when variant changes.  

Thanks

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
Attrexx
Excursionist
17 1 10

Theme preview option changing does not alter the URL.
Theme preview shows same code structure as our site (like I said, we did not alter it).
https://theme-cozy.myshopify.com/collections/fashion/products/exercita-tionem-ulam-1

Professional Web Products & Services • Website Development & Online Advertising on an European scale