Shopify Store - Variant Not adding To Cart - variables

Question

I cannot get my swatch variants to change what product is being added to the cart. No matter what I add it is adding the 'emerson' product. Here is my product.liquid code. I am also using the swatches app.
{% include 'bold-product' with product, hide_action: 'break' %}{% if bold_hidden_product %}{% break %}{%endif %}
<!-- Bold D&H //product -->
{% if product.metafields.inventory.ShappifyHidden == "true" %}
Product is not available
{% break %}{% endif %}
<!-- // end product D&H -->
{% include 'shappify-bdl-no-select' %}
<!-- Bold: Discount D&H -->
{% if product.metafields.inventory.ShappifyHidden == "true" %}
Product is not available
{% else %}
<div id="col-main" class="span12 bva">
<div itemscope itemtype="http://schema.org/Product" class="product-scope">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}" />
<meta itemprop="name" content="{{ product.title }}" />
<!-- NEW -->
<div class="gallery span8">
<span class=”desc”> {{ product.metafields.lifestyle.gallery }} </span>
</div>
<div class="product-top bva span9">
<div id="product-image" class="product-image bva">
<div id="product" class="row-fluid clearfix">
<div id="product-image" class="span12 product-image">
<div class="product-image-wrapper bva">
<div class="product-thumb-slides">
{% for variant in product.variants %}
{% include 'bold-hidden-variants' with variant, bold_loop: 'loop' %}
{% assign image_variant_available = true %}
{% assign image = variant.image %}
{% assign index = forloop.index | minus: 1 %}
<div data-swatch="{{ image.alt | downcase | handleize }}" data-swatch-color="{{ image.alt }}" data-index="{{ index }}" data-variant-id="{{ variant.id }}">
<img src="{{ image | img_url: 'compact' }}" alt="{% if image.alt contains 'youtube' %}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}" />
</div>
{% endfor %}
</div>
<div id="product-image" class="span12 product-image">
<div class="product-image-wrapper">
<a target="_blank" href="{{ product.featured_image | product_img_url: 'original' }}" class="main-image{% if settings.main_image_display == 'zoom' or settings.main_image_display == 'both' %} elevatezoom{% endif %}{% if settings.main_image_display == 'lightbox' %} fancybox{% endif %}">
<img itemprop="image"id="main-image" class="img-zoom img-responsive image-fly" src="{% if shappify_bdl_options_count > 1 %}{{ product.featured_image | product_img_url: 'grande' }}{% else %}{{ product.featured_image | product_img_url: 'original' }}{% endif %}" alt="{{ product.title | escape }}" />
<span class="main-image-bg"></span>
</a>
{% if product.images.size > 1 %}
{% if settings.viewmore_image_display == 'carousel' %}
<div class="gallery_main_wrapper">
{% endif %}
<div id="gallery_main" class="product-image-thumb {% if settings.viewmore_image_display == 'scroll' %}scroll scroll-mini{% endif %} clearfix">
{% for image in product.images %}
{% assign image_variant_available = false %}
{% if image.variants.size > 0 %}
{% for variant in image.variants %}
{% if variant.available %}
{% assign image_variant_available = true %}
{% endif %}
{% endfor %}
{% else %}
{% assign image_variant_available = true %}
{% endif %}
{% if image_variant_available %}
{% if image.alt contains '-alt' %}
{% else %}
<a class="image-thumb{% if forloop.index == 1 %} active{% endif %}" href="{{ image | product_img_url: 'original' }}" data-image-zoom="{{ image | product_img_url: 'original' }}" data-image="{{ image | product_img_url: 'original' }}"onclick="if($('.selector-wrapper .single-option-selector[data-option=\'option1\'] option[value=\'{{ image.alt | replace: "'", "\\'" }}\']').length > 0 && $('.selector-wrapper .single-option-selector[data-option=\'option1\']').val() != '{{ image.alt | replace: "'", "\\'" }}') $('.selector-wrapper .single-option-selector[data-option=\'option1\']').val('{{ image.alt | replace: "'", "\\'" }}'), $('.selector-wrapper .single-option-selector[data-option=\'option1\']').trigger('change');">
<img src="{{ image | product_img_url: 'small' }}" alt="{% if image.alt contains 'youtube' %}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}" />
</a>
{% endif %}
{% endif %}
{% endfor %}
{% for image in product.images %}
{% if image.alt contains 'youtube' %}
{% assign embed_url = image.alt %}
<div class="image-thumb-video play-icon">
<img src="{{ image | product_img_url: 'small' }}" alt="{{ product.title | escape }}" />
<a class="play-container fancy" href="{{ embed_url }}" title="{{ product.title }}">
{{ 'play-icon.svg' | asset_url | img_tag: 'Play Video', 'play-image' }}
</a>
<p>WATCH<br>VIDEO</p>
</div>
{% endif %}
{% endfor %}
</div>
{% if settings.viewmore_image_display == 'carousel' %}
</div>
{% endif %}
{% endif %}
</div>
{% if settings.tweet_code == 'below' %}
{% if settings.tweet_code_page != empty %}
<a id="tweet_code" class="btn btn-2" href="{{pages[settings.tweet_code_page].url}}"><i class="icon-hand-right"></i> {{settings.tweet_code_discount_button}}</a>
{% endif %}
{% endif %}
</div>
<script>
jQuery(document).ready(function($){
$('.product-thumb-slides').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.product-slick-gallery',
dots: false,
arrows: true,
focusOnSelect: true,
vertical: true,
centerMode: false,
infintie: false,
nextArrow: '<i class="fa fa-chevron-down slick-next"></i>',
prevArrow: '<i class="fa fa-chevron-up slick-prev"></i>',
});
$('.product-slick-gallery').slick({
arrows: false,
dots : false,
asNavFor: '.product-thumb-slides'
});
$('.quantity').spinner({
min: 1,
change: function(event,ui){
$(this).attr("value", this.value);
//$('.add-cart').attr('data-quantity', this.value);
}
});
$('.product-thumb-slides').on('beforeChange', function(event, slick, currentSlide, nextSlide){
var variantID = $('.product-thumb-slides .slick-slide[data-index="'+nextSlide+'"]').data('variant-id');
var swatch_color = $('.product-thumb-slides .slick-slide[data-index="'+nextSlide+'"]').data('swatch-color');
// console.log(variantID);
//$('.add-cart').attr('data-variant-id', variantID);
$('.hidden-variant-field').attr('value', variantID);
$('.color-name-dynaimc').html(swatch_color);
var $swatch = $('.swatch-element[data-variant-id="'+variantID+'"]');
// console.log($swatch);
if($swatch.hasClass('soldout')){
$('.add-cart').addClass('out-of-stock');
$('.cart-button').html('SOLD OUT');
}else{
$('.add-cart').removeClass('out-of-stock');
$('.cart-button').html('ADD TO CART');
}
});
var productDesc = $('.product-info .product-description p:nth-child(2)').html();
$('.product-info .product-description p:nth-child(2)').html('<strong>DESCRIPTION</strong>'+productDesc);
$('.color-name-dynaimc').html( $('.product-thumb-slides .slick-slide[data-index="0"]').data('swatch-color') );
//$('.add-cart').attr('data-variant-id', $('.product-thumb-slides .slick-slide[data-index="0"]').data('variant-id') );
$('.hidden-variant-field').attr('value', $('.product-thumb-slides .slick-slide[data-index="0"]').data('variant-id') );
// $('.add-cart').click(function(event){
// event.preventDefault();
// var variantID = $(this).data('variant-id');
// var quantity = $(this).data('quantity');
// CartJS.addItem( variantID, quantity);
// setTimeout(function(){
// location.reload();
// },500);
// });
});
</script>
</div>
</div>
</div>
<div class="product-share">
SHARE THIS PRODUCT:
<img src="{{ 'facebook-logo-01.png' | asset_url }}" class="fa fa-facebook social-sharing-icon" style="max-width: 30px" data-network="facebook">
<img src="{{ 'twitter-logo-silhouette-01.png' | asset_url }}" class="fa fa-twitter social-sharing-icon" style="max-width: 30px" data-network="twitter">
<img src="{{ 'pinterest-logo-button-01.png' | asset_url }}" class="fa fa-pinterest social-sharing-icon" style="max-width: 30px" data-network="pinterest">
</div>
</div>
<div class="product-details bva">
<div class="titles">
<div itemprop="name" class="product-name">
<h1>{{ product.title }} <span class="mobile-only">- <span class="color-name-dynaimc"></span></span></h1>
</div>
<div class="detail-price" itemprop="price">
<span class="price">{{ product.price | money }}</span>
</div>
</div>
<div class="variants-wrapper clearfix{% if hide_default_title %} hide{% endif %}">
<select id="product-select-{{ product.id }}" name="id">
{% for variant in product.variants %}
{% include 'bold-hidden-variants' with variant, bold_loop: 'loop' %}
{% if variant.metafields.shappify_bundle.is_bundle == "true" %}{% else %}
<option value="{{ variant.id }}">{{ variant.title | escape }} - {{ variant.price | money }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<form action="/cart/add" method="post" class="product-actions variants " enctype="multipart/form-data">
<div id="product-actions-{{ product.id }}" class="options qty-cart">
<!--<input id="quantity" type="number" name="quantity" value="1" min="1" class="span4 item-quantity" />-->
<div class="input-box">
<input id="quantity" type="text" name="quantity" class="quantity item-quantity" value="1" min="1" />
</div>
<div class="action-wrapper product add-cart">
<div class="product-wait"></div>
<input type="hidden" name="id" value="{{ variant.id }}" class="hidden-variant-field"/>
<button class="cart-button {% if variant.inventory_quantity < 0 %}out-of-stock{% endif %}" unbxdattr="AddToCart" unbxdparam_sku="{{product.id}}" data-parent=".product-information" type="submit" name="add">ADD TO CART</button>
</div>
</div>
</form>
{% unless bundle_loaded == 'true' %}
{% include 'shappify-bdl-load-bundle' %}
{% assign bundle_loaded = 'true' %}
{% endunless %}
<div class="rumepoints">
<strong>You Will Earn:</strong> <span class=”desc”> {{ product.metafields.totes.rumepoints }} </span> <u>RuMe Rewards Points</u> for this item
</div>
</div>
</div>
</div>
</div>
<div class="descriptionusesfeatures">
<div class="product-description">
<strong>DESCRIPTION</strong><br><br>
{{ product.description }}
</div>
<div class="description-right">
<div class="usesforhtml"><strong>USES FOR:</strong><br><br>
<span class=”desc”> {{ product.metafields.usesfor.usesforhtml }} </span>
</div>
<br>
<div class="productfeatures"><strong>FEATURES:</strong><br><br>
<span class=”desc”> {{ product.metafields.features.productfeatures }} </span>
</div>
</div>
</div>
<!-- END -->
{% if settings.product_description_show == 'below' %}
<div itemprop="description" class="description text-left">
<h1>{{ product.title }}</h1>
<!-- {{ product.description }} Replaced with shortcodes version,below -->
{% include 'shortcodes' with product.description %}
</div>
{% endif %}
{% if settings.reviews_enable %}
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
{% endif %}
</div>
{% include 'related-products' %}
<!-- yotpo -->
<div class="yotpo yotpo-main-widget"
data-product-id="{{ product.id }}"
data-name="{{ product.title | escape }}"
data-url="{{ shop.url }}{{ product.url }}"
data-image-url="{{ product.featured_image | product_img_url: "large" |replace: '?', '%3F' | replace: '&','%26'}}"
data-description="{{ product.description | escape }}">
</div>
<!-- yotpo -->
</div>
<!-- end slider wrapper -—>
<!-- Bold: Discount D&H -->
{% endif %}
<script type="text/javascript">
(function e(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="//staticw2.yotpo.com/V3G5rrxyCEg9hXApffAzbDMC6CsghmTdUpbf8D2z/widget.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
</script>
<script type="text/javascript">
$("a.fancy").click(function() {
$.fancybox({
'padding' : 40,
'autoScale' : false,
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'title' : this.title,
'width' : 1280,
'height' : 720,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '?autoplay=1',
'type' : 'swf', // <--add a comma here
'swf' : {'allowfullscreen':'true'} // <-- flashvars here
});
return false;
});
</script>
<script>
// To change what your customers would see if they try to
// add to cart without completing an option, edit the yellow text enclosed within the quotation marks.
var errorMessages = {
for_text_inputs : "Please add your personalized text before adding to cart.",
for_number_inputs: "Please enter a custom quantity.",
for_checkboxes : "Please select your options before adding to cart",
for_dropdowns : "Please select an option before adding to cart"
};
jQuery("form[action='/cart/add'] [type=submit]").on("click", function(e) {
if (
window.Shoppad &&
window.Shoppad.apps &&
window.Shoppad.apps.customizery &&
window.Shoppad.apps.customizery.overrideDeprecatedValidation
) return true;
$io = $('#infiniteoptions-container');
var invalidTextInputs = $io.find("input[type=text][required], textarea").filter(function (idx, el) {
return $(el).val() === '';
});
var invalidNumberInputs = $io.find('input[type=number][required]').filter(function (idx, el) {
return $(el).val() === '';
});
var invalidFieldSets = $io.find('fieldset[data-required=true]').filter(function (idx, fieldSet) {
if ($(fieldSet).find('input[type=checkbox]').length === 0) {
return false;
} else {
return $(fieldSet).find('input[type=checkbox]').filter(function (idx, el) {
return el.checked === true;
}).length === 0;
}
});
var invalidDropdowns = $io.find('select[required]').filter(function (idx, select) {
return !select.selectedOptions[0] || select.selectedOptions[0].disabled === true;
});
var onFail = function (messageType) {
e.stopImmediatePropagation();
alert( errorMessages[messageType] );
return false;
};
if (invalidTextInputs.length > 0) {
return onFail( 'for_text_inputs' );
} else if (invalidNumberInputs.length > 0) {
return onFail( 'for_number_inputs' );
} else if (invalidFieldSets.length > 0) {
return onFail( 'for_checkboxes' );
} else if (invalidDropdowns.length > 0) {
return onFail( 'for_dropdowns' );
} else {
return true;
}
});
</script>
{% include 'shappify-bdl-load-bundle' %}
<script type="text/javascript">
// initialize multi selector for product
jQuery(document).ready(function($){
/* selectCallback */
var selectOptionsCallback = function(variant, selector) {
var add_to_cart = '#add-to-cart';
var $price = '#purchase-' + selector.product.id.toString() + ' .detail-price';
if (variant && variant.available) {
// selected a valid variant
$(add_to_cart).removeClass('disabled').removeAttr('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
if(variant.compare_at_price == null){
$($price).html('<span class="price">'+Shopify.formatMoney(variant.price, "{{shop.money_format}}")+'</span>');
{% if settings.show_multiple_currencies %}
/* Update currency */
currenciesCallbackSpecial('#product-information span.money');
{% endif %}
} else {
$($price).html('<del class="price_compare">' + Shopify.formatMoney(variant.compare_at_price, "{{shop.money_format}}") + '</del>' + '<span class="price_sale">'+Shopify.formatMoney(variant.price, "{{shop.money_format}}") + '</span>');
{% if settings.show_multiple_currencies %}
/* Update currency */
currenciesCallbackSpecial('#product-information span.money');
{% endif %}
}
} else {
$(add_to_cart).addClass('disabled').attr('disabled', 'disabled'); // set add-to-cart button to unavailable class and disable button
var message = variant ? "Sold Out" : "Unavailable";
$($price).html('<span class="unavailable">' + message + '</span>');
}
if (variant && variant.inventory_quantity && variant.inventory_management == 'shopify') {
jQuery("#stock").html(variant.inventory_quantity).parent().show();
}
else{
jQuery("#stock").parent().hide();
}
{% if settings.trans_product_sku %}
if (variant && variant.sku) {
jQuery("#sku").html(variant.sku).parent().show();
}
else{
jQuery("#sku").parent().hide();
}
{% endif %}
{% if settings.product_barcode_show %}
if (variant && variant.barcode) {
jQuery("#barcode").html(variant.barcode).parent().show();
}
else{
jQuery("#barcode").parent().hide();
}
{% endif %}
//Swapping images JS
$('.product-image-thumb img[alt="'+ $('.selector-wrapper .single-option-selector[data-option=\'option1\']').val() +'"]').first().parent().trigger('click');
};
new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json | remove:'\u003E' | remove:'\u003C' | remove:'\u00a0' }}, onVariantSelected: selectOptionsCallback });
<!-- START Hide OOS Product Varients -->
{% if product.options.size == 1 %}
{% for variant in product.variants %}
{% include 'bold-hidden-variants' with variant, bold_loop: 'loop' %}
{% if variant.metafields.shappify_bundle.is_bundle == "true" %}{% else %}
{% unless variant.available %}
jQuery('.single-option-selector option').filter(function() { return jQuery(this).html() === {{ variant.title | json }}; }).remove();
{% endunless %}
{% endif %}
{% endfor %}
//jQuery('.single-option-selector').trigger('change');
{% endif %}
<!-- END Hide OOS Product Varients -->
// Add label if only one product option and it isn't 'Title'.
{% if product.options.size == 1 and product.options.first != 'Title' %}
$('#product-actions-{{ product.id }} .selector-wrapper:eq(0)').prepend('<label>{{ product.options.first }}</label>');
{% endif %}
// Auto-select first available variant on page load.
{% assign found_one_in_stock = false %}
{% for variant in product.variants %}
{% include 'bold-hidden-variants' with variant, bold_loop: 'loop' %}
{% if variant.metafields.shappify_bundle.is_bundle == "true" %}{% else %}
{% if variant.available and found_one_in_stock == false %}
{% assign found_one_in_stock = true %}
{% for option in product.options %}
$('.single-option-selector:eq({{ forloop.index0 }})').val({{ variant.options[forloop.index0] | json }}).trigger('change');
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
});
</script>
{% include 'windsor-product-tracking' %}Ò

Answer 1

This ended up being a javascript not being able to fire issue. We moved the script higher in the file and corrected the issue.