Jump to content
areol

How To display Image In Block Cart Module

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 += '';

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 3

Share this post


Link to post
Share on other sites

Hi!

 

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

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>';

Share this post


Link to post
Share on other sites

Hi DD / Marius

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

Thanks

Share this post


Link to post
Share on other sites

Marius my development site does not use cache and

Smart cache for JavaScript = Keep JavaScript as original

Thanks

Edited by steve_c (see edit history)

Share this post


Link to post
Share on other sites

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

Edited by Marius05 (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by steve_c (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by steve_c (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Top of the page.

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

Share this post


Link to post
Share on other sites

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 by doubleD (see edit history)

Share this post


Link to post
Share on other sites

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 by steve_c (see edit history)

Share this post


Link to post
Share on other sites

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 by doubleD (see edit history)

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by ccb78 (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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 by tebdilikiyafet (see edit history)

Share this post


Link to post
Share on other sites

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 by tebdilikiyafet (see edit history)

Share this post


Link to post
Share on other sites

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 by kuko_ (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>';

Share this post


Link to post
Share on other sites

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 by doubleD (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More