Aller au contenu

October 15, 2013

1

Afficher une image secondaire au survol des produits sous PrestaShop

Faire apparaitre une deuxième photo de votre produit lorsque le pointeur de la souris de vos clients survol les images de vos produits sur les pages catégories peut-être vraiment utile et augmente réellement l’ergonomie de votre site et peut également accroitre le taux de conversion.

Prestashop ne propose pas cette fonctionnalité c’est pourquoi je vais vous décrire la manipulation de manière la plus simple possible.

La première étape consiste à rajouter une variable à vos objets produit qui contiendra les informations de la deuxième image que nous allons afficher au survol, pour cela il faudra modifier la fonction getProductProperties() en lui rajoutant cette ligne code juste après la ligne 3773 :

$row['id_image2'] = Category::getProductsImgSupp((int)$row['id_product']);

avant :

$row['id_image'] = Product::defineProductImage($row, $id_lang);

après :

$row['id_image'] = Product::defineProductImage($row, $id_lang);
$row['id_image2'] = Category::getProductsImgSupp((int)$row['id_product']);

Dans cette ligne de code, je fais appel à une fonction customisée que j’ai créé dans la classe Category, vous allez également devoir la rajouter, la voici :

public function getProductsImgSupp($product_id)
	{
			$sql = '
			SELECT id_image, id_product from `'._DB_PREFIX_.'image`
			WHERE id_product="'.$product_id.'"
			ORDER BY `position` ASC
			LIMIT 1,1
			';
			$result = Db::getInstance()->ExecuteS($sql);
			return $result[0]['id_product'].'-'.$result[0]['id_image'];
	}

Cette fonction récupère la deuxième image d’un produit dans l’ordre défini dans l’administration.

Nous avons déjà fait le plus gros !

Maintenant il suffit de modifier le fichier template «product-list.tpl» afin de rajouter l’image secondaire.

Exemple :

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

Utilisez jQuery afin d’afficher l’image secondaire au survol. Rajoutez des classes différentes à vos images 1 et 2 et utilisez la propriété CSS «display» afin d’alterner leur affichage au survol.

Pour vous aider, voici le code javascript que j’ai utilisé pour cela :

<script type="text/javascript">
	$(".product_img_link").hover(
	function () {
		$(this).find('.img_second').toggle();
		$(this).find('.img_first').toggle();
	},
	function () {
		$(this).find('.img_second').toggle();
		$(this).find('.img_first').toggle();
	}
	);
