rollover image in product list

[persephonevintage]

i'm interested in creating rollover images in my product list. so in essence, i want my product image to change when my mouse moves over the image.

and example of this http://www.lafraise.com/Index/index/style/41

does anyone know how to do this? i've found a tutorial on how to do this (http://www.tutorials007.com/css-rollover-effect/) but i'm not sure how to integrate it into prestashop. i appreciate your input!

[lewisdonovan]

I'd love to do something similar also, anyone had any luck?

[vivek tripathi]

Hi All
I have made change in core file
to acheive functionality of rollover image on hover You have two option
either
copy paste following codes in their pages marked bellow or
copy paste file i have attached with this post.
This is also applicable on prestashop version 1.3.1+ if you want to change below 1.4version it is advised to
open each file and copy paste code in respective file marked below

I found that some of code parsed by editor so I have written all Necessary code in attached files

Note1- you have to add at least two image of each product

Note2- Please go through the readme-imp.txt in attached zip file for clear instruction
for you reffrence goto www.miquella.com->shop

rollover.zip

[lewisdonovan]

Brilliant. This code was 100% what I needed. Thank you Vivek.

[arjundass]

Thanks a lot ,, Vivek.

 

Perfect code...

 

Need your bit help.. how could i use this rollover feature on homefeatured module..

 

Kindly help ..plz...

[aliaspt]

Is there a way to zoom the images in the product list on roll-over? I don't need it to change but just enlarge so that more details are visible.

[webbuster]

vivek i tried your solution in PrestaShop 1.4.6.2, I manually added the code but not work

can someone help me to do?

[gila]

hi, i tried your solution but in product-list.tpl seems {$productimg} array is null,

 

i'm sure i followed all the steps you suggested.

 

i use 1.4.7

 

any idea?

 

thanks

[vivek tripathi]

Hi ,

I found a very good module on following http://www.marghoobsuleman.com/prestashop-modules/prestashop-modules-image-enlarger

I think it will meet your requirement

 

 

 

Is there a way to zoom the images in the product list on roll-over? I don't need it to change but just enlarge so that more details are visible.

[dixie]

Check out the following website: magictoolbox.com They have all kinds of solutions for your images. Free demo downloads, reasonable prices, very professional. You can try before you buy!

 

Good Luck!

Dixie in the USA

[saracoratello]

Yes, this is exactly what i need, but unfortunately it is not working in my PrestaShop - it is not showing any images. i Have PrestaShop™ 1.4.7.0. Does any one know how can i do this work ?

 

Or just show second image on this list - i will hande roll over effect, just need to display more than one picture on product list.

[LEDestock]

It doesnt work either : /

[riccardo90]

hi all, http://www.yoox.com/YOOX/CALZATURE/donna/primavera-estate/searchResult/dept/women/gender/D/c/cat_44/tskay/6383154F/ipp/40/toll/P - As you can see from the link, going to hover over the image emerge in other productcombinations - you know a module that does this or if you can make a change to theimages enlarges. thanks

[CVoicu]

Hi all and thank you vivek tripathi for your share.

For those of you who get productimg a blank array (meaning that the script is showing images), change $cat_products from the script that goes inside the categorycontroller.php with : $this->cat_products .Just like this

 

 for($i=0;$i<count($cat_products);$i++)
  {
   $image_array[$i]= $this->category->getProductsimg($cat_products[$i]['id_product']);
  }

 

with this one

 

  for($i=0;$i<count($this->cat_products);$i++)
          {
      	 $image_array[$i]= $this->category->getProductsimg($this->cat_products[$i]['id_product']);
          }

 

And I advice you to add this code inside a controller/class that you create in the folder override.

Hope it helps!

[roma2509]

Hello. Can some body help me please to configur this modul for PrestaShop™ 1.4.7.3

[B. Szakacs]

CVoicu's solution above works for newest Presta (1.4.8.2) - Thanks M8!

[Daniel - PrestaBR]

Thanks, vivek tripathi and CVoicu

 

That works nice!

 

DGV

[fogolin]

Hi there!

 

Well, I'm having a hard time trying to figure this out... I got Vivek Tripathi files and, as I'm using PS 1.4.8.2, I created override files, with the functions he explain in the .txt file, attached in the .zip. Although I'm copying the exact code (except from the added info from @CVoicu, right above) , I can't manage to make it work: if any of these two files (classes/Category.php | controllers/CategoryController.php) is added in the override folder, the script stop working. Once I take them off, the shop gets back on foot.

 

In the Category.php file, I added the following after the function GetCategoryInformation, in line 1088:

public function getProductsimg($product_id)
{
 $sql = 'SELECT * from `'._DB_PREFIX_.'image` where id_product="'.$product_id.'" order by `position` limit 0,2';
 $result = Db::getInstance()->ExecuteS($sql);
 return $result;
}

 

In CategoryController.php, after line 132, I added the following:

$image_array=array();
for($i=0;$i<count($this->cat_products);$i++)
	{
  $image_array[$i]= $this->category->getProductsimg($this->cat_products[$i]['id_product']);
	}
self::$smarty->assign('productimg',(isset($image_array) AND $image_array) ? $image_array : NULL);

 

And in product-list.tpl, I added, on th top of the code, line 26, the following:

{literal}
 <script type="text/javascript">
  $(document).ready(function(){
	 $(".1").hide();
	 $("img.0").mouseover(function(){
	 if ( $(this).next("img").length > 0 ) {
		$(this).next("img").show();
		$(this).hide();
	}
});
 $(".1").mouseout(function(){
  $(this).hide();
  $(this).prev("img").show();
});
});
</script>
{/literal}

 

