Testé fonctionnel Magento 2.3, 2.4!
Attention: j’ai trouvé plusieurs tutos sur le net qui m’ont mis sur la bonne voie, mais seul celui-ci comporte l’ensemble des éléments qui permettra de mettre en place la fonctionnalité voulue: How to change product image on hover?.
En backoffice:
Créer un attribut custom hover_image
- boutiques > attributs > produit
- ajouter un attribut
- propriétés de l’attribut:
- libellé par défaut: « hover_image »
- type d’entrée…: « image »
- Propriétés avancée des attributs:
- code: « hover_image »
- ajouter aux option de colonne: « non »
- utiliser dans les options de filtrage: « non »
- Propriétés du front office: (se référer au paragraphe ATTENTION juste en-dessous)
- Visible sur les pages du catalogue de la boutique: oui
- Utiliser dans les listes de produits: oui
- bouton enregistrer l’attribut
ATTENTION
Là, vous vous dites probablement: « Mais où qu’il est ce menu Propriétés du front office??? ». Il y a un bug dans le BO de Magento 2 qui applique un display: none; sur cette entrée de menu, mais elle est bien présente!!! Supprimer le display: none; avec l’inspecteur d’éléments pour pouvoir accéder à ce menu.
Sinon, vous pouvez également suivre la méthode suivante et appliquer directement la modification en base de données:
Now we have to use this attribute in the listing page. So we have to make
used_in_product_listingto1. We can do that by using MySQL.You need to take
hover_imageAttribute_ID from admin. You can go to yourhover_imageattribute page in admin and get its ID from URL.Suppose that
Attribute_IDis99in our case. Now, go to the database and select thecatalog_eav_attributetable. Select the attribute with id99and change the value of theused_in_product_listingcolumn to1.Or use below MySQL query :
Plaçons notre attribut custom hover_image dans le bon groupe d’attributs (images)
- boutiques > attributs > jeu d’attributs
- choisir le jeu d’attributs (« default » si il n’y a que celui là)
- dans la colonne « groupes » glisser le nouvel attribut
hover_imagedans le dossier « images » (normalement, vous le trouverez tout en bas de l’arbre) - bouton enregistrer
Affectons une image hover à l’un de nos produits
- catalogue > produits
- éditer un produit
- boutons ajouter un attribut
- cocher
hover_image - bouton ajouter la sélection
- section Images et vidéos
- accéder à la configuration de l’image que vous souhaitez voir apparaître au hover en cliquant sur la petite icône en forme de damier située en haut à gauche du visuel
- Dans Role, sélectionner
hover_image - cliquez sur la croix pour fermer
- bouton enregistrer
Dans le code source:
app/design/frontend/VendorName/themename/etc/view.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?xml version="1.0"?> <!-- /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ --> <view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd"> <media> <images module="Magento_Catalog"> <image id="category_page_grid_hover" type="hover_image"> <width>261</width> <height>206</height> </image> <image id="category_page_list_hover" type="hover_image"> <width>261</width> <height>206</height> </image> </images> </media> </view> |
app/design/frontend/VendorName/themename/Magento_Catalog/templates/product/list.phtml
|
1 2 3 |
$_imageHelper = $this->helper('Magento\Catalog\Helper\Image'); $hoverimg = 'category_page_grid_hover'; $hoverimg = 'category_page_list_hover'; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?php // Product Image ?> <?php // Product Image Hovered $productHoverImage = $_imageHelper->init($_product, $hoverimg); $productHoverImageUrl = $productHoverImage->getUrl(); $placeholder = "placeholder"; ?> <a href="<?= $block->escapeUrl($_product->getProductUrl()) ?>" class="product photo product-item-photo" tabindex="-1" <?php if(strpos($productHoverImageUrl, $placeholder) !== false) : ?> data-has-hovered-state="false" <?php else : ?> data-has-hovered-state="true" <?php endif; ?> > <?= $productImage->toHtml() ?> <?php // Product Image Hovered ?> <?php if(strpos($productHoverImageUrl, $placeholder) !== false) : ?> <?php // "Placeholder" word Found in URL! -> no Image Hovered was set ?> <?php else : ?> <?php // "Placeholder" word Not Found in URL! -> show existing Image Hovered ?> <img class="product-image-photo" src="<?php echo $productHoverImageUrl; ?>" alt="<?php echo $productHoverImage->getLabel(); ?>" max-width="<?php echo $productImage->getWidth(); ?>" /> <?php endif; ?> </a> |
app/design/frontend/VendorName/themename/Magento_Catalog/web/css/source/_modules.less
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
// // Common // _____________________________________________ & when (@media-common = true) { // // Product images general container // --------------------------------------------- .product-image-photo { display: block; height: auto; margin: auto; max-width: 100%; + .product-image-photo { display: none !important; } } .product-item { &:hover { .product-item-photo[data-has-hovered-state="true"] { .product-image-photo { display: none !important; + .product-image-photo { display: block !important; } } } } } } |
En bash:
|
1 |
$ cache:clean |
Une autre source (incomplète) m’ayant mis sur la voie: How to make a Product Listing with Hover images on Magento 2 et version PDF de l’article, pour la postérité.
