Add to cart callbacks

From version 6.15, we can capture the shopper's cart items and products last added, and place them in a custom function.

Cache variables

Get cart

If a developer needs to access the user's current cart, they can use the following function:

$.getCartCache().

This will return an array of objects for each product in the cart.

Get last product added

If a developer needs to access the user's last added product(s), they can use the following functions:

$.getLastItemAdded, and $.getLastItemsAdded

$.getLastItemAdded will return an object of the last product added to cart, while $.getLastItemsAdded (notice the 's') will return an array of objects for each product last added to cart.

The reason for $.getLastItemsAdded is because we allow multiple products to be added at once, e.g. child products, cross-sell checkboxes, or category page multi-item add. The developer will have to have functions for both adding a single product (AddItem) or multiple products (AddMultiItems).

Please note: $.getLastItemAdded will still return a product when multiple products are added, it will display the first item in the array from $.getLastItemsAdded.

Get last item removed

If a developer needs to access the user's last removed product they can use the following function:

• $.getLastItemRemoved().

Callbacks

nCartInitCallbacks

On document ready, after jQuery has been loaded, $.initPageFuncs will be called, which in turn, sets up the cart with $.addToCartInit. This will build the cart ($.buildCartItem) and update the cart cache ($.cartCacheUpdate). $.cartCacheUpdate will then trigger the callback, which loops through the array nCartInitCallbacks and calls the functions inside it.

The developer's custom function needs to be pushed to the array before document ready, as $.addToCartInit is called on $.document.ready.

Example

// Custom function
function cartLoaded(){
    console.log('hey cart has loaded! lets send some tracking stuff');
}

// Push custom function to callback
nCartInitCallbacks.push(cartLoaded);

nRemoveItemCallbacks

When a product is removed from the cart, $.removeCartItem will be triggered to remove the product, it will then build the cart ($.buildCartItem) and update the cart cache ($.cartCacheUpdate). $.cartCacheUpdate will then trigger the callback, which loops through the array nRemoveItemCallbacks and calls the functions inside it.

A developer can push their custom functions to this array on any Maropost Commerce Cloud page, at any time. It will be triggered when $.removeCartItem occurs.

nAddItemCallbacks

Whenever a product is added to the cart, $.addCartItem will be triggered to add the product. It will then build the cart ($.buildCartItem) and update the cart cache ($.cartCacheUpdate). $.cartCacheUpdate will then trigger the callback, which loops through the array nAddItemCallbacks and calls the functions inside it.

Anytime on a Maropost Commerce Cloud page, a developer can push their custom functions to this array, which will triggered on $.addCartItem.

nAddMultiItemsCallbacks

Whenever multiple products are added to the cart, $.addMultipleCartItems will be triggered to add the products. It will then build the cart ($.buildCartItem) and update the cart cache ($.cartCacheUpdate). $.cartCacheUpdate will then trigger the callback, which loops through the array nAddMultiItemsCallbacks and calls the functions inside it.

Anytime on a Maropost Commerce Cloud page, a developer can push their custom function to this array, which will be triggered when $.addMultipleCartItems occurs. Note: multiple products can be added at once, e.g. child products, cross-sell checkboxes, or category page multi-item add.

Example

Here is an example of how this could be used in conjunction with Facebook pixel. Please note: this doesn't include all the javascript needed to setup Facebook for your Maropost Commerce Cloud site, this is just to demonstrate how your functions could be setup and added to the callbacks.

var fbP = {
    // Setup product data for facebook pixel
    productSetup: function(product) {
        return {
            'content_name': product.name,
            'content_category': product.category_fullname ? product.category_fullname : '',
            'content_type': 'product',
            'value': parseFloat(product.price) * parseInt(product.baseqty),
            'currency': '[@CONFIG:DEFAULTCURRENCY@]',
            'contents': [{
                'id': product.SKU ? product.SKU : product.parent_sku,
                'quantity': parseInt(product.baseqty),
                'item_price': parseFloat(product.price)
            }]
        }
    },
    // Custom function for sending product information to facebook
    addToCart: function(){
        var nProduct = $.getLastItemAdded();
        var fbProduct = fbP.productSetup(nProduct);
        fbq('track', 'AddToCart', fbProduct);
    },
    // Custom function for sending multiple products information to facebook
    addMultiToCart: function(){
        var nProducts = $.getLastItemsAdded();
        for (var i = 0; i < nProducts.length; i++) {
            var fbProduct = fbP.productSetup(nProducts[i]);
            fbq('track', 'AddToCart', fbProduct);
        }
    },
    init: function(){
        nAddItemCallbacks.push(fbP.addToCart);
        nAddMultiItemsCallbacks.push(fbP.addMultiToCart);
    }
}

// Calls the init function to place custom functions inside callback arrays
// First checks if function exists
if (typeof $.getLastItemAdded !== "undefined") {
    fbP.init();
}