@Jasoliya is right.
I guess you followed this guide (for creating Ajax Add to cart) on Debut theme.
By improvising your code and the guide above , i was able to create what you were trying to achieve on Alternate Product Template (It would only work on this product page) https://nichegeek.myshopify.com/products/champion-ii-headgear
Here is the code.
{% assign announc-bfr-prc = 'ADD ITEMS WORTH ' %}
{% assign announc-after-prc = 'FOR FREE SHIPPING ' %}
{% assign free-ship = '120' | times: 100.0 %}
{% assign announc-freshp = 'YAY! YOU HAVE FREE SHIPPING' %}
{% assign ship-prc-bfr = free-ship | minus: cart.total_price %}
<div class="gd-free-shipping-bar" data-threshold="{{free-ship}}" data-format="{{shop.money_format}}">
{% if ship-prc-bfr > 0 %}
<p>{{ announc-bfr-prc }} <strong>{{ ship-prc-bfr | money_without_trailing_zeros }}</strong> {{announc-after-prc}} </p>
{% else %}
<span>{{ announc-freshp }}</span>
{% endif %}
</div>
<style>
.gd-free-shipping-bar p {
color: white;
background-color:red;
text-align:center;
width:100%;
display:block;
padding:15px 10px;
margin:0 auto 5px;
}
.gd-free-shipping-bar span {
color:green;
background-color: yellow;
text-align:center;
width:100%;
display:block;
padding:15px 10px;
margin:0 auto 5px; }
</style>Shopify.AjaxifyCart = (function($) {
// Some configuration options.
// I have separated what you will never need to change from what
// you might change.
var targetPrice
var _config = {
// What you might want to change
addToCartBtnLabel: 'Add to cart',
addedToCartBtnLabel: 'Thank you!',
addingToCartBtnLabel: 'Adding...',
soldOutBtnLabel: 'Sold Out',
howLongTillBtnReturnsToNormal: 1000, // in milliseconds.
cartCountSelector: '.cart-count,#CartCount span, #cart-count a:first, #gocart p a, #cart .checkout em, .item-count',
cartTotalSelector: '#cart-price',
// 'aboveForm' for top of add to cart form,
// 'belowForm' for below the add to cart form, and
// 'nextButton' for next to add to cart button.
feedbackPosition: 'nextButton',
// What you will never need to change
addToCartBtnSelector: '[type="submit"]',
addToCartFormSelector: 'form[action="/cart/add"]',
shopifyAjaxAddURL: '/cart/add.js',
shopifyAjaxCartURL: '/cart.js',
freeShipping: $('.gd-free-shipping-bar').data('threshold')
};
// We need some feedback when adding an item to the cart.
// Here it is.
var _showFeedback = function(success, html, $addToCartForm) {
$('.ajaxified-cart-feedback').remove();
var feedback = '<p class="ajaxified-cart-feedback ' + success + '">' + html + '</p>';
switch (_config.feedbackPosition) {
case 'aboveForm':
$addToCartForm.before(feedback);
break;
case 'belowForm':
$addToCartForm.after(feedback);
break;
case 'nextButton':
default:
$addToCartForm.find(_config.addToCartBtnSelector).after(feedback);
break;
}
// If you use animate.css
// $('.ajaxified-cart-feedback').addClass('animated bounceInDown');
$('.ajaxified-cart-feedback').slideDown();
};
var _setText = function($button, label) {
if ($button.children().length) {
$button.children().each(function() {
if ($.trim($(this).text()) !== '') {
$(this).text(label);
}
});
}
else {
$button.val(label).text(label);
}
};
var _init = function() {
$(document).ready(function() {
$(_config.addToCartFormSelector).submit(function(e) {
e.preventDefault();
var $addToCartForm = $(this);
var $addToCartBtn = $addToCartForm.find(_config.addToCartBtnSelector);
_setText($addToCartBtn, _config.addingToCartBtnLabel);
$addToCartBtn.addClass('disabled').prop('disabled', true);
// Add to cart.
$.ajax({
url: _config.shopifyAjaxAddURL,
dataType: 'json',
type: 'post',
data: $addToCartForm.serialize(),
success: function(itemData) {
// Re-enable add to cart button.
$addToCartBtn.addClass('inverted');
_setText($addToCartBtn, _config.addedToCartBtnLabel);
_showFeedback('success','<i class="fa fa-check"></i> Added to cart! <a href="/cart">View cart</a> or <a href="/collections/all">continue shopping</a>.',$addToCartForm);
window.setTimeout(function(){
$addToCartBtn.prop('disabled', false).removeClass('disabled').removeClass('inverted');
_setText($addToCartBtn,_config.addToCartBtnLabel);
}, _config.howLongTillBtnReturnsToNormal);
// Update cart count and show cart link.
$.getJSON(_config.shopifyAjaxCartURL, function(cart) {
if (_config.cartCountSelector && $(_config.cartCountSelector).size()) {
var value = $(_config.cartCountSelector).html() || '0';
$(_config.cartCountSelector).html(value.replace(/[0-9]+/,cart.item_count)).removeClass('hidden-count');
}
//Debut theme Specific
if($('#CartCount').length == 0){
$('a.site-header__cart').append('<div id="CartCount" class="site-header__cart-count"><span>'+cart.item_count+'</span></div>')
}
targetPrice = ($(_config.freeShipping).selector - cart.total_price)
if(targetPrice > 0){
$('.gd-free-shipping-bar strong').html(Shopify.formatMoney(targetPrice,"${{amount}}"))
}else{
location.reload();
}
});
},
error: function(XMLHttpRequest) {
var response = eval('(' + XMLHttpRequest.responseText + ')');
response = response.description;
if (response.slice(0,4) === 'All ') {
_showFeedback('error', response.replace('All 1 ', 'All '), $addToCartForm);
$addToCartBtn.prop('disabled', false);
_setText($addToCartBtn, _config.soldOutBtnLabel);
$addToCartBtn.prop('disabled',true);
}
else {
_showFeedback('error', '<i class="fa fa-warning"></i> ' + response, $addToCartForm);
$addToCartBtn.prop('disabled', false).removeClass('disabled');
_setText($addToCartBtn, _config.addToCartBtnLabel);
}
}
});
return false;
});
});
};
return {
init: function(params) {
// Configuration
params = params || {};
// Merging with defaults.
$.extend(_config, params);
// Action
$(function() {
_init();
});
},
getConfig: function() {
return _config;
}
}
})(jQuery);
Shopify.AjaxifyCart.init();Hope you can write a better version out of this :)
Available for hiring. Reach me at lixon@ecommercestudio.in
