Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save raihan004/dc0f3d84980894b7c05fc59650ec94f8 to your computer and use it in GitHub Desktop.
Save raihan004/dc0f3d84980894b7c05fc59650ec94f8 to your computer and use it in GitHub Desktop.
A handy jQuery plugin for updating the Shopify Cart via their AJAX API
/*
* Project: Shopify AJAX Cart Plugin
* Description: Provides AJAX cart functionality for interacting with the Shopify AJAX API so you don't need an "Update Cart" button
* Dependency: jQuery 1.6+
* Author: Ryan Marshall (ryan@schmoove.co.nz)
* License: Free
* Usage:
*
* $('#cart-form').shopifyAJAXCart({
* item: '.line-item-container',
* item_total: '.line-item-total',
* item_qty: '.line-item-qty',
* subtotal: '.cart-total-price'
* });
*
*/
;(function ( $, window, document, undefined ) {
var pluginName = 'shopifyAJAXCart',
defaults = {
propertyName: "value"
};
function Plugin( element, options ) {
this.element = element;
this.options = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = 'shopifyAJAXCart';
this.init();
}
Plugin.prototype = {
init: function() {
var item = this.options.item,
item_total = this.options.item_total,
item_qty = this.options.item_qty,
subtotal = $(this.options.subtotal);
// Change line item quantity
$(item_qty).change(function() {
var qty = $(this).val(),
this_item = $(this).closest(item),
variant_id = this_item.data('variant-id'),
this_item_total = this_item.find(item_total);
$.ajax({
type: 'POST',
url: '/cart/change.js',
dataType: 'json',
data: {
quantity: qty,
id: variant_id
},
success: function(cart) {
if ( qty == 0 ) {
this_item.remove();
} else {
$.each(cart.items,function(index,row) {
if ( variant_id == row.variant_id ) this_item_total.html( '$' + parseFloat(row.line_price / 100).toFixed(2) );
});
}
subtotal.html( '$' + parseFloat(cart.total_price / 100).toFixed(2) );
},
error: function(response) {
alert(response);
}
});
});
// Remove line item
$(this.options.item_remove).click(function(e) {
e.preventDefault();
$(this).closest(item).find(item_qty).val(0);
$(this).closest(item).find(item_qty).trigger('change');
});
}
};
$.fn.shopifyAJAXCart = function ( options ) {
return this.each(function () {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new Plugin( this, options ));
}
});
};
})( jQuery, window, document );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment