How To display Image In Block Cart Module

[areol 0]

Hi i was wondering if any of you knew how to display a product image within the blockcart module. I tired doing the following

Added in blockcart.tpl

getProductLink($product.id_product, $product.link_rewrite, $product.category)}" title="{$product.name|escape:htmlall:'UTF-8'}">

Added in blockcart-json.tpl

'image_dir':     '{$img_prod_dir}',

Added in akaj-cart.js

content += '';

I would greatly appreciate if anyone could help me out. I am extremely new to prestashop and the smarty engine. Infact i am more of a designer in which you could see here
http://designzz.deviantart.com/gallery/

Thanks hope you can help.

[doubleD 79]

Hi.

To blockcart.tpl:

getProductLink($product.id_product, $product.link_rewrite, $product.category)}" title="{$product.name|escape:htmlall:'UTF-8'}">

Now you should see thumb-image after reloading the page.

For Ajax:
To blockcart-json.tpl:

'image_dir':     '{$img_prod_dir}',
'id_image':      '{$product.id_image}',

And to ajax-cart.js:

content += '';

That worked for me.

[retrobou 0]

Hi.

To blockcart.tpl:

getProductLink($product.id_product, $product.link_rewrite, $product.category)}" title="{$product.name|escape:htmlall:'UTF-8'}">

Now you should see thumb-image after reloading the page.

For Ajax:
To blockcart-json.tpl:

'image_dir':     '{$img_prod_dir}',
'id_image':      '{$product.id_image}',

And to ajax-cart.js:

content += '';

That worked for me.

Hello, I have tried this, and if I have 3 items in the cart, it only shows the first item I added with an image, the other images do not show, can you tell me where in the above files you added the changes? Maybe I added them to the wrong place. Thanks in advance for your help!

[frentic 0]

I have managed to add image to the cart, but my problem is that the styling from blockcart.tpl and CSS classes is not used when adding a product?? When i refresh the page everything is back to normal including the added product.

It seems that if I add some CSS directly to the ajax-cart.js file it works, but is this nessesary? Should it not get the CSS styling from the classes?

Thanks for replying

[OuchMyAppendix1 0]

Where are you guys putting the ajax-cart.js code? I can't get the image to show up unless I refresh.

[OuchMyAppendix1 0]

Okay, I figured it out. If it helps anybody else out, the ajax-cart.js code goes in the "//if product is not in the displayed cart, add a new product's line" area ~line 369, underneath

var content =  '';

Also, the code that goes into blockcart.tpl didn't work for me, the code was showing in the front end, I had to use this :

getProductLink($product.id_product, $product.link_rewrite, $product.category)|escape:'htmlall':'UTF-8'}">

That's what is working for me so far, haven't tested in all the browsers or anything (and I'm a designer not a programmer, so I suck with this stuff).

[doubleD 79]

Hello, I have tried this, and if I have 3 items in the cart, it only shows the first item I added with an image, the other images do not show, can you tell me where in the above files you added the changes? Maybe I added them to the wrong place. Thanks in advance for your help!

Hello.
Sorry for so laaaaattttteeeee reply. )
I've attached two tpl files and ajax-js if that issue is still relevant.

blockcart-tpls.zip

ajax-cart.js

[market 1]

This codes work for me
(perstashop 1.4.1)

blockcart.tpl

getImageLink($product.link_rewrite, $product.id_image, 'small')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" width="{$smallSize.width}" height="{$smallSize.height}" />

blockcart-json.tpl

"id_image":     "{$link->getImageLink($product.link_rewrite, $product.id_image, 'small')|addslashes}", 

ajax-cart.js

content += '';

[doubleD 79]

Block Cart with small product images for Prestashop 1.4.7:

 

For blockcart.tpl

 

BEFORE

<span class="quantity-formated">

 

PASTE

<a href="{$link->getProductLink($product.id_product, $product.link_rewrite, $product.category)}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'small')}" alt="" align="left" title="{$product.name|escape:htmlall:'UTF-8'|truncate:20}" /></a>

 

 

For blockcart-json.tpl:

 

BEFORE

"quantity": {$product.cart_quantity},

 

 

PASTE

"id_image": "{$link->getImageLink($product.link_rewrite, $product.id_image, 'small')|addslashes}",

 

 

For ajax-cart.js:

 

AFTER

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

 

AND BEFORE

content += '<span class="quantity-formated">

 

 

PASTE

content += '<a href="' + this.link + '" title="' + this.name + '"><img src="' + this.id_image + '" alt="' + this.name +'"></a>';

 

 

This will display images BEFORE quantity within block cart module.

You can change an image position by pasting the code to the corresponding areas of blockcart.tpl, blockcart-json.tpl and ajax-cart.js

 

Maybe this will be useful to someone else

[gwenn 2]

Thanks you doubleD for you response, it's work great !

Edited June 5, 2012 by gwenn (see edit history)

[Marius05 9]

Hi!

 

I made this modification but image apear if i refrash the browser. How ken i fix that ?

[steve_c 18]

Hi this works great for new blockcart2 but I am having the same problem as above.

 

The image only appears when you navigate away from the page or refresh. Is there any way to fix this?

Thanks !

[steve_c 18]

To show an example my page is here.

[doubleD 79]

Hi this works great for new blockcart2 but I am having the same problem as above.

 

The image only appears when you navigate away from the page or refresh. Is there any way to fix this?

Thanks !

Hi,

I think you should make changes to yourtheme/js/modules/blockcart2/ajax-cart.js

[Marius05 9]

In ajax-cart.js after:

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

 

put:

content += '<a href="' + this.link + '" title="' + this.name + '"><img src="' + this.id_image + '" alt="' + this.name +'"></a>';

[steve_c 18]

Hi DD / Marius

Yes I've just done that and I have exactly the same problem.

Thanks

[Marius05 9]

Have you clear the cache?

[steve_c 18]

Marius my development site does not use cache and

Smart cache for JavaScript = Keep JavaScript as original

Thanks

Edited August 14, 2012 by steve_c (see edit history)

[Marius05 9]

If you have in yor's theme folder the folder modules and inside have blockcart, remove the folder blockcart from there.

Edited August 14, 2012 by Marius05 (see edit history)

[steve_c 18]

Yep still no joy. Exactly the same problem.

I'm not sure it's even possible. I've seen this problem with other Ajax carts too.

 

I would add that the new, added item has none of the CSS of the items above so not sure what's going on there.

[steve_c 18]

I would like to add that I have two places for the JS.

 

One is in

themes/theme256/js/modules/blockcart2/ajax-cart.js

the other:

modules/blockcart2/ajax-cart.js

Edited August 14, 2012 by steve_c (see edit history)

[doubleD 79]

Yep still no joy. Exactly the same problem.

I'm not sure it's even possible. I've seen this problem with other Ajax carts too.

 

I would add that the new, added item has none of the CSS of the items above so not sure what's going on there.

 

I can see an image now, but with the wrong url to test/undefined

[Marius05 9]

1. Remove the blockcart from templetefolder/modules

2. If you have in yors root/modules/blockcart and /blockcart2 remove(delete) the module cart you dont use.

3. Put in the ajax-cart.js from the root/modules/blockcart2 the line:

 

content += '<a href="' + this.link + '" title="' + this.name + '"><img src="' + this.id_image + '" alt="' + this.name +'"></a>';

 

after

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

 

4. Reinstal the blockcart2

[Marius05 9]

Remove the themes/theme256/js/modules/blockcart2/ajax-cart.js

[steve_c 18]

I am now getting an error when I try to add an item to my cart.

 

What about: /httpdocs/test/themes/theme256/js/modules

Should I delete this folder?

 

Remove the themes/theme256/js/modules/blockcart2/ajax-cart.js

 

OK I have deleted that and now it doesn't work at all

[Marius05 9]

remove the /httpdocs/test/themes/theme256/js/modules/blockcar2

[steve_c 18]

OK I am going to start from scratch. Unfortunately I am using the setup from the PrestaShop 1.5 theme for 1.4x

 

Can you give me the required files I need and I will delete everything to do with blockcart (all)

 

Thanks

[doubleD 79]

OK I am going to start from scratch. Unfortunately I am using the setup from the PrestaShop 1.5 theme for 1.4x

 

Can you give me the required files I need and I will delete everything to do with blockcart (all)

 

Thanks

You mean this theme http://addons.prestashop.com/en/neutral/3337-prestashop-template-15.html ?

[Marius05 9]

Uninstal blockcart2 , delete the folder blockcart2 from yor root/modules/, install the blockcart from atach.

blockcart.zip

[steve_c 18]

OK I have done that and now the CSS is completely off.

The cart is displayed all of the time.

I have placed it above "User info block v0.1" in "Top of Pages"

Thanks for helping

Edited August 14, 2012 by steve_c (see edit history)

[Marius05 9]

Repalce the css code with yors

[steve_c 18]

Hi I have not made any CSS. Before the menu was auto hiding and now it's displayed all of the time. I have started from scratch no CSS.

Thanks

[Marius05 9]

Ok. I hope I helped.

[steve_c 18]

Hi I'm thinking maybe it is not picking up the css in the module folder?

 