And substituted the image tag in the <li> for the following:

{foreach from=$productimg key=key1 item=pimage}
{foreach from=$pimage key=key2 item=pimage2}
	{if $product.id_product==$pimage2.id_product}
		<img src="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$pimage2.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} class="{$key2}" />
	{/if}
{/foreach}
{/foreach}

 

All as said in the .txt... I'm attaching the files here, so you can see if there's something wrong. Can anyone help me? B. Szakacs or would you send me the files you used to make it work?

override.zip

Edited August 5, 2012 by fogolin (see edit history)

[Daniel - PrestaBR]

Here it goes the files I used for PrestaShop 1.4.8.2 using override.

 

Good luck.

 

DGV

PrestaBR

rollover.zip

[fogolin]

Valeu , works like a charm!

 

However, when I tried to apply the same custom code to the Home Featured module template, homefeatured.tpl, it doesn't work. Anyone got something on it?

 

Thanks for the help

 

-------------------------

 

Sorry people, shoud've had looked harder in the forum posts. Here:

 

http://www.prestashop.com/forums/topic/150483-home-featured-product-rollover-images/

 

Works great on PS 1.4.8.2

 

Thanks again!

Edited August 6, 2012 by fogolin (see edit history)

[ask]

Does anyone know if this works for version 1.4.8.3? I copied the rollover files but nothing has changed.

[fernandokerber]

Does anyone know if this works for version 1.4.8.3? I copied the rollover files but nothing has changed.

 

The solution in post #19 is working like a charm!

 

 

http://www.prestashop.com/forums/index.php?/topic/96085-rollover-image-in-product-list/page__view__findpost__p__895767

[sndreoe]

I'm not very well learned in javascript, so I need a bit of help. I have a random product image and link that appears on a page of my site every time the page is refreshed.

 

my response

[niwlf]

HI! I'm using PS.1.4.7.3 and it's working fine on product list, but it doesn't show images on search, the same when using Layered navigation, help please, where is the problem?

 

Edit: I use Override files from #19.

Edited September 2, 2012 by niwlf (see edit history)

[dstanimirov]

I worked a lot, about three days, nothing, nothing, but I found a new solution

In my situation this is wrong /from rollover.zip on post 3/ :

 

 

Change 2 { code to add two image }

 

in themes-> product-list.tpl

 

replace code

 

<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} /></a>

 

 

with the code

 

{**************************** this is custom code bock to change image on hover******************************}

without this code

{foreach from=$products item=product name=products}

<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">

<div class="center_block">

 

 

I use only this code :

<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">

{foreach from=$productimg key=key1 item=pimage}

{foreach from=$pimage key=key2 item=pimage2}

{if $product.id_product==$pimage2.id_product}

but nothing work without this here:

{assign var="imgvals" value="`$product.id_product`-`$pimage2.id_image`"}

 

 

 

And when I remove the next text in red and I put / src="{$link->getImageLink($product.link_rewrite, $imgvals, 'large')}"

EVERYTHING WORKING FINE

 

 

<img src="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$pimage2.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} class="{$key2}" />

{/if}

{/foreach}

{/foreach}

</a>

{**************************** this is custom code bock to change image on hover******************************}

 

 

 

THE FINAL CODE :

 

<p>

<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" >

 

{foreach from=$productimg key=key1 item=pimage}

{foreach from=$pimage key=key2 item=pimage2}

{if $product.id_product==$pimage2.id_product}

{assign var="imgvals" value="`$product.id_product`-`$pimage2.id_image`"}

 

<img src="{$link->getImageLink($product.link_rewrite, $imgvals, 'large')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} class="{$key2}" title="{displayWtPrice p=$product.price}"/>

{/if}

{/foreach}

{/foreach}

 

</a>

</p>

 

 

YOU CAN LOOK HERE:

http://stanimirovi.com/presta_ver2/category.php?id_category=6

Edited September 4, 2012 by dstanimirov (see edit history)

[dstanimirov]

HI! I'm using PS.1.4.7.3 and it's working fine on product list, but it doesn't show images on search, the same when using Layered navigation, help please, where is the problem?

 

Edit: I use Override files from #19.

for me too, now look at this decision

[fogolin]

for me too, now look at this decision

 

You need to make the same modifications that are being made on the product-list.tpl in all other files that you want it to work. For example, I used it on the front page, on the "featured products" plugin, so I changed the template for that plugin too...

[dstanimirov]

You need to make the same modifications that are being made on the product-list.tpl in all other files that you want it to work. For example, I used it on the front page, on the "featured products" plugin, so I changed the template for that plugin too...

 

 

I can not find who is the file, may be product-sort

because , the script working fine, but when i try to sort products from the drop down menu , they realy sort..

but no pictures

after the address in address bar I have this two last symbols:

http://stanimirovi.com/presta_ver2/category.php?id_category=2#/'>http://stanimirovi.com/presta_ver2/category.php?id_category=2#/

normaly is

http://stanimirovi.com/presta_ver2/category.php?id_category=2

Edited September 5, 2012 by dstanimirov (see edit history)

[niwlf]

I can not find who is the file, may be product-sort

because , the script working fine, but when i try to sort products from the drop down menu , they realy sort..

but no pictures

after the address in address bar I have this two last symbols:

http://stanimirovi.c...id_category=2#/

normaly is

http://stanimirovi.c...p?id_category=2

 

The same for me in search and layered navigation. It only works in a category. I think it's a problem with category or classess but i don't know to much about it.

[CVoicu]

I can not find who is the file, may be product-sort

because , the script working fine, but when i try to sort products from the drop down menu , they realy sort..

but no pictures

after the address in address bar I have this two last symbols:

http://stanimirovi.c...id_category=2#/

normaly is

http://stanimirovi.c...p?id_category=2

dstanimirov your theme uses ajax to sort the products and also for the layered navigation so you should check the category controller to see what smarty variables it gives you . You can also turn show errors to on (in config file) to see if you get any errors.

[niwlf]

I don't understand controllers, but i see on categorycontroller.php attached bellow it's getting an array for each image on each product of this category, but if we are actually on a category or a layered list or search and listing their products, there isn't a simplest way to get each image for each product? If first image ($product.id_image) is for example /img/p/1-107.jpg can i get next /img/p/1-108.jpg other way? Excuse me for my english but i I'm getting crazy trying to get it.

[kalakrima]

Hello everybody,

 

just want to say that it's works great for me, but I have a little issue here and I don't know how to fiw it. I spent hours of searching on web, but I'm a beginner so I didn't find a solution.

 

So, if somebody can help me It will be great.

 

My problem :

 

When I display all categories, without products I have this notice :

 

Notice: Undefined property: CategoryController::$cat_products in .../override/controllers/CategoryController.php on line 60

 

When I go to CategoryController.php on line 60 I have this :

 

for($i=0;$i<count($this->cat_products);$i++)

 

I don't know how to make an exception for displaying all categories without products... Can somebody help me? Thank you in advance !

 

P.S.: sorry for my english...

[vigneswara]

HI there, I have a problem,

 

I managed to get this to work on 1.4.8.2. I even managed to get it to work using overide files. It was working fine when i tested it on the mirror test site (few products per page).

 

Then I moved it to the live site and thats when I hit a problem.

 

The site now loads product-list page super super slow. Sometimes up to 3 minutes. I cleared cache and reenabled them, tried using the non-overide method and followed everyones instructions but stil it just loads super slow.

 

Anybody have a tip on how to get this sorted out?

 

Thank you ,

 

<< UPDATE >> We reduced the number of products to 12 per page and was acceptable by clients. Having more than 20 products will slow down the site when image rollover activated using the above method.

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

[perusi]

anything for version 1.5 ? thanks

[missc23]

Hi everyone!!

 

These forums are amazing! I am a total novice and am peicing together my first site and have pretty much done it all by trial and error and from information found on these forums!. I have followed and updated/overrode the above-mentioned files, but on my product list page, the displayed products are shown with the two images that "should be rolled over and/or interchanged amongst each other" at the same time... and there is no rollover effect at all as the two images are just static and visible at the same time. :blink:Can someone please help?! I have Prestashop 1.4.8.2 as the template I purchased calls for this version, and I see that quite a few people who are using this same platform have had success. But for the life of me, I cannot figure out what is wrong with code or whatever else may be the problem.

 

You can see an example of the issue I am having here: http://ouchiewear.com/prestashop/category.php?id_category=4

 

I hope someone knows what I'm messing up or inputing incorrectly! Thank you for your help!!!

[fogolin]

The same for me in search and layered navigation. It only works in a category. I think it's a problem with category or classess but i don't know to much about it.

dstanimirov your theme uses ajax to sort the products and also for the layered navigation so you should check the category controller to see what smarty variables it gives you . You can also turn show errors to on (in config file) to see if you get any errors.

 

Well, hi everyone!

 

So, I just saw all this mess 'round our attempt to make prestashop a better place... confused I went to my client's template and saw it is not showing the images when searching (with or without ajax), even knowing it uses the same "product-list.tpl".

 

For now, what I did whas create a copy of the original "product-list.tpl" (simple image) and named it "product-list-search.tpl".

 

In the "search.tpl" file, I just changed the call from "product-list.tpl" to "product-list-search.tpl", in line 49:

 

{include file="$tpl_dir./product-list-search.tpl" products=$search_products}

 

This way, when searching, prestashop won't use the modified product listing feature, which is a shame, but we get at least one image for each product (which is better than none)...

 

So, nobody could sort this out, have any of you managed to make it work with searching?

Edited October 4, 2012 by fogolin (see edit history)

[vigneswara]

Hi everyone!!

 

These forums are amazing! I am a total novice and am peicing together my first site and have pretty much done it all by trial and error and from information found on these forums!. I have followed and updated/overrode the above-mentioned files, but on my product list page, the displayed products are shown with the two images that "should be rolled over and/or interchanged amongst each other" at the same time... and there is no rollover effect at all as the two images are just static and visible at the same time. :blink:Can someone please help?! I have Prestashop 1.4.8.2 as the template I purchased calls for this version, and I see that quite a few people who are using this same platform have had success. But for the life of me, I cannot figure out what is wrong with code or whatever else may be the problem.

 

You can see an example of the issue I am having here: http://ouchiewear.co...p?id_category=4

 

I hope someone knows what I'm messing up or inputing incorrectly! Thank you for your help!!!

 

misc23 - Im not so sure. Im just throwing out ideas on how to begin troubleshoot. I just compared your site with my clients site at http://phatculture.com. If you right click and inspect element on both your rollover image and my rolloever image, a piece of code is missing on yours which is style="display:inline-block" and style="display:none"

 

Im guessing it has something to do with the script which you have to copy into product-list.tpl to perform this trick. I'd stay look at those codes again.

 

