Variants aren't adding correctly to cart...

Highlighted
New Member
7 0 0

Hello,

When adding products to the cart only the first/ default variant is adding no matter which option is selected. How do I fix this please?

Here is my code:

<div id="ProductSection" data-section-id="{{ section.id }}" data-section-type="product-template" data-zoom-toggle="zoom-in" data-zoom-enabled="{{ section.settings.product_image_zoom_enable }}" data-related-enabled="{{ section.settings.product_related_enable }}" data-social-sharing="{{ section.settings.social_sharing }}" data-show-compare-at-price="{{ section.settings.product_show_compare_at_price }}" data-stock="{{ section.settings.product_quantity_message }}" data-incoming-transfer="{{ section.settings.product_incoming_message }}" data-ajax-cart-method="{{ settings.ajax_cart_method }}">
{% include 'breadcrumb' %}

{% case section.settings.add_to_cart_button_size %}
{% when 'small' %}
{% assign btn_class = 'btn' %}
{% when 'medium' %}
{% assign btn_class = 'btn btn--wide' %}
{% when 'large' %}
{% assign btn_class = 'btn btn--full btn--large' %}
{% endcase %}

{% if section.settings.add_to_cart_button_size == 'large' %}
<style>
.selector-wrapper select, .product-variants select {
max-width: 100%;
}
</style>
{% endif %}

{% if section.settings.product_quantity_enable == false %}
<style>
.selector-wrapper select, .product-variants select {
margin-bottom: 13px;
}
</style>
{% endif %}

<div class="grid" itemscope itemtype="http://schema.org/Product">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

<div class="grid-item large--two-fifths">
<div class="grid">
<div class="grid-item large--eleven-twelfths text-center">
<div class="product-photo-container" id="productPhotoContainer-{{ section.id }}">
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
{% for image in product.images %}
{%- capture img_wrapper_id -%}productPhotoWrapper-{{ section.id }}-{{ image.id }}{%- endcapture -%}
{%- assign max_width = 700 -%}
{%- assign max_height = 1024 -%}

{%- include 'image-logic' with width: max_width, height: max_height -%}

