Important: This section is only relevant if your site is using Asynchronous JavaScript and XML (AJAX). If you use a standard shopping cart page or product page, the code listed on the standard JavaScript Setup for Shopify is all you need. |
Here are the events we'll be going over:
- AJAX Add to Cart
- AJAX Product Quick View
- AJAX Cart View
- AJAX Update to Cart
Setting Up AJAX Cart Events
- Copy the AJAX code below:
/*** AJAX Add to Cart ***/
window.addEventListener('DOMContentLoaded', function(_rsq){
window.frames.document.getElementById('ADD_TO_CART_ID_HERE').addEventListener("click", function(_rsq){
// update the getElementById param to the ID name of the add to cart button
window.setTimeout(_check_cart, 2000);
});
});
/*** AJAX Product Quickview ***/
window.addEventListener('DOMContentLoaded', function(_rsq){
window.frames.document.getElementById('QUICK_PRODUCT_VIEW_ID_HERE').addEventListener("click", function(_rsq){
// update the getElementById param to the ID name of the add to cart button
window._rsq.push(['_addItem', {'id': 'item_id' }]); // replace item_id with your dynamic item_id variable
window._rsq.push(['_setAction', 'view']);
window._rsq.push(['_track']);
});
});
/*** AJAX Cart View ***/
window.addEventListener('DOMContentLoaded', function(_rsq){
window.frames.document.getElementById('SHOW_CART_ID_HERE').addEventListener("click", function(_rsq){
// update the getElementById param to the ID name of the show cart button or cart icon
_rs_ajax.updateCart();
});
});
/*** AJAX Update to Cart ***/
window.addEventListener('DOMContentLoaded', function(_rsq){
window.frames.document.getElementById('UPDATE_CART_ID_HERE').addEventListener("click", function(_rsq){
// update the getElementById param to the ID name of the update to cart button
window.setTimeout(_check_cart, 2000);
});
});
/*** FUNCTION FOR AJAX TRACKING ***/
var _rs_ajax = {};
_rs_ajax.updateCart = function() { //This is required for ajax cart views
var request = new XMLHttpRequest();
request.open('GET', '/cart.js', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) { // Success!
var cart = JSON.parse(request.responseText);
for(var i=0; i<cart.items.length; i++) {
var cartItem = cart.items[i];
var price = cartItem.price / 100;
_rsq.push(['_addItem', { 'id':cartItem.id.toString(), 'name':cartItem.title.toString(),'price':price.toFixed(2).toString() }]);
}
_rsq.push(['_setAction', 'shopping_cart']);
_rsq.push(['_track']);
}
};
request.onerror = function() {
console.log("Shopify Cart JS Failed");
};
request.send();
};
function _check_cart() {
var request = new XMLHttpRequest();
request.open('GET', '/cart.js', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) { // Success!
var cart = JSON.parse(request.responseText);
for(var i=0; i<cart.items.length; i++){
var cartItem = cart.items[i];
var price = cartItem.price / 100;
_rsq.push(['_addItem', { 'id':cartItem.id.toString(), 'name':cartItem.title.toString(),'price':price.toFixed(2).toString() }]);
}
window._rsq.push(['_setAction', 'shopping_cart']);
window._rsq.push(['_track']);
}
};
request.onerror = function() {
console.log("error");
};
request.send();
}
/*** END FUNCTION FOR AJAX TRACKING ***/ - Paste the code into the resci-main.v1.liquid snippet above
/*** ReSci Script ***/
.
Note: If you don't have a resci-main.v1.liquid snippet, please paste the code into to your theme.liquid file. - Look for the button ID by right-clicking the button and then clicking inspect.
- Check the source and look for the ID.
- Copy the ID and paste it into the ReSci code with the corresponding AJAX event.
/*** AJAX Add to Cart ***/
window.addEventListener('DOMContentLoaded', function(_rsq){
window.frames.document.getElementById('add-to-cart').addEventListener("click", function(_rsq){
// update the getElementById param to the ID name of the add to cart button
window.setTimeout(_check_cart, 2000);
});
});
Comments
0 comments
Please sign in to leave a comment.