It's not working at all now so looks like I'm back to square one.

 

If anyone can shed any light on the subject please do so

Thanks in advance

[Marius05 9]

Where are you hook the module ?

[steve_c 18]

Top of the page.

It doesn't look like the.js file is being referenced. Something is definitely not right.

[doubleD 79]

Hi I'm thinking maybe it is not picking up the css in the module folder?

 

It's not working at all now so looks like I'm back to square one.

 

If anyone can shed any light on the subject please do so

Thanks in advance

 

Check if Block Cart Ajax is on (Modules > Block Cart > Settings)

 

And, please, restore your JS files (why to delete everything? I can not see ajax-cart.js is loaded on your web site

Edited August 14, 2012 by doubleD (see edit history)

[Marius05 9]

Unhook from top and hook to right column

[Marius05 9]

Now edit yors css how do you like

[steve_c 18]

OK I am going to start again.

 

1) Delete all cart modules

2) Copy the folder you attached called "blockcart" into my modules directory

3) Install the module

4) Configure. Ajax cart is ON

5) Transplant the module to "Top of pages"

 

OK now it works (with your styling I believe). I can sort the styling out later.

 

BUT the problem is still there regarding the image.

 

You can try to add a few items to the cart. It definitely doesn't work

 

Thanks again

 

Unhook from top and hook to right column

 

I do not have right columns in my site

 

The module is in "Top of pages" "Header of pages" and "Right column blocks" - is this a problem?

Edited August 14, 2012 by steve_c (see edit history)

[doubleD 79]

OK I am going to start again.

 

1) Delete all cart modules

2) Copy the folder you attached called "blockcart" into my modules directory

3) Install the module

4) Configure. Ajax cart is ON

5) Transplant the module to "Top of pages"

 

OK now it works (with your styling I believe). I can sort the styling out later.

 

BUT the problem is still there regarding the image.

 

You can try to add a few items to the cart. It definitely doesn't work

 

Thanks again

 

 

 

I do not have right columns in my site

 

The module is in "Top of pages" "Header of pages" and "Right column blocks" - is this a problem?

 

Same problem, link to the image is not right /test/undefined ...

 

Edit: Images are displayed )

Edited August 14, 2012 by doubleD (see edit history)

[steve_c 18]

It seems to be working now. Not sure what's happened to my CSS. Everything is stepped but looking good.

Just have to sort the styling out...

[Marius05 9]

Yor's shopping cart now is lok ok. Just resize the images .... css settings.

[steve_c 18]

Yes thanks very much for your time

[Marius05 9]

With welcome!

[steve_c 18]

Hi all I have one more small niggle.

 

When I add an item from my shop to my new cart - it appears but the name is truncated a lot more than the other existing items in the cart. I was pretty sure I changed this value but now can't find it.

 

Any ideas?

 

Thanks in advance

 

site here

[ccb78 0]

Hello you all. I think I've found a way to display images in blockcart2 without removing anything at all, and it seems it works for me.

 

Following doubleD's directions, I've made these changes:

 

1.- In MODULES - BLOCKCART2 - blockcart.tpl, and in THEMES - MODULES - BLOCKCART2 - blockcart.tpl:

 

BEFORE

<span class="quantity-formated">

 

PASTE

<a href="{$link->getProductLink($product.id_product, $product.link_rewrite, $product.category)}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'small')}" alt="" align="left" title="{$product.name|escape:htmlall:'UTF-8'|truncate:20}" /></a>

 

 

2.- In THEMES - MODULES - BLOCKCART2 - ajax-cart.js, and in THEMES - JS - MODULES - BLOCKCART2 - ajax-cart.js:

 

AFTER

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

 

AND BEFORE

content += '<span class="quantity-formated">

 

 

PASTE

content += '<a href="' + this.link + '" title="' + this.name + '"><img src="' + this.id_image + '" alt="' + this.name +'"></a>';

 

3.- In MODULES - BLOCKCART2 - blockcart-json.tpl, and in MODULES - BLOCKCART - blockcart-json.tpl:

 

BEFORE

"quantity": {$product.cart_quantity},

 

PASTE

"id_image": "{$link->getImageLink($product.link_rewrite, $product.id_image, 'small')|addslashes}",

 

I don't know the reason why, but although blockcart module isn't enabled you also must make the changes in its blockcart-json.tpl archive.

 

Please, if you try this tell if it works right for you.

 

steve_c, if I understand you, to let the truncated name of the product display at blockcart2 without refreshing the page you must do the changes at these all archives (doing that it works for me):

 

- MODULES - BLOCKCART2 - blockcart.tpl

- THEMES - MODULES - BLOCKCART2 - blockcart.tpl

- THEMES - MODULES - BLOCKCART2 - ajax-cart.js

- THEMES - JS - MODULES - BLOCKCART2 - ajax-cart.js

 

I really hope it's useful for you!! And thanks to doubleD for clarifying the way.

 

(I edit... Sorry!! the code above wasn't right. I've already changed it).

Edited September 30, 2012 by ccb78 (see edit history)

[Marius05 9]

Download blockcart archive from this post (page 2). Is work fine. All you need is custom css how do you like it.

[Repacheco81 1]

this work for me, thanks

 

PrestaShop™ 1.4.5.1

 

Block Cart with small product images for Prestashop 1.4.7:

 

For blockcart.tpl

 

BEFORE

<span class="quantity-formated">

 

PASTE

<a href="{$link->getProductLink($product.id_product, $product.link_rewrite, $product.category)}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'small')}" alt="" align="left" title="{$product.name|escape:htmlall:'UTF-8'|truncate:20}" /></a>

 

 

For blockcart-json.tpl:

 

BEFORE

"quantity": {$product.cart_quantity},

 

 

PASTE

"id_image": "{$link->getImageLink($product.link_rewrite, $product.id_image, 'small')|addslashes}",

 

 

For ajax-cart.js:

 

AFTER

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

 

AND BEFORE

content += '<span class="quantity-formated">

 

 

PASTE

content += '<a href="' + this.link + '" title="' + this.name + '"><img src="' + this.id_image + '" alt="' + this.name +'"></a>';

 

 

This will display images BEFORE quantity within block cart module.

You can change an image position by pasting the code to the corresponding areas of blockcart.tpl, blockcart-json.tpl and ajax-cart.js

 

Maybe this will be useful to someone else

[tebdilikiyafet 8]

Is this method valid for PS 1.5.0 or only 1.4.x ?

[doubleD 79]

Is this method valid for PS 1.5.0 or only 1.4.x ?

Haven't tried for 1.5 yet

Should work, i guess...

[tebdilikiyafet 8]

I tried but it didn't work until refresh the page. If I refresh the page, images appearing. I could done it for 1.4.9 but not 1.5.0.

 

As I read a theme/js/module folder should deleteIete. I checked for themes/js/modules/blockcart folder, but there is no folder like this.

 

Solved look at comment #53

Edited September 17, 2012 by tebdilikiyafet (see edit history)

[tebdilikiyafet 8]

Ok it worked. The trick of this modification is uninstall and install. First uninstall the block cart module. Then make the changes on folder as state http://www.prestashop.com/forums/index.php?/topic/42926-how-to-display-image-in-block-cart-module/page__view__findpost__p__787208 and than install the module again. For PS 1.5.0 you don't need any changes on blockcart-json.tpl. It comes how we want.

Edited October 11, 2012 by tebdilikiyafet (see edit history)

[kuko_ 1]

you need add in the blockcart-jason.tpl the next line

 

after: "id": {$product.id_product},

 

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

 

choose any word you prefer for var imageprod, and after continue with ajax-cart.js and change this.id_image by imageprod (from example of Marius)

 

sorry for my english (from spain)

Edited November 2, 2012 by kuko_ (see edit history)

[steve_c 18]

OK I have a problem with this in Prestashop 1.5.2

 

My client's site is here

 

No matter what changes I make to ajax-cart.js none of them are ever reflected in the site.

 

If you add a product to the cart, the image doesn't appear and the name is truncated, even though I have edited ajax-cart.js

 

Any help appreciated.

 

Thanks

[doubleD 79]

OK I have a problem with this in Prestashop 1.5.2

 

My client's site is here

 

No matter what changes I make to ajax-cart.js none of them are ever reflected in the site.

 

If you add a product to the cart, the image doesn't appear and the name is truncated, even though I have edited ajax-cart.js

 

Any help appreciated.

 

Thanks

I can not see the changes in ajax-cart.js

http://malfordoflondon.com/modules/blockcart/ajax-cart.js

 

There should be a line

content += '<a href="' + this.link + '" title="' + this.name + '"><img src="' + this.id_image + '" alt="' + this.name +'"></a>';

[doubleD 79]

No matter what changes I make to ajax-cart.js none of them are ever reflected in the site.

If you make changes to the files:

Make sure force compile is 'ON'

and Cache is 'OFF'

when testing the changes.

Edited November 27, 2012 by doubleD (see edit history)

[Soumya Swain 0]

hi i am using PrestaShop 1.5.5.0 ,thumbnail image is added in the dropdown cart block first time,but when i refresh the page thumbnail image is not visible.plz.help me