And im sure you know this but force compile on when making changes.

 

Hope this gives you some bearing to solve your problem

[missc23]

misc23 - Im not so sure. Im just throwing out ideas on how to begin troubleshoot. I just compared your site with my clients site at http://phatculture.com. If you right click and inspect element on both your rollover image and my rolloever image, a piece of code is missing on yours which is style="display:inline-block" and style="display:none"

 

Im guessing it has something to do with the script which you have to copy into product-list.tpl to perform this trick. I'd stay look at those codes again.

 

And im sure you know this but force compile on when making changes.

 

Hope this gives you some bearing to solve your problem

 

Thank you for your help!! but unfortunately I can't seem to get this thing figured out! I don't know just how to fix this!! I've been playing around with the tips you gave me for hours and I can't seem to get it working properly. Do you think if I provide you with my product-list.tpl, global.css, and category.php files you might be able to be of further assistance. I know this is probably a lot to ask. Either way, thank you for your help and I'll keep trying to get it figured out.

[janekbar5]

Hi Guys

I found this tread while trying to find solutuin to display all images in product-list.tpl. I see you managed do display 2 images how to make to display all on them???

 

Thanks

Edited October 4, 2012 by janekbar5 (see edit history)

[vigneswara]

Thank you for your help!! but unfortunately I can't seem to get this thing figured out! I don't know just how to fix this!! I've been playing around with the tips you gave me for hours and I can't seem to get it working properly. Do you think if I provide you with my product-list.tpl, global.css, and category.php files you might be able to be of further assistance. I know this is probably a lot to ask. Either way, thank you for your help and I'll keep trying to get it figured out.

 

Hey there. If I have time over the weekend I wont mind having a look. It took me quite a few weeks for it to work on my site as well. If you are comfortable, zip the theme folder and upload it somewhere. If not yea just try passing on the above mentioned files.

 

Hmm you mentioned only 3 files. You do know CatagoryController.php has to be overridden as well right? Pass this on as well.

[missc23]

Hey there. If I have time over the weekend I wont mind having a look. It took me quite a few weeks for it to work on my site as well. If you are comfortable, zip the theme folder and upload it somewhere. If not yea just try passing on the above mentioned files.

 

Hmm you mentioned only 3 files. You do know CatagoryController.php has to be overridden as well right? Pass this on as well.

 

Thank you Vigneswara!!

 