{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div id="{{ img_wrapper_id }}" class="lazyload__image-wrapper{% unless image == featured_image %} hide{% endunless %}" data-image-id="{{ image.id }}" style="max-width: {{ max_width }}px">
<div class="no-js product__image-wrapper" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
{% if forloop.first == true %}
src="{{ featured_image | img_url: '300x300' }}"
{% endif %}
class="lazyload no-js lazypreload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}"
{% if section.settings.product_image_zoom_enable %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}>
</div>
</div>
{% if forloop.first == true %}
<noscript>
<img src="{{ image | img_url: '580x' }}"
srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"
alt="{{ image.alt }}" style="opacity:1;">
</noscript>
{% endif %}
{% endfor %}
</div>

{% if product.images.size > 1 %}
<ul class="product-photo-thumbs grid-uniform" id="productThumbs-{{ section.id }}">

{% for image in product.images %}
<li class="grid-item medium-down--one-quarter large--one-quarter">
<a href="{{ image.src | img_url: '1024x1024', scale: 2 }}" class="product-photo-thumb product-photo-thumb-{{ section.id }}" data-image-id="{{ image.id }}">
<img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
</a>
</li>
{% endfor %}

</ul>
{% endif %}

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

<div class="grid-item large--three-fifths">

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

{% if section.settings.product_vendor_enable %}
<p class="product-meta" itemprop="brand">{{ product.vendor }}</p>
{% endif %}

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

{% assign variant = product.selected_or_first_available_variant %}

<meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
<meta itemprop="price" content="{{ variant.price | divided_by: 100.00 }}">

<ul class="inline-list product-meta" data-price>
<li>
<span id="productPrice-{{ section.id }}" class="h1">
{% include 'price' with variant.price %}
</span>
{% include 'product-unit-price', variant: variant %}
</li>
{% if product.compare_at_price_max > product.price and section.settings.product_show_saved_amount %}
<li>
<span id="comparePrice-{{ section.id }}" class="sale-tag large">
{% assign compare_price = variant.compare_at_price %}
{% assign product_price = variant.price %}
{% include 'price-sale' %}
</span>
</li>
{% endif %}
{% if section.settings.product_reviews_enable %}
<li class="product-meta--review">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</li>
{% endif %}
</ul>

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

<hr id="variantBreak" class="hr--clear hr--small">

<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

{% capture "form_class" -%}
addToCartForm{% if section.settings.enable_payment_button %} addToCartForm--payment-button{% endif %}
{%- endcapture %}

{%- capture "form_id" -%}addToCartForm-{{ section.id }}{%- endcapture -%}

{% form 'product', product, class:form_class, id:form_id, data-product-form: '' %}
<select name="id" id="productSelect-{{ section.id }}" class="product-variants product-variants-{{ section.id }}">
{% for variant in product.variants %}
{% if variant.available %}

<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
<!-- Added in can edit -->

{%- unless product.has_only_default_variant -%}
{%- for option in product.options_with_values -%}

{%- if section.settings.product_selector == 'radio' -%}
<fieldset id="ProductSelect-option-{{ forloop.index0 }}" name="{{ option.name | handleize }}">
<legend>
{{ option.name | escape }}
</legend>
{%- for value in option.values -%}
<!-- Check to see if there's a product size option. If there is a size, check to see if there's any availble for purchase. If not, set the variat control in a "disabled" state. -->
{%- assign variant_label_state = true -%}

 

<input type="radio"
{% if option.selected_value == value %} checked="checked"{% endif %}
{% unless variant_label_state %} disabled="disabled"{% endunless %}
value="{{ value | escape }}"
data-index="option{{ forloop.index }}"
name="{{ option.name | handleize }}"
id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
<label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
{{ value | escape }}
</label>
{%- endfor -%}
</fieldset>
{%- else -%}
<label for="ProductSelect-option-{{ forloop.index0 }}">
{{ option.name | escape }}
</label>
<select id="ProductSelect-{{ 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 | escape }}
</option>
{%- endfor -%}
</select>
{%- endif -%}

{%- endfor -%}
{%- endunless -%}
<!-- end added in -->
{% if section.settings.product_quantity_enable %}
<label for="quantity" class="quantity-selector quantity-selector-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="quantity" name="quantity" value="1" min="1" class="quantity-selector">
{% endif %}

{% if section.settings.product_quantity_message %}
<div id="variantQuantity-{{ section.id }}" class="variant-quantity {% if variant.inventory_management and variant.inventory_quantity < 10 and variant.inventory_quantity > 0 %} is-visible{% endif %}">
{% include 'svg-definitions' with 'stock-icon' %}
{% assign qty = variant.inventory_quantity %}
<span id="variantQuantity-{{ section.id }}__message">{{ 'products.product.only_left' | t: count: qty }}</span>
</div>
{% endif %}

{% if section.settings.product_incoming_message %}
<div id="variantIncoming-{{ section.id }}" class="variant-quantity {% if variant.inventory_management and variant.inventory_quantity <= 0 and variant.incoming %} is-visible{% endif %}">
{% if variant.inventory_management and variant.inventory_quantity == 0 or variant.inventory_quantity < 0 and current_variant.incoming %}
{% include 'svg-definitions' with 'stock-icon' %}
{% if variant.available %}
{% assign date = variant.next_incoming_date | date: format: 'date' %}
<span id="variantIncoming-{{ section.id }}__message">{{ 'products.product.will_not_ship_until' | t: date: date }}</span>
{% else %}
{% assign date = variant.next_incoming_date | date: format: 'date' %}
<span id="variantIncoming-{{ section.id }}__message">{{ 'products.product.will_be_in_stock_after' | t: date: date }}</span>
{% endif %}
{% endif %}
</div>
{% endif %}

<div class="payment-buttons payment-buttons--{{ section.settings.add_to_cart_button_size }}">
<button type="submit" name="add" id="addToCart-{{ section.id }}" class="{{ btn_class }} btn--add-to-cart{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
<span class="icon icon-cart"></span>
<span data-add-to-cart-text>
{{ 'Pre-order' | json | remove: '"' }}
</span>
</button>

{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
{% endform %}

<hr class="{% if section.settings.enable_payment_button %}product-template-hr{% endif %}">
</div>

<p></p>
<p>Please note that pre-order items take up to 7 additional working days to be dispatched. Orders containing these items will be held back until all items are ready. If placing an order with general and pre order items then we recommend placing seperate orders.</p>
<p>...</p>

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

{% if section.settings.social_sharing_products %}
{% include 'social-sharing' %}
{% endif %}

</div>
</div>

{% if section.settings.related_products_enable %}
{% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
{% include 'related-products' %}
{% endif %}

{% if section.settings.product_reviews_enable %}
<hr>
<div id="shopify-product-reviews" data-id="{{ product.id }}">{{ product.metafields.spr.reviews }}</div>
{% endif %}

{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% if section.settings.product_quantity_message or section.settings.product_incoming_message %}
<script type="application/json" id="VariantJson-{{ section.id }}">
[
{% for variant in product.variants %}
{% capture variant_inventory %}
{%- if section.settings.product_incoming_message -%}
,
"incoming": {% if variant.incoming == 'null' or variant.next_incoming_date == null %}false{% else %}{{ variant.incoming | default: false | json }}{% endif %},
"inventory_policy": {{ variant.inventory_policy | json }},
"next_incoming_date": {{ variant.next_incoming_date | date: format: 'date' | json }}
{%- endif -%}
{%- if section.settings.product_quantity_message -%}
,
"inventory_quantity": {{ variant.inventory_quantity | json }}
{%- endif -%}
{% endcapture %}
{
{{ variant_inventory | remove_first: ',' | strip }}
}{% unless forloop.last %},{% endunless %}
{% endfor %}
]
</script>
{% endif %}
{% endunless %}
</div>

0 Likes