This is an old revision of the document!
Table of Contents
- 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
- 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+'"> </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>