The three files that I have been playing around with are: product-list.tpl, CategoryController.php, and category.php (sorry I forgot to mention the category controller.php file initially. Those are the only files that were mentioned in the initial posting but I just can't seem to figure them out!! I also will include my global.css although I don't think they mentioned having to tweak that any...but I have been for other site-related changes. Thank you SO much for all of your help!! You are absolutely wonderful!!! Let me know if anything else is needed from me. I can't thank you enough for your help! I have PM'd you.

[vigneswara]

Thank you Vigneswara!!

 

The three files that I have been playing around with are: product-list.tpl, CategoryController.php, and category.php (sorry I forgot to mention the category controller.php file initially. Those are the only files that were mentioned in the initial posting but I just can't seem to figure them out!! I also will include my global.css although I don't think they mentioned having to tweak that any...but I have been for other site-related changes. Thank you SO much for all of your help!! You are absolutely wonderful!!! Let me know if anything else is needed from me. I can't thank you enough for your help! I have PM'd you.

 

Got your files. So I quickly just uploaded your product-list file to my mirror site and guess what... It WORKS perfectly. everything is flippin like it should . So I tried deleting the {literal} part (The Javascript) and guess what, it simulates the problem you are facing. Both images appear side by side.

 

So we now know the problem is because the Javascript is not kicking in. Perhaps its conflicting or maybe the theme has bugged Java script.

 

If I have time this weekend I will try to figure it out. You do search for the above as well.

[gdu]

Hello,

 

It seems that added function getProductsImgs() is not called after an ajax call (pager or layered nav).

That's why the productimg array is not defined in product-list.tpl and images dont appear.

 

Does anyone has an idea to resolve that problem ?

 

Thanks,

G.

[dstanimirov]

Hello,

 

It seems that added function getProductsImgs() is not called after an ajax call (pager or layered nav).

That's why the productimg array is not defined in product-list.tpl and images dont appear.

 

Does anyone has an idea to resolve that problem ?

 

Thanks,

G.

I found that the atribute filter is the problem and I turn it off

When I sort products from the drop down list / by price, by name ... / there no more problem

look here and try to sort - the pictures stay and roll over again

http://bebeshkidrehi.bg/category.php?id_category=60

[beppinos]

I put the rollover product-list.php on the page, and it works.

My problem is when I use the filter with blocklayer and the array productimg becomes null.

How can I keep the array populated or repopulate with the new list of products.

[gdu]

I found that the atribute filter is the problem and I turn it off

When I sort products from the drop down list / by price, by name ... / there no more problem

look here and try to sort - the pictures stay and roll over again

http://bebeshkidrehi...?id_category=60

 

Thanks for your answer dstanimirov,

the problem is that i've to keep ajax working (client's request)

[kalakrima]

Hello everybody,

 

just want to say that it's works great for me, but I have a little issue here and I don't know how to fiw it. I spent hours of searching on web, but I'm a beginner so I didn't find a solution.

 

So, if somebody can help me It will be great.

 

My problem :

 

When I display all categories, without products I have this notice :

 

Notice: Undefined property: CategoryController::$cat_products in .../override/controllers/CategoryController.php on line 60

 

When I go to CategoryController.php on line 60 I have this :

 

for($i=0;$i<count($this->cat_products);$i++)

 

I don't know how to make an exception for displaying all categories without products... Can somebody help me? Thank you in advance !

 

P.S.: sorry for my english...

 

No body can help me???

[kalakrima]

No body can help me???

 

ok, so the solution was to add this in product-list.tpl :

 

after

{if isset($products)}

add this line :

{if $id_category != 1}

 

and at the end of the document

{/if}

 

I hope this will help some people like me

[julien1256]

I had the same issue as missc23 and fixed it by using CSS Z-Index. no script.

 

Just change the class="{$key2}" by something like class="roll{$key2}"

 

So now in your product-list.css you add :

 

 

.roll0{

display:inline;

z-index:10;

position:relative;

}

.roll0:hover{

display:inline;

z-index:1;

position:relative;

}

.roll1{

display:inline;

z-index:1;

position:absolute;

left:0px;

top:0px;

}

.roll1:hover{

display:inline;

z-index:10;

position:absolute;

left:0px;

top:0px;

}

 

 

EDIT : doesnt work on search / manufacturer and block layered pages

 

IT ONLY WORKS IF YOU DON'T USE THE LAYERED NAVIGATION and still don't work on Search, Manufacturer,New products pages.

If you want to use the old product-list.tpl (the old that only shows 1 image) only for those pages, you can still use the #36 post's trick.

 

http://www.prestasho...post__p__951419

Edited October 14, 2012 by julien1256 (see edit history)

[cortega]

anything for version 1.5 ? thanks

up

[CVoicu]

Here's the solution for 1.5.

 

Copy this function in classes/Category.php

public function getProductsimg($product_id,$limit)
   {
 $sql = 'SELECT * from `'._DB_PREFIX_.'image` where id_product="'.$product_id.'" order by `position` limit 0,'.$limit;
	 $result = Db::getInstance()->ExecuteS($sql);
 return $result;
   }

It's almost the same function as before, but I've added a new parameter named "$limit" so we could change a bit easier the number of images displayed.

 

Next: go to controllers/front/CategoryController.php and find the function called assignProductList (it should be the last one).

Inside this function look for this code

// The hook was not executed, standard working
 if (!$hookExecuted)
 {
  $this->context->smarty->assign('categoryNameComplement', '');
  $this->nbProducts = $this->category->getProducts(null, null, null, $this->orderBy, $this->orderWay, true);
  $this->pagination((int)$this->nbProducts); // Pagination must be call after "getProducts"
  $this->cat_products = $this->category->getProducts($this->context->language->id, (int)$this->p, (int)$this->n, $this->orderBy, $this->orderWay);
}

and replace it with this one

// The hook was not executed, standard working
 if (!$hookExecuted)
 {
  $this->context->smarty->assign('categoryNameComplement', '');
  $this->nbProducts = $this->category->getProducts(null, null, null, $this->orderBy, $this->orderWay, true);
  $this->pagination((int)$this->nbProducts); // Pagination must be call after "getProducts"
  $this->cat_products = $this->category->getProducts($this->context->language->id, (int)$this->p, (int)$this->n, $this->orderBy, $this->orderWay);

  $image_array=array();
  for($i=0;$i<count($this->cat_products);$i++)
  {
  //Change 3 with the number of images you want to display
   $image_array[$i]= $this->category->getProductsimg($this->cat_products[$i]['id_product'],3);
  }
  self::$smarty->assign('productimg',(isset($image_array) AND $image_array) ? $image_array : NULL);
 }

The final step is replacing the image inside product-list.tpl with our images and add the javascript( this is the same as before).

[cmaaga]

Hi! I have the same problem like missc23 and I know that jQuery conflict, beacause when I try this code in jsfiddle it wokrs perfect. So my question: how to fix this conflict? I use prestashop_new themes and prestasho v1.4.8.2, I try disable: blocklayered and top menu module and blockcart2 module and nothing help.

[steve_c]

I can confirm this does not work with 1.5.2

 

I have followed all of the instructions but nothing appears. There are no images at all.

 

Originally I thought that it was a problem with image name (1.5.2 uses "home_default" and this mod uses "home") but no joy.

 

There is nothing being output after this line:

 

{foreach from=$productimg key=key1 item=pimage}

 

Anything I put after this line of code does not appear on the page.

Edited November 15, 2012 by steve_c (see edit history)

[steve_c]

I'd be very grateful if someone could post step by step instructions on making this work for 1.5.2

Thanks

[maccio]

there are no modules to do this?

[vigneswara]

there are no modules to do this?

There is a paid module somewhere i think: http://www.prestatoolbox.com/advertising-marketing/147-product-rollover.html

[steve_c]

Seems like it's not compatible with 1.5

[maccio]

I have found this template that integrate this function: http://warehouse.iqit-commerce.com/en/11-tops/manufacturer-sample_manufacturer10?selected_filters=manufacturer-sample_manufacturer10&id_category=3&n=20?selected_filters=manufacturer-sample_manufacturer10?selected_filters=manufacturer-sample_manufacturer10&id_category=3&n=20&n=20

[steve_c]

Anyone been able to get this to work with 1.5?

[CVoicu]

Anyone been able to get this to work with 1.5?

Yes, the code that I've shared works on prestashop 1.5.2. What exactly is it that is not woking for you? Are you getting empty arreys?

[steve_c]

Hi yes I'm getting empty arrays.

I'll give it another try tomorrow and post back.

Thanks

[CVoicu]

Hey, no problem.I'm going to take a look to see if there's something wrong with the code I've posted.

[innocuous]

Hi,

What if we want to show a rollover shaded box over original product image with brief description of the product instead of alternate image? Should work on homefeatured, category pages.

 

PS 1.5.2 default theme modded heavily.

 

Thanks

[cmaaga]

Thank you Vigneswara!!

 

The three files that I have been playing around with are: product-list.tpl, CategoryController.php, and category.php (sorry I forgot to mention the category controller.php file initially. Those are the only files that were mentioned in the initial posting but I just can't seem to figure them out!! I also will include my global.css although I don't think they mentioned having to tweak that any...but I have been for other site-related changes. Thank you SO much for all of your help!! You are absolutely wonderful!!! Let me know if anything else is needed from me. I can't thank you enough for your help! I have PM'd you.

 

I had the same problem. I thought that was jQuery conflict BUT NO. It was really stupid mistake. Css mistake. It was h3 block (name of product), which was on image block and a hover dosen't work because was beheind. Check for it! (sorry for english)

Edited November 23, 2012 by cmaaga (see edit history)

[Avengers]

Thanks DGV your script works like a charm. thanks

[kaptanx]

Here's the solution for 1.5.

 

Copy this function in classes/Category.php

public function getProductsimg($product_id,$limit)
{
 $sql = 'SELECT * from `'._DB_PREFIX_.'image` where id_product="'.$product_id.'" order by `position` limit 0,'.$limit;
	 $result = Db::getInstance()->ExecuteS($sql);
 return $result;
}

It's almost the same function as before, but I've added a new parameter named "$limit" so we could change a bit easier the number of images displayed.

 

Next: go to controllers/front/CategoryController.php and find the function called assignProductList (it should be the last one).

Inside this function look for this code

// The hook was not executed, standard working
 if (!$hookExecuted)
 {
  $this->context->smarty->assign('categoryNameComplement', '');
  $this->nbProducts = $this->category->getProducts(null, null, null, $this->orderBy, $this->orderWay, true);
  $this->pagination((int)$this->nbProducts); // Pagination must be call after "getProducts"
  $this->cat_products = $this->category->getProducts($this->context->language->id, (int)$this->p, (int)$this->n, $this->orderBy, $this->orderWay);
}

and replace it with this one

// The hook was not executed, standard working
 if (!$hookExecuted)
 {
  $this->context->smarty->assign('categoryNameComplement', '');
  $this->nbProducts = $this->category->getProducts(null, null, null, $this->orderBy, $this->orderWay, true);
  $this->pagination((int)$this->nbProducts); // Pagination must be call after "getProducts"
  $this->cat_products = $this->category->getProducts($this->context->language->id, (int)$this->p, (int)$this->n, $this->orderBy, $this->orderWay);

  $image_array=array();
  for($i=0;$i<count($this->cat_products);$i++)
  {
  //Change 3 with the number of images you want to display
   $image_array[$i]= $this->category->getProductsimg($this->cat_products[$i]['id_product'],3);
  }
  self::$smarty->assign('productimg',(isset($image_array) AND $image_array) ? $image_array : NULL);
 }

The final step is replacing the image inside product-list.tpl with our images and add the javascript( this is the same as before).

 

 

 

 

 

Hello CVoicu,

 

Remember you are posted this script for 1.5.2 but this script working fine with localhost but when i upload real server can't work.

 

Files is here http://depositfiles.com/files/yoyfm2cwr

 

Please check it for us

 

Thank you.

[steve_c]

Hey, no problem.I'm going to take a look to see if there's something wrong with the code I've posted.

 

Hi I tried again and get no images at all. There are no images in the source so it's not a CSS issue. It is empty arrays.

 

Could it be something to do with the new theme has images called "home_default" instead of just "home" etc?

Edited November 25, 2012 by steve_c (see edit history)

[pepfiction]

Hello CVoicu,

 

Remember you are posted this script for 1.5.2 but this script working fine with localhost but when i upload real server can't work.

 

Files is here http://depositfiles....files/yoyfm2cwr

 

Please check it for us

 

Thank you.

 

Hi, thank you for the information.

What javascript we have to use?

 

Thanks!

[kaptanx]

Hi, thank you for the information.

What javascript we have to use?

 

Thanks!

 

Javascript include in samples but script have problem localhost working live server is not also i can't found any soulution. If you will find please share with us.

 

Thanks.

[anku2710]

$image_array=array();

 

for($i=0;$i<count($this->cat_products);$i++)

{

$image_array[$this->cat_products[$i]['id_product']]= $this->category->getProductsimg($this->cat_products[$i]['id_product']);

}

self::$smarty->assign('productimg',(isset($image_array) AND $image_array) ? $image_array : NULL);

 

 

The above productimg is returning only the images of the current page not of the other pages.So how to get the images of the other pages...

Edited December 3, 2012 by anku2710 (see edit history)

[steve_c]

Someone really needs to develop a mod for this that works with 1.5

 

It's a great feature in so many shops that I use.

[kaptanx]

Hello Guys,

 

If you find any solutions please share with us.

I know so many peoples need this.

Thanks

[steve_c]

+1. Desperately needed here. Would pay for a decent module

[Avengers]

hi i have already implemented in my shop the roll over efffect

please see the link http://www.mrgunii.com/173-wardrobe

if u need any help please pm me thanks

[qiuyi]

avenger are you using prestashop 1.4 ?

[Avengers]

yes also 1.5 also can

[vekia]

i've got solution for rollover on all pages, i mean that it works with:

 

1) start page

2) categories