</script>
Publié par
Plus d'articles pour la catégorie Tutoriels
12 Commentaires Poster un commentaire
  1. Grenier
    Jun 12 2013

    Bonjour,

    Merci tout d’abord pour tous vos conseils et tutos.

    Je suis intéressé pour ajouter cet effet sur mes images de mes produits phares en page d’accueil.

    J’essaie de suivre votre tuto mais je ne sais pas sur quel fichier apporter les modifications ( il me semble que vous ne les indiquer pas) cela est surement évident pour un informaticien, mais pas pour moi ….

    J’utilise la version v1.5.4.1.

    Je vous serais reconnaissant si vous pouviez me renseigner.

    Merci par avance.

    Philippe Grenier

    Reply
  2. Loulou66
    Aug 25 2013

    coucou

    je viens d’effectuer le tuto ça marche impeccablement bien sur une ps 1.5.4.1

    alors pour les fichier a modifier :

    étape 1:
    $row['id_image2'] =…..
    modifier le fichier /classes/product.php ligne 3780 pour moi

    étape 2 :
    public function getProductsImgSupp($product_id)…..
    a ajouter a la fin du fuchier /classes/category.php juste avant la derniere }
    et changer la fonction en ==> public Static function getProductsImgSupp($product_id) ( sinon ça génère une erreur disant qu’il veut un static fonction)

    étape 3:
    <img class="img_second" src…..
    modifier le fichier /theme/votre_theme/product-list.tpl
    vers la ligne 36 a la linge <img…. rajouter class="img_first" style="display:'
    copier le ligne du tuto en dessous et rajouter dedans style="display:none'
    aller a l a fin du fuchier et copier le ……..

    vider le caches et voila

    Merci Emilien pour ce tuto

    Reply
  3. jd440
    Aug 26 2013

    Merci beacoup pour se developpement,

    Cependant le souci est que le nomdre de chargement d’image (~tps de téléchagrement) var doubler.

    Je pense que le plus interessant serait donc charger les image seconde en asynchrone.
    Je sais qu il existe un tel script mais impossible de mettre la main dessus.

    Reply
  4. Mariem
    Aug 30 2013

    Bonjour,

    j’utilise prestashop 1.5.2, j’ai suivie votre tutorial à la lettre mais sur la page catégorie j’ai l’erreur suivante
    “Undefined index: id_image2 in …. http://… /img/p/-home_default.jpg ”

    vous pouvez me guider SVP ?

    Reply
  5. Sangria
    Oct 2 2013

    Bonjour,

    La solution fonctionne mais lorsque l’on affiche les erreurs, je vois apparaitre : Notice: Undefined offset: 0 in ….

    A priori ce qu’il n’aime pas c’est ça :
    return $result[0]['id_product'].’-’.$result[0]['id_image'];

    Y’a t-il une solution pour ne pas avoir d’erreurs ?

    Merci !

    Reply
  6. Oct 25 2013

    Super cet article : un grand merci.
    Merci aussi à loulou66 qui complète idéalement, ça marche du 1er coup :-)

    Reply
  7. Joffrey
    Nov 2 2013

    Bonjour,

    Merci beaucoup Emilien pour ce tuto et merci à Loulou66 pour ses informations complementaire.

    J’utilise Prestashop 1.5.6 et ça fonctionne nickel !!!

    Par contre si l’on a qu’une image pour certains produits y a t il un moyen de n’afficher que la premiere image en modifiant le code Javascript ou autres ?!?

    Merci encore

    Joffrey

    Reply
  8. yeswecan
    Dec 9 2013

    bonjour:

    tu peux le faire, je suis pas un expert en modification de code mais j’ai fais ça

    {if $product.id_image2 == 0}
    getImageLink($product.link_rewrite, $product.id_image, ‘home_default’)}” alt=”{$product.legend|escape:’htmlall’:'UTF-8′}” style=”display:none;” {if isset($homeSize)} width=”{$homeSize.width}” height=”{$homeSize.height}”{/if} />
    {else}
    getImageLink($product.link_rewrite, $product.id_image2, ‘home_default’)}” alt=”{$product.legend|escape:’htmlall’:'UTF-8′}” style=”display:none;” {if isset($homeSize)} width=”{$homeSize.width}” height=”{$homeSize.height}”{/if} />
    {/if}

    c’est une condition, si y’a pas de seconde image tu affiche la premiere avec la méthode de la deuxième
    et si il y en a une deuxieme
    tu l’affiches normalement

    Reply
  9. Bast
    Dec 20 2013

    La demande de Joffrey m’intéresse aussi grandement.

    Si c’est possible, pouvez vous nous envoyer la solution ici et sur nos mails (au cas ou nous n’allons pas sur le site et que la réponse s’y trouve).

    Merci beaucoup pour ça et pour ce tuto ;)

    Reply
  10. Oct 2 2014

    Bonjour
    j’ai suivi le tuto mais rien ne se passe j’ai vider le cache
    prestashop 1.5.6

    Reply
  11. Oct 2 2014

    Réctification l’image se mets en dessous de l’image principale et non au survol de la souris

    Reply

Partagez votre opinion, postez un commentaire.

(requis)
(requis)

Note: Le HTML est autorisé. Votre e-mail (ne sera pas publié).

S'abonner aux commentaires


1 + 8 =