Jump to content
loulou66

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

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