Last active
December 22, 2020 21:03
-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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