3) tags

4) manufacturers

5) search feature

 

there is no way to create a module, but with core modifications I can create this effect in all product listings feature

[fogolin]

i've got solution for rollover on all pages, i mean that it works with:

 

1) start page

2) categories

3) tags

4) manufacturers

5) search feature

 

there is no way to create a module, but with core modifications I can create this effect in all product listings feature

 

Well, will you post the solution you found?

[vekia]

it's not as simple as it seems.

 

This modification takes a lot of work. For example, i must edit all important controllers & classes in shop like shop class, front controller, search controller, search class, manufacturer class, manufacturer controllers etc. I must also edit & add own functions for each class/controllers...

 

maybe i will write a tutorial, but i don't think so that non-dev user can do it alone

 

 

you can check how it works at www.filutshop.pl

[qiuyi]

check http://jishop.eu/it/17-pantaloni for the application of this mods to 1.5.2 prestashop.

work well

[vekia]

check http://jishop.eu/it/17-pantaloni for the application of this mods to 1.5.2 prestashop.

work well

 

 

this method doesn't work well

 

just check: http://jishop.eu/it/nuovi-prodotti or other non-default sites like search, best sales etc.

[fogolin]

it's not as simple as it seems.

 

This modification takes a lot of work. For example, i must edit all important controllers & classes in shop like shop class, front controller, search controller, search class, manufacturer class, manufacturer controllers etc. I must also edit & add own functions for each class/controllers...

 

