---
title: Add-To-Cart Function
slug: template-js/add-to-cart-function
docTags: 
createdAt: 2022-09-22T17:38:43.000Z
---



The actual method to add items to the cart/checkout workflow varies by platform. This guide will show you where to locate the Klevu Add-To-Cart function if you should need to make adjustments, or write your own functionality.

## General Use

The Klevu Add-To-Cart button calls the function ***klevu\_addtocart***

:::BlockQuote
 /\*
  \* id  : product ID
  \* url : product page URL
  \* qty : desired quantity (default 1)
  \*/
  function klevu\_addtocart( id, url, qty ) \{   
    // Add-To-Cart logic here
  }
:::

****

**Example**

Simply implement the function ***klevu\_addtocart*** with your own logic of what you would like to happen when a customer clicks on Add-To-Cart.

Enabling the button and/or changing the button text can be done using variables as presented below.

```javascript
<script type="text/javascript">

  klevu_addToCartEnabled = true;      // or false to disable

  klevu_uc_userOptions = {
	 	addToCartButton: 'Add To Bag!'  	// Custom button text
  }
	
  function klevu_addtocart( id, url, qty ) {
    // Add your logic here!
  }
</script>
```



## Klevu Recommendations

The Klevu Recommendations Add-To-Cart function call contains an extra argument `recsKey` to identify the specific recommendations banner from where the click originated.

```javascript
<script type="text/javascript">

  function klevu_addtocart( id, url, qty, recsKey ) {

      if ( recsKey == 'abc-123-xyz-321' ) {
        // Add a specific recommendation logic here!
        
      } else {
        // Add your logic here!
        
      }
    
  }
</script>
```



## Supported Klevu Apps / Extensions

If you are already using Klevu Search via a Klevu App/Extension, you may find that the Add-To-Cart button within the Klevu Templates or Recommendations is already set and operational.

:::hint{type="danger"}
There should be no need to further modify these functions. They are included below for reference.
:::



### Shopify

**Configure in KMC :** Smart Search → Customizations → Add To Cart

**Function location :** *snippets/klevu-add-to-cart*

```javascript
<script type="text/javascript">
    if ('undefined' === typeof klevu_addtocart) {
        function klevu_addtocart( id, url, qty ) {
            if ('undefined' !== typeof klevu_customAddToCart) {
                klevu_customAddToCart(id, url, 1);
            } else {
                var urlProtocol = ( "https:" === document.location.protocol ? "https://" : "http://" );
                var url = urlProtocol + window.location.hostname + '/cart/add?id=' + id + '&quantity=1';
                window.location.assign(url);
            }
        }
    }
</script>
```

**Note:** You can use the provided check for `klevu_customAddToCart()` ( line 5 above ) for custom cart functionality



### BigCommerce

**Configure in KMC :** Smart Search → Customizations → Add To Cart

**Function location :&#x20;***templates/components/klevu/klevu-add-to-cart.html*

```javascript
<script type="text/javascript">
  function klevu_addtocart( id, url, qty ) {
    if( 'undefined' !== typeof klevu_customAddToCart ){
      klevu_customAddToCart( id, url, qty );
    } else{
      var urlProtocol = ( "https:" === document.location.protocol ? "https://" : "http://" );
      var url = urlProtocol + window.location.hostname +'/cart.php?action=add&product_id='+id;
      window.location.assign(url);
    }
}
</script>
```

**Note:** You can use the provided check for `klevu_customAddToCart()` ( line 4 above ) for custom cart functionality



### Magento

**Configure in KMC :** Smart Search → Customizations → Add To Cart

**Enable in Magento Admin :** Stores → Configuration → Klevu → Search Configuration → Add to Cart Button

**Function location :** *vendor/klevu/module-addtocart/view/frontend/templates/klevu/addtocart/index.phtml*

```php
<?php if ($block->isAddtocartEnabled()): ?>
    <script type="text/javascript">
        function klevu_addtocart(id, url, qty) {
            var el = document.createElement("a");
            el.setAttribute(
                "data-post",
                '{' +
                '"action": "<?= $block->escapeUrl($block->getUrl('checkout/cart/add')) ?>",' +
                '"data": {"product":"' + id + '", "qty":"' + qty + '"}' +
                '}'
            );
            el.style.width = "0px !important";
            el.style.height = "0px !important";
            document.body.appendChild(el);
            el.click();
            document.body.removeChild(el);
        }
    </script>
<?php endif; ?>
```

:::hint{type="warning"}
If modifications are required, it is strongly recommended to properly extend the Klevu module to avoid potential conflicts during future updates to the system.
:::



### SalesForce Commerce Cloud

**Configure in KMC :** Smart Search → Customizations → Add To Cart

```javascript
<script type="text/javascript">
function klevu_addtocart( id, url, qty ) {
            $.spinner().start();
            var addToCartUrl = 'https://development-web-demandware.net/on/demandware.store/Sites-xx-Site/default/Cart-AddProduct';
            var form = {
                pid: id,
                quantity: 1
            };
            
            $.ajax({
                url: addToCartUrl,
                method: 'POST',
                data: form,
                success: function (data) {
                    $.spinner().stop();
                },
                error: function () {
                    $.spinner().stop();
                    window.location.replace(url);
                }
            });
        }
</script>
```