Comment faire apparaitre une deuxième photo de vos produits au survol des images

Voici un petit tutoriel qui va vous permettre de faire apparaitre la deuxième image de votre produit au passage de la souris.

UPDATE : j’ai trouvé ce module qui est gratuit : cliquez-ci 

Cette astuce Prestashop est valable pour la version 1.6

1) Créez un fichier nommé « Category.php » dans le dossier « override/classes » et ajoutez-le code suivant:

1) Créez un fichier nommé « Product.php » dans le dossier « override/classes » et ajoutez-le code suivant:

3) Ouvrez le fichier product-list.tpl qui se situe dans votre thème

Remplacez le code suivant  qui se situe au début

Par

3) Ouvrez le fichier footer.tpl qui se situe dans votre thème

Juste avant la balise </body>, insérez

4) N’oubliez pas il sera peut-être nécessaire de vider le cache de Prestashop (Paramètres avancés > Performances)

Voici le résultat : 

secon-image-hover

MODULES PAYANTS : 

Si vous n’avez pas envie de vous embêter, l’agence Kiwik a crée un module pour traiter ce type demande avec un prix tout à fait correct (35,99 € TTC). Je n’ai pas testé le module mais à ce jour sur 10 avis il a 5 étoiles donc je suppose qu’il fonctionne très bien.

Voir le module : http://addons.prestashop.com/fr/20254-images-au-survol-hover.html

 

Articles similaires

Supprimer “Imprimer” sur la fiche produit | Astuce Prestashop 1.6
views 1934
Personnellement, je n'arrive plus à me souvenir la dernière fois où j'ai imprimé une fiche produit depuis le site d"une boutique en ligne. Je suppose que si vous lisez cet article, vous êtes dans la même situation. Il est très simple de supprimer le mot et l'icône "Imprimer" sur la fiche produit,  mais il faut obligatoirement passer par le code. Comment supprime t-on "Imprimer"  sur la fiche p...
Mettre une page catégorie comme page d’accueil | Astuce Prestashop 1.6
views 1801
Ce petit tuto va vous permettre de transformer votre page catégorie en page d'accueil. Cette petite astuce Prestashop est valable pour la version  1.5 et 1.6 1) Ouvrez le fichier IndexController.php qui se situe dans controllers/front/IndexController.php 1.1 - Modifier "extends" Remplacer Par ----------- 1.2 -  Afin de définir la catégorie que vous désirez en page d'accuei...
Supprimer le contenu par défaut de votre boutique | Astuce Prestashop 1.6
views 4577
Lorsque vous installez Prestashop pour la 1er fois, du contenu par défaut est installé : faux clients, faux produits, fausses commandes.... Si vous désirez les supprimer, il existe une méthode très simple dans Prestashop. 1) Connectez-vous dans le back-office de Prestashop 2) Allez dans Modules & Services > Modules & Services 3)  Recherchez le module qui s'appelle : Nett...
Taille des Images du thème par défaut de Prestashop 1.6
views 5771
Ce tutoriel va vous permettre de connaitre la taille des images du thème par défaut de Prestashop La plupart des images que vous téléchargez dans le back-office doivent être enregistrées au format .jpg ou .png. Attention pour activer le format png il faut aller dans Préférences > Images et dans la partie "Options de génération d'images", cochez dans format d'image : Utiliser le PNG uniquemen...
Seo et Prestashop | Astuces
views 984
Vous avez une boutique en ligne ou le projet d'en ouvrir une ? Il y a une étape indispensable à ne surtout pas oublier ou négliger : le Référencement - SEO. Avoir une boutique c'est bien, mais faut-il qu'elle soit visible sur le net. Ben oui, un site e-commerce qui se situe en 6ème page et/ou à une faible notoriété à très peu de chance d'être visité. Mais rien n'est perdu, il faut utilise...

7 réponses à “Comment faire apparaitre une deuxième photo de vos produits au survol des images”

  1. Jordan dit :

    Bonjour, tutoriel parfait ! Cependant comment fait on lorsque le produit n’a pas de deuxième image ? La deuxième image apparait quand même dans un encadré blanc avec un “?”..
    Merci d’avance

  2. c_majory dit :

    Bonjour,

    Malheureusement ce tuto ne fonctionne pas dans votre cas.

    je vous conseille d’acheter un module.

  3. Olivier dit :

    Super tuto!
    Une question: comment le faire aussi sur la page index?
    Meci

  4. Sébastien dit :

    Bonjour,

    Ne fonctionne pas sur 1.6.1.4.

    De plus, provoque une erreur warning sur la page produit à cause du code Category.php. J’ai donc fait ceci pour éviter les erreurs :
    public static function getProductsImgSupp($product_id)
    {
    $sql = ‘
    SELECT id_image, id_product from '._DB_PREFIX_.'image
    WHERE id_product=”‘.$product_id.'”
    ORDER BY position ASC
    ‘;
    $result = Db::getInstance()->getRow($sql);
    return $result[‘id_product’].’-‘.$result[‘id_image’];
    }

    Mais bon je n’ai pas une deuxième image sur le rollover de la page product-list.php

  5. titi dit :

    Tuto qui marche impec sur 1.6.1.4
    Par contre marche impeccable sur la premiere page des differentes catégories mais pas sur les suivantes.
    Si vous avez par exemple 50 produits par categories et 25 produits par page donc 2 pages, la fonction hover ne marche plus sur la seconde page, http://www.votresite.com/3-categorie#/page-2

    ne connaissant pas grand chose en programmation la seule astuce que j’ai trouvé et de mettre 1000 produits par page se qui allourdi le chargement de celle -ci

    SI une personne peut m’aider pour cette modification de code
    Aussi si on peut l’integrer sur le bloc accessoires et vente croises
    Merci

  6. Sam dit :

    Je déterre un veille article mais pour répondre à la question de @titi, c’est la fonction js qui ne marche plus.
    J’ai utilisé du js natif avec les fonction onmousehover et onmouseout. En mettant préalablement un id unique a chaque image ( id=”1_{$product.id_product}” et id=”2_{$product.id_product}” pour la deuxieme image )

  7. Christophe dit :

    Bonjour Majory et merci pour cet article…
    Par contre, auriez-vous l’astuce pour effectuer la même chose, mais sur la version 1.7 ??
    Merci d’avance pour votre réponse

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *