Add to cart

This is a technical article for some of our legacy products. Ask us first in case of issues adding products to the cart. In any case, we recommend a developer follow the article.

By default when a user clicks on recommended products, they will be redirected to the product page. Sometimes is desirable to add a product to the cart from the end slide. To enable this feature you need to add some JavaScript code and configure the products' call to action buttons.

Adding Add to Cart JavaScript code

Go to Integrations and select configure your website:

Select the Developers tab:

Paste the following code into Integration code:

var pzItems, pzAddToCartDone;

function pzOnCompleteAddToCart(msg){
    pzAddToCartDone({success:true, msg:msg});
}

function _pzAddItemToCart(item, quantity, callback) {
    quantity = quantity || 1;

    var request = {
        type: "POST",
        url: "/cart/add.js",
        data: "quantity=" + quantity + "&id=" + item.sku,
        dataType: "json",
        success: function() {
            callback(true);
        },
        error: function() {
            callback(false);
        }
    };

    jQuery.ajax(request);
}

function _pzAddMultipleToCart() {
    if (pzItems.length) {
        var item = pzItems.shift();
        if (item) {
            _pzAddItemToCart(item, 1, _pzAddMultipleToCart);
        } else {
            _pzAddMultipleToCart();
        }
    } else {
        pzOnCompleteAddToCart('Products added to the cart');
    }
}

window.pzAddItemToCart=function(item, origin, done){
    pzAddToCartDone=done;
    _pzAddItemToCart(item,1,function(success){
        var msg = success?'Product added to the cart':'Error adding product to the cart';
        pzOnCompleteAddToCart(msg);
    });
};

window.pzAddAllToCart=function(items, origin, done){
    pzItems=[];
    for (var i=0;i<items.length;i++) pzItems.push(items[i]);
    pzAddToCartDone=done;
    _pzAddMultipleToCart();
};

Note that this code has some feedback texts like Product added to the cart that you can modify if you need.

The result would be:

Configuring the products call to action buttons

To configure the products' call to action button (typically a Shop button):

Edit your Assistant click on Settings, select Developers tab, End slide and Call to action:

You now have to insert the following code in the JavaScript code for each buy button section:

//call:pzAddItemToCart

Once done this step, all your products' call to action buttons will add a product to the cart.

Updating your eCommerce cart icon

By default when you add a product to the cart from Pickzen, you will note the the typical cart icon on the top the site won't be modified:

The reason is that every site/theme has different cart icons and it's not possible to create a generic code valid for all of them. There are sites that show the number of items in the cart with number, others shows them with a dot, and others even with nothing at all. There are sites that when the icon is clicked the user is redirected to the cart page, others that when it is hovered a drawer appear on the same page, etc.

Depending on your particular site, you will need to write specific JavaScript code to integrate with your cart. This is typically done in the pzOnCompleteAddToCart showed above. For example, this code would update the number of products currently in the cart:

function pzOnCompleteAddToCart(msg){
    jQuery.getJSON('/cart.js', function(cart) {
        $('.cart-link .cart-count').html(cart.item_count);
    });

    pzAddToCartDone({success:true, msg:msg});
}

When the product or products are added to the cart, we make a call to Shopify to get the total number of products in the cart, and update the number through jQuery assuming the CSS selector were that.

In the case that your site showed a drawer on the same page, you would note that although we manually update the number of products, when you hover the cart the drawer won't show the actual products, that's to say, the products just added by Pickzen to the cart won't be displayed:

To also update the drawer, you need to contact your Theme creator to find how you can update the drawer dynamically from JavaScript.

A quick workaround is to disable the default drawer so when the user hovers on the cart icon, the drawer won't appear, and when the user clicks on the cart icon, they will be redirected to the cart instead of showing the drawer in the same page. A developer is needed to create this JavaScript code that will be also added to the pzOnCompleteAddToCart function.

Recharge

To create subscriptions using Recharge (adding Recharge products) we need to make some modifications over the code above. First, we need the Recharge product Id that is different from the Shopify product Id.

Follow the Recharge guide to set it up properly before following this guide.

If we have imported Products in Pickzen, the Recharge Id is in the item variants. For example:

var firstRechargeId = item.meta.variants[0].recharge.id;

Conversely, if we have imported Variants in Pickzen, the Recharge Id is in the item itself:

var rechargeId = item.meta.recharge.id;

Having this in mind we have to create an equivalent _pzAddItemToCart function that uses the Recharge product Ids and sends the required Recharge attributes:

function _pzAddItemToCartRecharge(item, quantity, callback) {
    quantity = quantity || 1;

    // In case of importing products instead of variants, 
    // select the first variant as example
    var rechargeId = item.meta.recharge.id?
        item.meta.recharge.id:
        item.meta.variants[0].recharge.id;

    var request = {
        type: "POST",
        url: "/cart/add.js",
        data: {
            "quantity": quantity,
            "id": rechargeId,
            "properties[shipping_interval_frequency]": "4",
            "properties[shipping_interval_unit_type]": "Weeks",
            "properties[subscription_id]": "12345678"
        },
        dataType: "json",
        success: function() {
            callback(true);
        },
        error: function() {
            callback(false);
        }
    };

    jQuery.ajax(request);
}

For more information, refer to Recharge documentation.