Add to cart passing first variant no matter which is selected

Highlighted
New Member
1 0 0

I have modified the Debut theme to use the add to cart Ajax popup on the product-card-grid.liquid which I copied/edited code from the product-template.liquid.

I have the Ajax function working except it will only pass the first variant to the cart no matter which is selected.

It works as expected on the product detail page though.

You can see example here hfd-dev.myshopify.com password caybre

Here is the code for my product-card-grid.liquid

<div class="page-width" id="ProductSection-{{ product.id }}" data-section-id="{{ product.id }}" data-section-type="product" data-ajax-enabled="{{ settings.enable_ajax }}">
  {% comment %}
    Get first variant, or deep linked one
  {% endcomment %}
  {%- assign current_variant = product.selected_or_first_available_variant -%}
  {%- assign product_thumb_size = '110x110' -%}
  {%- assign product_image_zoom_size = '1024x1024' -%}
  {%- assign product_image_scale = '2' -%}
  {%- assign enable_image_zoom = section.settings.enable_image_zoom -%}

  {% case section.settings.media_size %}
    {% when 'small' %}
      {%- assign product_media_width = 'medium-up--one-third' -%}
      {%- assign product_description_width = 'medium-up--two-thirds' -%}
      {%- assign height = 345 -%}
    {% when 'medium' %}
      {%- assign product_media_width = 'medium-up--one-half' -%}
      {%- assign product_description_width = 'medium-up--one-half' -%}
      {%- assign height = 530 -%}
    {% when 'large' %}
      {%- assign product_media_width = 'medium-up--two-thirds' -%}
      {%- assign product_description_width = 'medium-up--one-third' -%}
      {%- assign height = 720 -%}
    {% when 'full' %}
      {%- assign product_media_width = '' -%}
      {%- assign product_description_width = '' -%}
      {%- assign height = 1090 -%}
      {%- assign enable_image_zoom = false -%}
  {% endcase %}

  <div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ section.settings.media_size }}-media{% endif %}">
    

    <div class="grid__item {{ product_description_width }}">
      <div class="product-single__meta">
        {% unless section_onboarding %}
          {%- assign price = current_variant.price -%}
          {%- assign available = current_variant.available -%}
        {% else %}
          {%- assign price = 1999 -%}
          {%- assign available = true -%}
        {% endunless %}
        <h2 class="visually-hidden">{{ 'sections.featured_product.title' | t }}</h2>
        <h3 class="product-single__title">
          {% unless product == empty %}
          <a href="{{ product.url }}">{{ product.title }}</a>
          {% else %}
            {{ 'homepage.onboarding.product_title' | t }}
          {% endunless %}
        </h3>

        <div>
          <div class="featured-product__price">
            {% include 'product-price', variant: current_variant, product: product, show_vendor: section.settings.show_vendor %}
          </div>

          {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
            <div class="product__policies rte" data-product-policies>
              {%- if shop.taxes_included -%}
                {{ 'products.product.include_taxes' | t }}
              {%- endif -%}
              {%- if shop.shipping_policy.body != blank -%}
                {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
              {%- endif -%}
            </div>
          {%- endif -%}

          {% if section_onboarding %}
            <div class="product-form">
              <div class="product-form__item product-form__item--submit{% if product.has_only_default_variant %} product-form__item--no-variants{% endif %}">
                <button type="submit" name="add" disabled class="btn product-form__cart-submit" data-add-to-cart>
                  <span data-add-to-cart-text>
                      {{ 'products.product.sold_out' | t }}
                  </span>
                </button>
              </div>
            </div>
          {% else %}
            {% capture "form_classes" -%}
              product-form product-form-{{ product.id }}
              {%- unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}
              {%- if section.settings.enable_payment_button and product.has_only_default_variant%} product-form--payment-button-no-variants{% endif %}
              {%- if current_variant.available == false %} product-form--variant-sold-out {%- endif -%}
            {%- endcapture %}
            {% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
              {% unless section_onboarding %}
                {% unless product.has_only_default_variant %}
                  <div class="product-form__controls-group">
                    {% for option in product.options_with_values %}
                      <div class="selector-wrapper js product-form__item">
                        <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ product.id }}-{{ forloop.index0 }}">
                          {{ option.name }}
                        </label>
                        <select class="single-option-selector single-option-selector-{{ product.id }} product-form__input" id="SingleOptionSelector-{{ product.id }}-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
                          {% for value in option.values %}
                            <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                          {% endfor %}
                        </select>
                      </div>
                    {% endfor %}
                  </div>
                {% endunless %}
				
                <select name="id" id="ProductSelect-{{ product.id }}" class="product-form__variants no-js">
                  {% for variant in product.variants %}
                    <option value="{{ variant.id }}"
                      {%- if variant == current_variant %} selected="selected" {%- endif -%}
                    >
                      {{ variant.title }}  {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                    </option>
                  {% endfor %}
                </select>
              {% endunless %}
              {% if section.settings.show_quantity_selector %}
                <div class="product-form__controls-group">
                  <div class="product-form__item">
                    <label for="Quantity-{{ product.id }}">{{ 'products.product.quantity' | t }}</label>
                    <input type="number" id="Quantity-{{ product.id }}"
                      name="quantity" value="1" min="1" pattern="[0-9]*"
                      class="product-form__input product-form__input--quantity"
                      data-quantity-input>
                  </div>
                </div>
              {% endif %}

              <div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden{% if section.settings.enable_payment_button %} product-form__error-message-wrapper--has-payment-button{% endif %}" data-error-message-wrapper role="alert">
                <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                {% include 'icon-error' %}
                <span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
              </div>

              <div class="product-form__controls-group product-form__controls-group--submit">
                <div class="product-form__item product-form__item--submit
                      {%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
                      {%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}"
                >
                  <button type="submit" name="add"
                    {% unless current_variant.available %} aria-disabled="true"{% endunless %}
                    aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
                    class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
                    {% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
                    data-add-to-cart>
                    <span data-add-to-cart-text>
                      {% unless current_variant.available %}
                        {{ 'products.product.sold_out' | t }}
                      {% else %}
                        {{ 'products.product.add_to_cart' | t }}
                      {% endunless %}
                    </span>
                    <span class="hide" data-loader>
                      {% include 'icon-spinner' %}
                    </span>
                  </button>
                  {% if section.settings.enable_payment_button %}
                    {{ form | payment_button }}
                  {% endif %}
                </div>
              </div>
            {% endform %}
          {% endif %}
        </div>

    
      </div>
    </div>
  </div>
</div>

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ product.id }}">
    {{ product | json }}
  </script>
{% endunless %}
0 Likes