maybe i will write a tutorial, but i don't think so that non-dev user can do it alone

 

 

you can check how it works at www.filutshop.pl

 

Well, I see your point. Just hope that you'll do as you say and make this sort of tutorial, would really appreciate to be able to finally finish this modifications on the shop...

[qiuyi]

vekia please share your Knowledge!

 

[vekia]

please, be patient i will release tutorial about this feature and inform all of you here

[drdiesel]

Hi all!!! Rollover is good work, but when I install blocklayerd it's don's work. Please tell me what I must do.

 

P.S. Sorry for my english)

[drdiesel]

The problem is solved. You must add into blocklayered.php

 

 

$image_array=array();

for($i=0;$i<count($products);$i++)

{$product=$products[$i];

$s=$product['id_product'];

$sql = 'SELECT * from `'._DB_PREFIX_.'image` where id_product="'.$s.'" order by `position` limit 4';

$image_array[$i] = Db::getInstance()->ExecuteS($sql);

}

 

after

$nArray = array_unique($nArray);

asort($nArray);

[steve_c]

Hi can you post the complete solution for 1.5?

Thanks

[kalakrima]

Hi everyboody,

 

I've searched a solution for my problem all day and didn't find anything that can helps me... So I implemented the rollover effect on my product list and It works perfectly to my shop (version 1.4.8)

But when I go to best-sales or new-products I didn't have any image and the following notice displays :

 

Notice: Undefined variable: productimg in /tools/smarty/sysplugins/smarty_internal_data.php on line 291

 

Can someone help me and explain me how to fix it?

 

Thank you in advance.

Edited December 26, 2012 by kalakrima (see edit history)

[vekia]

Hi everyboody,

 

I've searched a solution for my problem all day and didn't find anything that can helps me... So I implemented the rollover effect on my product list and It works perfectly to my shop (version 1.4.8)

But when I go to best-sales or new-products I didn't have any image and the following notice displays :

 

Notice: Undefined variable: productimg in /tools/smarty/sysplugins/smarty_internal_data.php on line 291

 

Can someone help me and explain me how to fix it?

 

Thank you in advance.

 

it's not as simple as it seems. You need to modify classes for new products, best prices etc.

[kalakrima]

it's not as simple as it seems. You need to modify classes for new products, best prices etc.

 

Yes I know, but how can I do this? I've searched all trough the web, nobody seams interessted on this fonction. I found only one module but I don't have trust on it. So there must be a solution, did you know how?

Edited December 28, 2012 by kalakrima (see edit history)

[vekia]

You can't do that without classes modification. I don't belive that they do this for new products, best prices, search, tag pages etc. cause it's impossible without core modifications. I know the way but there is a lot to modify, so it's not as simple as it seems. As i said I will write tutorial for it but i don't exactly know when (i've got a lot of work )

[steve_c]

I wonder if there is any chance of the PS team including this in the next point release? It's a very common function with probably around 50% - 60% of stores that I use (purchase from)

[vekia]

I wonder if there is any chance of the PS team including this in the next point release? It's a very common function with probably around 50% - 60% of stores that I use (purchase from)

 

you're talking about rollover in homefeatured module or rollover anywhere?

[steve_c]

you're talking about rollover in homefeatured module or rollover anywhere?

 

In my experience, the product rollover should be seen everywhere.

 

Take this site for instance:

 

You can tell instantly whether a jacket / suit has any vents at the back. It's essential for a clothing site.

[vekia]

In my experience, the product rollover should be seen everywhere.

 

Take this site for instance:

 

You can tell instantly whether a jacket / suit has any vents at the back. It's essential for a clothing site.

 

you're right,

 

so I'll see what I can do in this case

[steve_c]

you're right,

 

so I'll see what I can do in this case

 

Legend

[kalakrima]

Legend

you're right,

 

so I'll see what I can do in this case

 

I'll continue searching and if I found something I'll contribute for other people like me, like us who is searching this basic function for an e-shop.

 

But I'll waiting your tutorial with impatience

Edited December 28, 2012 by kalakrima (see edit history)

[kalakrima]

