This is an old revision of the document!


type:
snippet
category:
Misc cart and checkout
name:
Product images in the cart
versions:
0.6.0
reference:
http://forum.foxycart.com/comments.php?DiscussionID=1170&page=2
tags:
Advance, Snippets, cart and checkout
date:
2010-06-27

Product images in the cart

While product images have been added to the cart in FoxyCart version 0.7.0+, using the following script can get it going in 0.6.0.

Step 1: Setup your products and images

This script relies on your images being stored in a single folder somewhere on the internet, and the filenames matching the product codes. With that in mind, ensure that all of your products have a code attribute set in their add to cart links or forms, and that you have uploaded matching images to your file storage.

Step 2: Add the javascript

Paste the following code right before the </head> tag of your cart template, updating the variables at the top to match your setup

<script type="text/javascript">
jQuery(document).ready(function() {
  /****** MODIFY THIS STUFF **********/
  var fcCacheUrl = "https://YOURFOXYDOMAIN.foxycart.com/cache.php?url=";
  var imageRootPath = "http://YOURDOMAIN.com/PATH/TO/IMAGES/";
  var imageType = ".jpg";
  var imageWidth = "100"; // in px, just number (eg "100")
  /***********************************/
  // stretch out the header and footer
 jQuery("#fc_cart_head_item").before('<th width="'+imageWidth+'">&nbsp;</th>');
 jQuery(".fc_col1").attr({"colspan":3});
  // get our cart item rows
  var cartRows = jQuery(".fc_cart_item");
  // add tds to each row, assuming each cart has a unique product code and that each image is named after the product code
  for (var i = 0; i < fc_json.products.length; i++) {
    jQuery(jQuery(cartRows[ i ]).children("td")[ 0 ]).before('<td width="'+imageWidth+'"><img src="'+fcCacheUrl+imageRootPath+fc_json.products[ i ].code+imageType+'" width="'+imageWidth+'px" /></td>');
  }
});
</script>

Site Tools