hover – devfrontend.info

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_listing to 1. We can do that by using MySQL.

You need to take hover_image Attribute_ID from admin. You can go to your hover_image attribute page in admin and get its ID from URL.

Suppose that Attribute_ID is 99 in our case. Now, go to the database and select the catalog_eav_attribute table. Select the attribute with id 99 and change the value of the used_in_product_listing column to 1.

Or use below MySQL query :

UPDATE catalog_eav_attribute SET used_in_product_listing = ‘1’ WHERE attribute_id = 99;

1

UPDATE catalog_eav_attribute SET used_in_product_listing = ‘1’ WHERE attribute_id = 99;

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

<?xml version="1.0"?>  <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>

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

<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

$_imageHelper = $this->helper('Magento\Catalog\Helper\Image'); $hoverimg = 'category_page_grid_hover'; $hoverimg = 'category_page_list_hover';

1
2
3

$_imageHelper = $this->helper('Magento\Catalog\Helper\Image');
$hoverimg = 'category_page_grid_hover';
$hoverimg = 'category_page_list_hover';

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

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

// // 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; } } } } } }

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:

$ cache:clean

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

Problème:

Sous IE (Internet Explorer), j’ai un menu déroulant dropdown dont la partie déroulée (les sous-niveaux) se masque involontairement lorsqu’elle est survolée au passage de la souris.

Autrement dit, IE (même les versions les plus récentes) n’est pas capable de détecter une bordure CSS comme un élément « physique ». Dans le cas de mon menu, le sous-niveau est encadré par une bordure grise de 10px d’épaisseur. Lorsqu’on navigue à la souris et qu’on fait le chemin de l’entrée « Particuliers » vers le sous-menu correspondant (cf. capture ci-dessous), le curseur traverse la bordure ce qui a pour effet une perte de focus et une disparition prématurée de la partie déroulée. (La bordure incriminée est en noir dans ma capture – lorsque le curseur de la souris passe dessus, le sous-menu disparaît).

Solution:

Ne pas utiliser la propriété CSS border pour un habillage se trouvant sur le passage de la souris. 🙂
J’ai d’abord tenté (sans succès) de remplacer la border-top par une ombre interne avec la propriété CSS box-shadow et la valeur inset.

La solution qui fonctionne consiste à utiliser un dégradé CSS (gradient). On commence par générer son dégradé via un outil en ligne comme Ultimate CSS Gradient Generator par Colorzilla.

Le code CSS généré est le suivant:

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+10,ffffff+10,ffffff+100 */
background: #000000; /* Old browsers */
background: -moz-linear-gradient(top, #000000 0%, #000000 10%, #ffffff 10%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #000000 0%,#000000 10%,#ffffff 10%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #000000 0%,#000000 10%,#ffffff 10%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+10,ffffff+10,ffffff+100 */

background: #000000; /* Old browsers */

background: -moz-linear-gradient(top, #000000 0%, #000000 10%, #ffffff 10%, #ffffff 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, #000000 0%,#000000 10%,#ffffff 10%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom, #000000 0%,#000000 10%,#ffffff 10%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

Suivant les navigateurs qu’on souhaite supporter, on peut réduire le code à cette ligne (à condition d’utiliser un outil d’auto-prefixage CSS qui rajoute les -moz, -webkit, -o, -ms en fonction du scope de navigateurs et OS prédéfinis) :

background: linear-gradient(to bottom, #000000 0%,#000000 10%,#ffffff 10%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

1	background: linear-gradient(to bottom, #000000 0%,#000000 10%,#ffffff 10%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

Il reste ensuite à modifier cette ligne en fonction de notre besoin. Dans mon cas, remplacer par les bonnes couleurs et remplacer l’unité % par du px pour coller aux 10px de ma bordure:

background: linear-gradient(to bottom, #000000 0%,#000000 10px,#ffffff 10px,#ffffff 100%);

1	background: linear-gradient(to bottom, #000000 0%,#000000 10px,#ffffff 10px,#ffffff 100%);

Articles récents

Catégories

Archives

Méta

Étiquette : hover

[Magento 2] Des images au survol hover dans la liste produit en ajoutant un attribut custom

En backoffice:

Créer un attribut custom `hover_image`

ATTENTION

Plaçons notre attribut custom `hover_image` dans le bon groupe d’attributs (images)

Affectons une image hover à l’un de nos produits

Dans le code source:

app/design/frontend/VendorName/themename/etc/view.xml

app/design/frontend/VendorName/themename/Magento_Catalog/templates/product/list.phtml

app/design/frontend/VendorName/themename/Magento_Catalog/web/css/source/_modules.less

En bash: