How to show cart count, subtotal and contents on an external site?


Overview

Adding the number of items in a cart, contents of a cart and other things about the cart to a remote website is an incredible way to tie your cart to your website for an immersive experience for the customer.  Our embedded commerce tools allow this easily and can be customized greatly.

 

Embed Tools

The easiest way to do this is to use our embed tools which generates the code to slap on your remote site.  See below:

embedded_cart.png

 

How it works

The code the embed tools create simply uses the Spark Pay online stores client API and the AC.cart object to get the current count of items as well as the subtotal in your cart. 

As with any work with the Client API you will need to include the Client API script reference (if you don't already have it on the page)

<script src="/store/inc/clientapi/ac-client-api.js"></script>

 

Then place an html snippet similar to the following where you want the Cart display to show on your site.

  <div class="ShopCartLine">
    <span class="CartItemsCount"></spanitem(s) - <span class="CartSubTotal">$</span>
  </div>

 

Then place the following script after the html.

<script>
    //declared outside of the AC.cart scope
    var oCart;
    
    //set the response to oCart
    AC.cart.get(function(response)
oCart response
//set the count and subtotal to the values returned.
$(".CartItemsCount").htmloCart.cart.totalItemCount );
$(".CartSubTotal").html"$" oCart.cart.subtotal );
});
</script> 
How helpful was this article?
Number of questions: 0