Foxy Cart implements the JSONP protocol which is a way to allow remote sites to provide your site with JSON data (data in javascript format). If you want to create a custom cart you can access JSONP and manipulate it in any way. So, in this tutorial we are going to create a very fancy cart using the FoxyCart JSONP API. This is the screenshot of the completed cart:

In order to have this cart, you need to download the cart icon , place it in your base http server directory in a folder called images and name the file as cart.jpg.

Next, you need to add these lines in the head section of your html page, just after your foxy cart includes. Also, remember to replace “example.foxycart.com” with your own store subdomain provided by foxy cart .

<script type="text/javascript" charset="utf-8">
var FoxyDomain = "example.foxycart.com/"; // replace this with your store subdomain
var timer = 0;
// this function hides the cart in a very nice way
function json_cart_fade_out(){
     if (timer != 0){
          clearTimeout(timer);
          timer = 0;
     }
     $("#fc_cart").animate({
      top: 0 - $("#fc_cart").height(),
      opacity: 0
      }, 1000);
}
$(document).ready(function(){
   // shows the cart when the mouse is positioned on an specific link
   $(".fc_link").mouseover(function(){
   if (timer!= 0){
        clearTimeout(timer);
        timer = 0;
   }
 
   $("#fc_cart").animate({
             opacity: '.99',
             top: '0px'
       }, 1000);
   timer = setTimeout(function(){
      json_cart_fade_out();
   }, 2500);
   // if the user is looking/using the cart don't hide it
   $("#fc_cart").hover(function(){
      clearTimeout(timer);
      timer = 0;
   }, function(){
      timer = setTimeout(function(){
        json_cart_fade_out();
      }, 1000);
   });
 
   });
 
});
 
function fc_PreProcess() {
        // do something here before opening the cart... maybe some form error checking?
        // if you don't want the cart to open, say for example if there were some data validation problems you
        // want your customer to fix, then return false from this function instead of true.
        return true;
}
 
function fc_BuildFoxyCart() {
        fc_FoxyCart = "";
        for (i=0;i<fc_json.products.length;i++) {
                // BEGIN DO NOT EDIT
                fc_BuildFoxyCartRow(fc_json.products[i].name,fc_json.products[i].code,fc_json.products[i].options,fc_json.products[i].quantity,fc_json.products[i].price_each,fc_json.products[i].price);
        	// END DO NOT EDIT
        }
 
        // fc_FoxyCart is a javascript variable that now holds your shopping cart data
 
        // if you have some products in your cart, why not display it?
        if (fc_json.products.length > 0) {
                $("#fc_cart #cart_content").html(fc_FoxyCart);
        } else {
                $("#fc_cart #cart_content").html("");
        }
}
// This function is called by fc_BuildFoxyCart() for each product in your cart.
// Feel free to edit this function as needed to display each row of your cart.
function fc_BuildFoxyCartRow(fc_name,fc_code,fc_options,fc_quantity,fc_price_each,fc_price) {
        fc_FoxyCart += "<tr>";
        fc_FoxyCart += "<td>" + fc_name + "</td>";
//      fc_FoxyCart += "<td>" + fc_options + "</td>";
//      fc_FoxyCart += "<td>" + fc_code + "</td>";
        fc_FoxyCart += "<td class=\"right-align\">" + fc_quantity + "</td>";
//      fc_FoxyCart += "<td>" + fc_price_each + "</td>";
        fc_FoxyCart += "<td class=\"right-align\">" + fc_price.toFixed(2) + "</td>";
        fc_FoxyCart += "</tr>";
}
</script>

The above code shows the cart when you move the mouse over an specific link. So, you can put the following link anywhere in your html to show the cart:

<a href="#" class="fc_link"><strong>Your Cart</strong></a>

Now we need to place the cart definitions and styles. Copy these style definitions somewhere inside the body tag of your your html file. If you understand CSS here is where you can customize the cart.

<style>
#fc_cart{
    background-color:#333333;
    color: #FFFFFF;
    position:absolute; /* don't edit this line */
    top:0px; /* don't edit this line */
    opacity:0; /* don't edit this line */
    top:-500px; /* don't edit this line */
    padding: 5px;
    width: 15em;
 
}
#fc_cart h2{
    color: #FF6600;
}
.fc_clear{
    clear: both;
}
#fc_cart img{
    float:left;
    margin: 5px;
}
#fc_cart table{
    border-bottom: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    width: 100%;
    font-size: 80%;
    margin-bottom: 5px;
}
#fc_edit_link{
    float:left;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 3px;
    margin: 2px;
    font-size: 80%;
}
#fc_checkout_link{
    float:right;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 3px;
    margin: 2px;
    font-size: 80%;
}
.right-align{
   text-align: right;
}
</style>

And now, let's create the cart itself. Remember that this code is going to place the cart in the same horizontal position you put the above html but the vertical position of the cart is going to be the top of the page. Again, remember to replace “example.foxycart.com” with your own store subdomain provided by foxy cart.

<div id="fc_cart">
<img src="images/cart.jpg" alt="your cart"/>
<h2>Your Cart</h2>
<div class="fc_clear"></div>
<table>
<thead>
<th>item</th>
<th>qty</th>
<th>price</th>
</thead>
<tbody id="cart_content">
</tbody>
</table>
<a href="https://example.foxycart.com/cart?cart=view" id="fc_edit_link">Edit Cart</a>
<a href="https://example.foxycart.com/cart?cart=checkout" id="fc_checkout_link">Check Out</a>
<div class="fc_clear"></div>
</div>

And, that's it now you should have a fancy cart in your website thanks to the Foxy Cart JSONP API. If you need more information about the JSON data provided by Foxy Cart take a look at json