Why is Add-to-cart functionality not working?

If you are already using Klevu Search via our Magento, Shopify, or BigCommerce App, you may find that the Add to Cart button within our Klevu Themes or Recommendations already works.

If the add-to-cart functionality is not working, you may need to take an additional step to implement this feature for your respective platform.

Shopify

The logic for adding an item to the cart in Shopify is quite simple. Add this to any pages of your Shopify store where a Klevu Add to Cart button might appear, ideally in your theme.liquid:

<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/add?id='+id+'&quantity='+qty;
window.location.assign(url);
}
}
</script>

Magento

The URL to add a product to the cart must be generated by Magento, as it contains protection against cross site scripting (XSS), so you will need to implement one JavaScript function within your Magento theme.

You can find our implementation of this logic here.

BigCommerce

The logic for adding an item to the cart in BigCommerce is quite simple. Add this to any pages of your BigCommerce store where a Klevu Add to Cart button might appear, ideally in your base.html:

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

SalesForce Commerce Cloud

The logic for adding an item to the cart in SFCC is quite simple. Add this to any pages of your SFCC store where a Klevu Add to Cart button might appear.

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

Other Platforms

For any other platforms, 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:

<script type="text/javascript">
  function klevu_addtocart( id, url, qty ) {
    // Add your logic here!
  }
</script>