Variant issue when going to cart

New Member
11 0 0

Hi All,

I had Afterpay integrated into my site yesterday, and since then, when a product is added to cart, only the first variant goes through. I am hoping someone can help, as It really is affecting my orders today. I am not that experienced with code but willing to give it a go. Afterpay themselves did the integration.

My sites is http://www.studiobianco.com.au

Kind Regards
Pat

0 Likes
Shopify Expert
9981 85 1492

There's something funky going on with your code. We'd need to see you actual Liquid code to be able to really point you in the right direction here. Here's some ghetto notes:

  • You have two <select> elements on the page that have the name of "id". That is what is used for determining what variant is added to the cart. 
  • The first exists outside of the <form> the second within.
  • When a variant is changes, the first element is changed, the second isn't
  • So when adding to cart the element within the form is what is used to add to cart. That will always be the first variant.

Time to dig into the code and see why you're getting double ups. Also odd that some of that customisation content exists outside of the main form.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
New Member
11 0 0

Hi Jason,

Thanks for the reply. Alas I still do not quite get it. Below is the product liquid:

{%- include 'bold-product' with product, hide_action: 'break', output: 'none' -%}
<div class="page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true" data-ajax="{{ section.settings.enable_ajax }}" data-stock="{{ section.settings.stock_enable }}">
  {% assign product_image_size = '480x480' %}

  <meta itemprop="name" content="{{ product.title }}">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: '600x600' }}">
  {%- if settings.product_vendor_enable -%}
    <meta itemprop="brand" content="{{ product.vendor }}">
  {%- endif -%}

  {% comment %}
    Get first variant, or deep linked one
  {% endcomment %}
  {% assign current_variant = product.selected_or_first_available_variant %}

  <div class="grid product-single">
    <div class="grid__item {% if product.images.size > 1 %}medium-up--three-fifths{% else %}medium-up--one-half{% endif %}">
      <div class="photos">
        <div class="photos__item photos__item--main">
          <div class="product-single__photo" id="ProductPhoto">
            {% assign featured_image = current_variant.featured_image | default: product.featured_image %}
            <a href="{{ featured_image | img_url: '1024x1024' }}" class="js-modal-open-product-modal" id="ProductPhotoLink-{{ section.id }}">
              <img src="{{ featured_image | img_url: product_image_size }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg-{{ section.id }}">
            </a>
          </div>
        </div>
        {% if product.images.size > 1 %}
          <div class="photos__item photos__item--thumbs">
            <div class="product-single__thumbnails{% unless product.images.size > 2 %} product-single__thumbnails--static{% endunless %}" id="ProductThumbs-{{ section.id }}">
              {% for image in product.images %}
                <div class="product-single__thumbnail-item {% if image == featured_image %} is-active {% endif %}">
                  <a href="{{ image.src | img_url: product_image_size }}" data-zoom="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail product-single__thumbnail-{{ section.id }}">
                    <img src="{{ image.src | img_url: '160x160' }}" alt="{{ image.alt | escape }}">
                  </a>
                </div>
              {% endfor %}
            </div>
          </div>
        {% endif %}
        {% if product.images.size > 2 %}
          {% comment %}
            Add SVG icon snippets to an object for custom slider arrows
          {% endcomment %}
          <script>
            {% capture arrow_left %}{% include 'icon-arrow-left' %}{% endcapture %}
            {% capture arrow_right %}{% include 'icon-arrow-right' %}{% endcapture %}
            {% capture arrow_up %}{% include 'icon-arrow-up' %}{% endcapture %}
            {% capture arrow_down %}{% include 'icon-arrow-down' %}{% endcapture %}
            var sliderArrows = {
              left: {{ arrow_left | json }},
              right: {{ arrow_right | json }},
              up: {{ arrow_up | json }},
              down: {{ arrow_down | json }}
            }
          </script>
        {% endif %}
      </div>
    </div>

    <div class="grid__item {% if product.images.size > 1 %}medium-up--two-fifths{% else %}medium-up--one-half{% endif %}" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      <div class="product-single__info-wrapper">
        <meta itemprop="priceCurrency" content="{{ shop.currency }}">
        <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

        <div class="product-single__meta small--text-center">
          {% if settings.product_vendor_enable %}
            <p class="product-single__vendor">{{ product.vendor }}</p>
          {% endif %}

          <h1 itemprop="name" class="product-single__title">{{ product.title }}</h1>

          <ul class="product-single__meta-list list--no-bullets list--inline">
            <li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
              <div class="product-tag">
                {{ 'products.product.on_sale' | t }}
              </div>
              
            </li>
            <li>
              {% unless product.compare_at_price_max > product.price %}
                <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
              {% endunless %}
              <span id="ProductPrice-{{ section.id }}" class="bold_option_price_display" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
                {{ current_variant.price | money }}
              </span>
            </li>
            {% if product.compare_at_price_max > product.price %}
              <li>
                <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
                <s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
                  {{ current_variant.compare_at_price | money }}
                </s>
              </li>
            {% endif %}
            {% if section.settings.stock_enable %}
              <li>
                <span id="ProductStock-{{ section.id }}" class="product-single__stock {% unless current_variant.inventory_management and current_variant.inventory_quantity < 10 and current_variant.inventory_quantity > 0 or  current_variant.inventory_management and current_variant.inventory_quantity <= 0 and current_variant.incoming %} hide{% endunless %}">
                  {% if current_variant.inventory_management %}
                    {% if current_variant.inventory_quantity < 10 and current_variant.inventory_quantity > 0 %}
                      {% assign qty = current_variant.inventory_quantity %}
                      {{ 'products.product.stock_available' | t: count: qty }}
                    {% elsif current_variant.inventory_quantity == 0 or current_variant.inventory_quantity < 0 and current_variant.incoming %}
                      {% if current_variant.available %}
                        {% assign date = current_variant.next_incoming_date | date: "%B %-d, %Y" %}
                        {{ 'products.product.will_not_ship_until' | t: date: date  }}
                      {% else %}
                        {% assign date = current_variant.next_incoming_date | date: "%B %-d, %Y" %}
                        {{ 'products.product.will_be_in_stock_after' | t: date: date  }}
                      {% endif %}
                    {% endif %}
                  {% endif %}
                </span>
              </li>
            {% endif %}
          </ul>
          
          <p>   or make 4 interest-free payments of <span id="afterpay_instalments">{{ current_variant.price | divided_by: 4 | money }}</span> fortnightly with  
      		<a style="display:block; margin-bottom: 10px;" target="_blank" href="https://www.afterpay.com.au/terms">         <img style="vertical-align:bottom" width="100" alt="Afterpay"
              src="https://www.afterpay.com.au/wp-content/themes/afterpay/assets/img/logo_scroll.png" />          <span style="font-size:12px"> <u>More info</u> </span>   
    		</a> 
  			</p>
	<br>
          {% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
            {% 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-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
                <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                  id="SingleOptionSelector-{{ forloop.index0 }}"
                  data-name="{{ option.name }}"
                  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 %}
          {% endunless %}

          <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
            {% for variant in product.variants %}
              <option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
                {% if variant.available %}
                  {{ variant.title }} - {{ variant.price | money_with_currency }}
                {% else %}
                  {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                {% endif %}
              </option>
            {% endfor %}
          </select>
          
        </div>

        <hr>

        <form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form" id="AddToCartForm">

          {% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
            {% for option in product.options_with_values %}
             
            {% endfor %}
          {% endunless %}

          <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
            {% for variant in product.variants %}
              <option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
                {% if variant.available %}
                  {{ variant.title }} - {{ variant.price | money_with_currency }}
                {% else %}
                  {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                {% endif %}
              </option>
            {% endfor %}
          </select>
          <hr>
          <br>
          <div class="product-form__item product-form__item--quantity">
            <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
            <input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input product-form__quantity">
          </div>
           <div class="product-form__item product-form__item--submit">
            <button type="submit"
              name="add"
              id="AddToCart-{{ section.id }}"
              class="btn btn--full product-form__cart-submit{% unless current_variant.available %} btn--sold-out{% endunless %}"
              {% unless current_variant.available %}disabled="disabled"{% endunless %}>
              <span id="AddToCartText-{{ section.id }}">
                {% unless current_variant.available %}
                  {{ 'products.product.sold_out' | t }}
                {% else %}
                  {{ 'products.product.add_to_cart' | t }}
                {% endunless %}
              </span>
            </button>
          </div>
            
        </form>

       
        
        <div class="rte product-single__description" itemprop="description">
          {{ product.description }}
        </div>

        {% if section.settings.social_sharing_products %}
          <hr>
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
  {% if section.settings.stock_enable %}
    <script type="application/json" id="VariantJson-{{ section.id }}">
      [
        {% for variant in product.variants %}
          {
             "incoming": {{ variant.incoming | default: false | json }},
             "next_incoming_date": {{ variant.next_incoming_date | date: format: 'month_day_year' | json }}
          }{% unless forloop.last %},{% endunless %}
        {% endfor %}
      ]
    </script>
  {% endif %}
{% endunless %}

{% schema %}
  {
    "name": "Product pages",
    "settings": [
      {
        "type": "checkbox",
        "id": "enable_ajax",
        "label": "Stay on current page when item is added to cart",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "stock_enable",
        "label": "Show stock when less than 10 products available",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "social_sharing_products",
        "label": "Enable product sharing",
        "default": true
      }
    ]
  }
{% endschema %}
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script> 
  jQuery( document ).ready(function(e) { 
    setInterval( function(e) { 
              var current_price = jQuery("#ProductPrice-product-template").text().replace('$', '').replace('AUD', '') / 4;        current_price = Math.round(current_price * 100) / 100; 
       
      jQuery("#afterpay_instalments").text("$" + current_price + " AUD"); 
    }, 1000); 
  }); 
</script> 

If you can take a look that would be most appreciated.

Pat

0 Likes
New Member
11 0 0

Hi Jason,

All fixed, I had two tags sitting out of places. Without your words above I would never have found them

Thank you very much.
Pat

0 Likes
Highlighted
New Member
2 0 0

Hey Jason, 

 

im having the same issue with my Mr Parker theme...  the default variant gets added to cart.  Im trying to look for the "select"  error ....  Any chance you might be able to help?

0 Likes