website logo
Product FeedCommunity Forum
API Docs
Template JS
Headless SDK
Navigate through spaces
API Docs
Template JS
Headless SDK
⌘K
Introduction
Getting Started
Quickstart : Smart Search
Quickstart : Smart Category Merchandising
Quickstart : Smart Recommendations
Apps/Plug-ins
Guide
Structure
Configuration
JS Library
Versioning
Template Reference
Build UI
Custom Overrides
Recommendations Webhooks
Styling CSS
Analytics/Tracking
How To
Add Filters To URL
Add Pagination To URL
Add-To-Cart Function
Customer Groups
Infinite Scroll Results
Magento B2B MSI
Ratings / Reviews
SortBy Options
Docs powered by archbee 
12min

Add-To-Cart Function



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>




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>




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>


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>


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; ?>


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>




Updated 03 Mar 2023
Did this page help you?
Yes
No
UP NEXT
Customer Groups
Docs powered by archbee 
TABLE OF CONTENTS
General Use
Klevu Recommendations
Supported Klevu Apps / Extensions
Shopify
BigCommerce
Magento
SalesForce Commerce Cloud