Quick Tip: Display Product Images in the PrestaShop Ajax Cart

Adding product images in the default Prestashop Ajax cart can be trickier than expected, especially if you want to display them on the fly, without a page refresh. Let’s see how to do it properly in this quick tip!

Introduction: the 3 files we need to edit

You might think that it can be simple enough to add a small thumb for each product in the ajax cart. Opening the tpl file, adding the same code you find in the product list. Done.
Not exactly. As with many other things, Prestashop badly mixes up javascript and html in the cart too, and creates a hybrid to be served on the fly, right after the product is added to the cart, but before a page refresh. The mentioned process might work if you reload the page after adding the product, but otherwise no picture will be shown. We need to edit more than the cart template file. Specifically, 3 files: blockcart.tpl, blockcart-json.tpl and ajax-cart.js.

Before starting, it is vital to avoid any direct modification, so create a folder named blockcart in your theme’s folder, /modules. Copy blockcart.tpl, and the json counterpart inside it. Lastly, inside the theme folder /js, create another blockcart folder, but this time paste ajax-cart.tpl inside.

NOTE: If those files are already in place, use those, instead of overwriting.

The basic markup

Open up blockcart.tpl. It has a really sad structure to deal with, as each product is not entirely separated from the next, if it has attributes. Therefore, I won’t focus on specific styling, but rather on the overall process. Look for the following block of code:

<span class="quantity-formated"><span class="quantity">{$product.cart_quantity}</span>x</span>

We want to insert our image right before this tag. So, before it, add the following:

<span style="display: inline-block; float:left"><img src="{$link->getImageLink($product.legend, $product.id_image, 'small_default')}" alt=""></span>

Note that I’m using inline css to float the image block. I am also assigning an inline-block property to it, so that you can further style it with dimensions at your discretion.

At this point, if you have products in the cart, and refresh the page, the picture will display. However, the float will make it… float – outside of the container. It’s contained inside a dt, and the line right above the one we just added should look like:

<dt id="cart_block_product_{$product.id_product}_{if $product.id_product_attribute}{$product.id_product_attribute}{else}0{/if}_{if $product.id_address_delivery}{$product.id_address_delivery}{else}0{/if}" class="{if $smarty.foreach.myLoop.first}first_item{elseif $smarty.foreach.myLoop.last}last_item{else}item{/if}">

Messy. We need this to clear every float, therefore let’s add a clearfix class to it:

<dt id="cart_block_product_{$product.id_product}_{if $product.id_product_attribute}{$product.id_product_attribute}{else}0{/if}_{if $product.id_address_delivery}{$product.id_address_delivery}{else}0{/if}" class="clearfix {if $smarty.foreach.myLoop.first}first_item{elseif $smarty.foreach.myLoop.last}last_item{else}item{/if}">

The tricky part

You might be happy with this, but most people would like to display pictures as soon as the user adds products to the cart. To do this in the javascript file, we first need the link variable assigned to the json retrieved in the ajax call, as there is no getImageLink function in Prestashop’s Javascript. Open up blockcart-json.tpl and locate the following:

		"price_float":   "{$product.total}",

Right after it, add:

	"imageLink":   "{$link->getImageLink($product.link_rewrite, $product.id_image, 'small_default')}",

This way, we can access the image link from inside the ajax call in the ajax-cart.js file. Open it up, and locate the following (there might be multiple instances of it, this should be about line 445 in Prestashop

	content += '<span class="quantity-formated"><span class="quantity">' + this.quantity + '</span>x</span>';

Right before it, add:

	content += '<span style="display: inline-block; float:left"><img src="'+this.imageLink+'" alt=""></span>';

Again, we need to clear the floats in the previous line, turning this

	var content =  '<dt class="hidden" id="cart_block_product_' + domIdProduct + '">';

Into this

	var content =  '<dt class="clearfix hidden" id="cart_block_product_' + domIdProduct + '">';

Save, remove all products from the cart and refresh the page. Now add a product, it should immediately display its cover!

Looking for quality PrestaShop Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , | Posted under PrestaShop | RSS 2.0

Author Spotlight

Fabio Porta

Fabio Porta

Fabio has been involved in web development and design since 2005, when launched his first website at the age of 16. He’s now highly skilled in both client and server side development, along with design, and since August 2012 runs a successful website about PrestaShop tutorials and Prestashop Modules called Nemo’s Post Scriptum, at http://nemops.com

Leave a Reply

Your email address will not be published. Required fields are marked *

6 − 1 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>