2ieme image en roll-over pour Product-list et Produits Phares

[loulou66]

coucou

 

voici un petit tuto pour faire un roll-over sur les images dans la page product-list et pour le module products phare

 

jai tester sur une PS 1.5.4.1 en local et sur ma boutique en prod (voir ma signature) il doit être adaptable sur un PS 1.4 je pense

 

PRODUCT-LIST

 

Le sujet à déjà été abordé en faisant des module ou bidouillant le code de ps  mais j'ai trouvé que cette façon était plus simple et fonctionnait bien.

 

Tout d'abord je reprend le tuto d'Emilien Malbranche sur cette page

http://emilienmalbranche.fr/prestashop-ecommerce-tutoriels/tutoriels/afficher-image-secondaire-survol-produits-prestashop/

 

Donc un grand merci à Emilien, aller voir son site il y plein de choses inintéressantes pour PS.

 

vous pouvez donc aller voir la page d'emilien et modifier en dur le code mais si vous updater un jour votre ps vous perdrez les changements,

ou télécharger le fichier zip qui contient product.php et catgory.php a placer dans le dossier override/classes/ et le fichier product_list.tpl a placer dans thème/votre_thème/

 

j'ai mis des ligne en commentaire en début du fichier la ou il y a les images et a la fin pour le Script.

supprimer le fichier CACHE==>CLASS_INDEX.PHP pour que les fichier overrridde soit bien pris en compte (ce fichier va se recréer automatiquement)

 

PRODUIT PHARE

 

Je me suis inspiré du module ADDHOMEFEATURED de ce thème gratuit http://www.freeprestathemes.com/bootstrap/  ou ce module était inclus

 

dans le fichier homefeatured.php

 

dans la fonction public function hookDisplayHome($params)

 

après la déclaration de

$products = $category->getProducts((int)Context::getContext()->language->id, 1, ($nb ? $nb : 10));

ajouter

$p=array();
for($i=0;$i<count($products);$i++)
{
$product=$products[$i];
unset ($pid);
$pid=$product['id_product'];
$sql= "SELECT * FROM `"._DB_PREFIX_."image` WHERE `id_product` = '{$pid}' AND cover = '0' ORDER BY `id_image` ";
$results = Db::getInstance()->ExecuteS($sql);
@$result=$results['0'];
$p[$pid]=$result['id_image'];
}
$this->smarty->assign('addimages',$p);

dans le fichier homefeatured.tpl

repérez dans les 1ere lignes la declaration de l'image

<img src="......

et ajouter lui a la fin avant 

class="main-img"

ajouter ensuite les lignes ci-dessous pour la declaration de la 2ime image pour le roll over

{foreach from=$addimages key=k item=v}
{if $k==$product.id_product && $v !=''}
<img src="{$link->getImageLink($product.link_rewrite,$product.id_product|cat:"-"|cat:$v, 'home_default')}" alt="{$product.name|escape:html:'UTF-8'}" style="display:none;" class="next-img" height="{$homeSize.height}" width="{$homeSize.width}"/>
{/if}
{/foreach} 

aller a la fin du fichier et rajouter le script pour le roll-over

<script>
$(document).ready(function() {
$(this).find(".addhomefeatured ul li .main-img").mouseover(function () { 
$(this).next(".addhomefeatured ul li .next-img").stop(true, true).fadeIn(600, 'linear'); 
});  
$(".addhomefeatured ul li .next-img").mouseleave(function () { 
$(".addhomefeatured ul li .next-img").stop(true, true).fadeOut(600, 'linear');
});
});
</script>        

 et pour finir dans le fichier homefeatured.css

 

ici les déclaration dépend de votre fichier et des "class" déclarée dans le fichier homefeatured.tpl

 

mais dans le principe il faut reperrer  

l'ID ou la class de la DIV ou de la SECTION (#deladiv ou .deladiv) généralement .addhomefeatured

(#deladiv ou .deladiv) ul li img.next-img{ z-index:9;position:absolute; top:0; left:0;}
(#deladiv ou .deladiv) ul li img{overflow:hidden;}
(#deladiv ou .deladiv) ul li img.main-img{ display:block;}

vous pouvez aussi télécharger le thème gratuit et utiliser le module a la place 

 

pensez bien à vider vos CACHES NAVIGATEURS ET SMARTY après les modifs.

 

voilou 

 

@++

 

loulou66

 

 

roll-over 2nd image.zip