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

This is OBSOLETED Product thumbnail images in the cart have been supported as of FoxyCart v0.7.0. Unless you're updating a very, very old store (in which case we strongly recommend upgrading anyway), you won't need this page at all.

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