How To
Add-To-Cart Function

12min
﻿
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
 /*
  * 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.
JS
|
<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>
<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.
JS
|
<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>
<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.
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
JS
|
<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>
<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 : templates/components/klevu/klevu-add-to-cart.html
JS
|
<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>
<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; ?>
<?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; ?>
﻿
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
JS
|
<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>
<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>
﻿
﻿
Updated 11 Jul 2023
Did this page help you?
Add Pagination To URL
Customer Groups
Docs powered by
Archbee
TABLE OF CONTENTS
General Use
Klevu Recommendations
Supported Klevu Apps / Extensions
Shopify
BigCommerce
Magento
SalesForce Commerce Cloud