# Add to cart

{% hint style="danger" %}
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.
{% endhint %}

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:

![](/files/-MFkMsnZ7hWC2oqW2_1g)

Select the *Developers* tab:

![](/files/-Ls7eGj_icE4DC7nCq4e)

Paste the following code into *Integration code*:

```javascript
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();
};
```

{% hint style="info" %}
Note that this code has some feedback texts like *Product added to the cart* that you can modify if you need.
{% endhint %}

The result would be:

![](/files/-Ls7et-qCgFCWK2I1Kek)

## Configuring the products call to action buttons

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

![](/files/-Ls7fzQ-NKwBOc9JfN2Z)

Edit your Assistant click on Settings<img src="/files/-Ls7gJWzpFMvjtH83L9Q" alt="" data-size="line">, select Developers tab, End slide and Call to action:

![](/files/-Ls7gy7ETg5aHNssh8WF)

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

```javascript
//call:pzAddItemToCart
```

![](/files/-Ls7hI4nd_mgWCi1PP-e)

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:

![](/files/-Ls7iafKpza87hvGwcOg)

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:

```javascript
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:

![](/files/-Ls7lnNI3hucU2O8tL-6)

![](/files/-Ls7lyk0gAcjFFrbIpVa)

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

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* functio&#x6E;*.*

### 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.&#x20;

{% hint style="info" %}
Follow the [Recharge](https://help.pickzen.com/integrations/recharge) guide to set it up properly before following this guide.
{% endhint %}

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

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

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

```javascript
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.

�

�


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.pickzen.com/integrations/your-website/add-to-cart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.