Ok, I found how to do this with "override" I spent a days to inform me, but in the end it took me a few hours to achieve this fonctionnality for PS v1.4.8 May be I'll write a tutorial for this

[jincmd]

Here it goes the files I used for PrestaShop 1.4.8.2 using override.

 

Good luck.

 

DGV

PrestaBR

 

Thanks will it work on vers 1.5.2/1.5.3?

[AT2]

Hi guys,

 

I have tested yesterday the solution i found here, then i saw the problems with layered navigation, filter etc... and i thought that the solution must be different, the solution must be something above the singolar category class or similar.

so i think you are on the wrong road and i searched for another solution. the solution i found is write in french language, i watched the code and i've get it work.

 

my version of prestashop is the last one: 1.5.3.1 but this solution should work (or adapted) for any version.

 

the link for the solution is http://www.prestasho...g-des-produits/

 

i explain for the non-french reader (like me, i'm italian)

 

you have to edit

 

class/Link.php

 

find :

 

public function getImageLink($name, $ids, $type = NULL) 

 

and edit to :

 

public function getImageLink($name, $ids, $type = NULL, $idOver= NULL)

 

(id over is the id of the product)

 

 

then find :

 

 

$split_ids = explode('-', $ids);
$id_image = (isset($split_ids[1]) ? $split_ids[1] : $split_ids[0]);
$theme = ((Shop::isFeatureActive() && file_exists(_PS_PROD_IMG_DIR_.Image::getImgFolderStatic($id_image).$id_image.($type ? '-'.$type : '').'-'.(int)Context::getContext()->shop->id_theme.'.jpg')) ? '-'.Context::getContext()->shop->id_theme : '');

 

 

 

and edit to:

 

$split_ids = explode('-', $ids);
$id_image = (isset($split_ids[1]) ? $split_ids[1] : $split_ids[0]);
$theme = ((Shop::isFeatureActive() && file_exists(_PS_PROD_IMG_DIR_.Image::getImgFolderStatic($id_image).$id_image.($type ? '-'.$type : '').'-'.(int)Context::getContext()->shop->id_theme.'.jpg')) ? '-'.Context::getContext()->shop->id_theme : '');

if(isset($idOver)){
$result = Db::getInstance()->ExecuteS('SELECT id_image FROM '._DB_PREFIX_.'image WHERE id_product = '.$idOver.' AND position = 2');
foreach ($result as $row)
$id_image_over = $row['id_image'];
}else{
$id_image_over = 0;
}

if($id_image_over != 0){
$id_image = $id_image_over;
}

 

 

 

so the finally function getImageLink should look like this:

 

 

public function getImageLink($name, $ids, $type = null, $idOver= NULL)
{
$not_default = false;
// legacy mode or default image
$theme = ((Shop::isFeatureActive() && file_exists(_PS_PROD_IMG_DIR_.$ids.($type ? '-'.$type : '').'-'.(int)Context::getContext()->shop->id_theme.'.jpg')) ? '-'.Context::getContext()->shop->id_theme : '');
if ((Configuration::get('PS_LEGACY_IMAGES')
&& (file_exists(_PS_PROD_IMG_DIR_.$ids.($type ? '-'.$type : '').$theme.'.jpg')))
|| ($not_default = strpos($ids, 'default') !== false))
{

if ($this->allow == 1 && !$not_default)
$uri_path = __PS_BASE_URI__.$ids.($type ? '-'.$type : '').$theme.'/'.$name.'.jpg';
else
$uri_path = _THEME_PROD_DIR_.$ids.($type ? '-'.$type : '').$theme.'.jpg';
}
else
{
// if ids if of the form id_product-id_image, we want to extract the id_image part
$split_ids = explode('-', $ids);
$id_image = (isset($split_ids[1]) ? $split_ids[1] : $split_ids[0]);
$theme = ((Shop::isFeatureActive() && file_exists(_PS_PROD_IMG_DIR_.Image::getImgFolderStatic($id_image).$id_image.($type ? '-'.$type : '').'-'.(int)Context::getContext()->shop->id_theme.'.jpg')) ? '-'.Context::getContext()->shop->id_theme : '');

if(isset($idOver)){
$result = Db::getInstance()->ExecuteS('SELECT id_image FROM '._DB_PREFIX_.'image WHERE id_product = '.$idOver.' AND position = 2');
foreach ($result as $row)
$id_image_over = $row['id_image'];
}else{
$id_image_over = 0;
}

if($id_image_over != 0){
$id_image = $id_image_over;
}

if ($this->allow == 1)
$uri_path = __PS_BASE_URI__.$id_image.($type ? '-'.$type : '').$theme.'/'.$name.'.jpg';
else
$uri_path = _THEME_PROD_DIR_.Image::getImgFolderStatic($id_image).$id_image.($type ? '-'.$type : '').$theme.'.jpg';
}

return $this->protocol_content.Tools::getMediaServer($uri_path).$uri_path;
}

 

 

then edit your_theme/product-list.tpl,

 

find:

 

<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />

 

and edit to:

 

<img onmouseover="this.src='{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default', $product.id_product)}'" onmouseout="this.src='{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}'" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} /> 

 

 

pay attention to 'home_default', in my case it works, for some other it could be 'home' or different.

 

 

I think that this solution can be use everywhere you want, without touching other classes or controllers (like it should be i think), just change the img part where you want (featured product and so)

 

i hope everyone can understand my bad english.

 

hope it helps.

 

bye

Edited January 6, 2013 by AT2 (see edit history)