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

Follow

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> 
Have more questions? Submit a request

Comments

  • Avatar
    NB

    Hi Ryan, thanks for the above example. Is there a list of all the available methods for the client API that you could post? (create a dedicated page in the KB?)

  • Avatar
    Ryan Olson

    Not yet. We're working on getting some comprehensive documentation worked up for the client API. New methods are getting added pretty much weekly so it's hard to keep up. haha. 

    We're definitely working on getting these articles up though. Just keep an eye on this category  http://support.americommerce.com/forums/21154286-embedded-ecommerce-remote-carting You can click the "Subscribe" link (if you're logged in) up in the right of the category to get email updates whenever we add stuff.

  • Avatar
    Blake Petersen

    To support empty cart states, you can use  http://myamericommerce.com/forums/thread/6014.aspx. It's exact match of the ##SHOPCARTLINE## if you're looking for an Outside-of-AC version of that particular mergecode. 

  • Avatar
    Lisa Adams

    This is all nice, but how do we access the Embed Tools?

  • Avatar
    Blake Petersen

    It's AmeriCart only. If you are on AmeriCommerce, you're SOL.

  • Avatar
    Lisa Adams

    Oh, okay. The top of the page says this applies to Americommerce...

  • Avatar
    Ryan Olson

    It is coming to AmeriCommerce in 2012.6

  • Avatar
    Blake Petersen

    Sweet, looking forward to the release!