Skip to content

Instantly share code, notes, and snippets.

@matt-cos
Last active December 22, 2020 21:03
Show Gist options
  • Save matt-cos/990a060211ed3236279278769da8b7cf to your computer and use it in GitHub Desktop.
Save matt-cos/990a060211ed3236279278769da8b7cf to your computer and use it in GitHub Desktop.
A snippet that can be added to stock Impulse themes to give AJAX functionality to the /cart page. This is basically a public API, exposing cartPage methods and variables to work with in other JS files
/**
* simply add this file to theme.liquid in order to have the /cart page update
* using ajax. the only dependency is theme.jQuery
*/
window.cartPage = window.cartPage || {};
(function($){
var $ = jQuery = $;
cartPage.selectors = {
cartForm: 'form.cart',
qtyButtons: '.cart__product-qty',
mainContent: '#MainContent',
removeButtons: 'a.btn',
subtotal: 'form.cart .cart__row:last-child .cart__row--table',
updateButton: '.cart__update',
};
// cache DOM
var $cartForm = $(cartPage.selectors.cartForm),
$document = $(document);
/*==========================================================================
Utilities
============================================================================*/
cartPage.utils = {
getCurrentRow: function(elem) {
var $parentRow = $(elem).closest('.cart__row')[0];
// this is the current .cart__row's index, plus 1 so we can use it with
// css nth-child selector
return $('.cart__row').index($parentRow) + 1;
},
removeRow: function(rowNumber) {
$('form.cart .cart__row:nth-child(' + rowNumber + ')').remove();
},
};
/*==========================================================================
Theme Functionality
============================================================================*/
cartPage.init = function() {
cartPage.hideUpdateButton();
cartPage.bindEvents();
}
cartPage.bindEvents = function() {
// quantity change
$document.on('blur', cartPage.selectors.qtyButtons, function() {
var formData = $cartForm.serialize(),
currentRow = cartPage.utils.getCurrentRow(this),
quantity = this.value;
$.post($cartForm.attr('action'), formData, function(data) {
// reload the current line item's quantity and pricing
cartPage.reloadNode('form.cart .cart__row:nth-child(' + currentRow + ') > .cart__row--table-large > .grid__item:last-child');
if (quantity <= 0) {
// remove the current row
cartPage.utils.removeRow(currentRow);
}
// reload the subtotal
cartPage.reloadNode(cartPage.selectors.subtotal);
});
});
// product remove
$document.on('click', cartPage.selectors.removeButtons, function(e) {
e.preventDefault();
var currentRow = cartPage.utils.getCurrentRow(this);
$.post(this.href, function() {
// remove the current row
cartPage.utils.removeRow(currentRow);
// reload the subtotal
cartPage.reloadNode(cartPage.selectors.subtotal);
});
});
}
cartPage.reloadNode = function(selector, callback) {
// refill selector with it's children
$(selector).load(document.URL + ' ' + selector + ' > *', function() {
if (!!callback) {
callback();
}
});
}
cartPage.hideUpdateButton = function() {
// using style element so that reloading form does not affect hidden state
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = cartPage.selectors.updateButton + '{display:none;}';
document.getElementsByTagName('head')[0].appendChild(style);
}
/*==========================================================================
Initialize
============================================================================*/
if ( window.location.pathname.indexOf('cart') > -1 ) {
cartPage.init();
}
})(theme.jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment