Quick Tip: display product images in the Prestashop Ajax Cart

Adding product images in the default Prestashop Ajax cart can be tricker 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 1.5.4.1).

	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 immediatly display its cover!

You like the tuts and want to say "thank you"? Well, you can always feel free to donate:

  • Sarfaraz

    Hi,
    I want to add a scroll bar in my cart. I have added the code to insert scroll bar but the problem is same. It loads only after I refresh the page. What all changes do I need to do. Can anyone help.

  • divyeshp

    Awesome! It’s working like a charm!!

  • Zen

    I also have same issue in 1.5.4.1 after moving to next page image do not show up. any solution.

  • c_majory@yahoo.com

    HI

    Any solution forn 1.5.5 ?

    Thanks

  • http://localhost Mahmut

    “I managed to load the image in the cart but it disappears when you turn to a new page.”
    yes
    I too , having the same problem :(

  • Anna

    This worked for me in PS 1.5.4 but when I updated to 1.5.5, it is not working longer because I think that have been some modifications in 1.5.5, please help how to solve this?

  • http://www.baboony.dk Davallen

    Hi Nemo,

    Great tutorial!
    I tried this and it does not upload it live, it only appears after refresh. Any solution?

    I’m using v1.5.3.1

    • http://www.freshsmoke.dk Davallen

      Can anyone please help with this one? I manged to load the image in the cart but it disappears when you turn to a new page.

      Appreciated!

  • http://privateshareonly Brian

    Hi –

    It seems like this issue has been resolved for 1.5.5, or am I missing something?

    Thanks,

    Brian

  • http://bestmedshop.com/ Robert

    Dear Sir!

    Please help solve one problem that persist not only our shop, but on several others that implement your tip. I think it is common problem for all.

    The name of last added item to the cart trimmed to 1-2 characters. Tooltip when you hover over the name of the product in the basket on 1.5.4.1 also was trimmed. In Prestashop 1.5.5.0 the tooltip no longer be cut off, but the name is truncated anyway.

    If refresh the page in a browser, all is displayed normal. The same thing happens when you add the next item – the name of the previous item is displayed normally. But the name of the newly added item again cut off.

    How to make show an item’s name without truncating from the beginning – without refreshing page? You may see the the problem on or on other site .

    Please help resolve the problem.

  • http://swiftinfotech.com Amol Garud

    Hi,

    Its showing me src=”undefined”

  • http://swiftinfotech.com Amol Garud

    Hi,

    This is very nice article..

    And very very useful for me ..

    But,

    Doesn’t work properly when i am tried it ..may be i am missing something.
    Its displaying broken image in cart.

    Please help me regarding this asap

    Thanks in advance..

  • http://ot.ufc.br/mediawiki/index.php/Usu%C3%A1rio:Rodger4614 wedding ideas

    Hey there, I think your blog might be having browser compatibility issues.
    When I look at your website in Firefox, it looks fine but when opening
    in Internet Explorer, it has some overlapping. I just wanted to give you a
    quick heads up! Other then that, excellent blog!

  • frank

    can you please post some screenshots

  • http://mir-parfuma.com.ua Max

    I found a mistake in the file:
    instead of this:

    getImageLink($product.legend, $product.id_image, ‘small_default’)}” alt=””>

    insert:

    getImageLink($product.link_rewrite, $product.id_image, ‘small_default’)}” alt=””>

  • http://mir-parfuma.com.ua Max

    Hello!

    Thanks for the Tip. It’s really works!!
    But there some trouble with it:

    -when i add product to the cart – picture show up immediately. Then i click to the next page of the site, and then picture gone and show up sign of ”?” instead of that picture in the cart.

    Hope you can help with this problem!

    you can see this on my site http://mir-parfuma.com.ua/prestashop/

    Thank you!

    • grzf

      Hi Max,

      I have a similar problem but in my case nothing else is showed after to go to any other page.

      Can you give me a tip to solve it?

      • grzf

        i found the solution…tks anyway

        • Sebastian

          Hello,

          how were you able to solve it? Trying to figure it out but I am not finding anything…

          Thanks!

          Greetings.

      • http://swiftinfotech.com Amol Garud

        This is very nice article..

        And very very useful for me ..

        But,

        Doesn’t work properly when i am tried it ..may be i am missing something.
        Its displaying broken image in cart.

        Please help me regarding this asap

        Thanks in advance..

Store Top Sales

You like the tuts and want to say "thank you"? Well, you can always feel free to donate: