visuel – devfrontend.info

Testé fonctionnel Magento 2.4. La markup HTML de la fiche produit a cependant été surchargé par rapport au standard. On retrouve la première rangée d’informations sur deux colonnes (gauche: visuel principal et carousel Fotorama; droite: libellé produit, prix, formulaire d’ajout au panier).

<div class="column main">
    <section class="product-top row">
        <div class="product-top-left"></div>
        <div class="product-top-right"></div>
    </section>
</div>

</section>

</div>

Surcharger la largeur et la hauteur max du visuel principal dans le fichier etc/view.xml de votre thème:

<?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="product_page_image_large" type="image"/>
            <image id="product_page_image_medium" type="image">
                <width>968</width>
                <height>968</height>
            </image>
        </images>
    </media>

<?xml version="1.0"?>

<media>

</image>

</images>

</media>

Le code LESS (qui fait appel à un mixin spécifique permettant d’écrire des boucles FOR qui exploitent des données consignées dans un ARRAY. Il ne faudra donc pas oublier de l’inclure dans votre projet! (Documentation).
Lisez les commentaires dans mon code pour plus de documentation:

.product-top {
    .product-top-left {
        /*
         * @screen-resolutions: un tableau des résolutions d'écran (largeurs) ciblées par le redimensionnement du visuel principal de la fiche produit.
         * C'est LA SEULE VALEUR A MODIFIER! Ajouter ou retirer des résolutions d'écran selon vos besoins de support.
         * Résolutions les plus répandues en Europe (en décembre 2020 pour ce qui est renseigné dans le tableau):
         * https://gs.statcounter.com/screen-resolution-stats/all/europe
         */
        @screen-resolutions: 1280px, 1366px, 1440px, 1536px, 1640px, 1920px;
        /*
         * @global-gutter-width: la largeur des gouttières telle que définie dans :root{ var(--gutter) }.
         * @thumbs-col-width: la largeur (marge à droite comprise) de la colonne des miniatures.
         */
        @global-gutter-width: 3.75rem;
        @thumbs-col-width: 80px;

        // Dépendant de "global/lib/for.less" pour exploiter les données issues d'un tableau dans une boucle FOR avec LESS;
        .for(@screen-resolutions); .-each(@value) {
            /*
             * @parent-row-width: la largeur de l'élément du DOM qui a la classe ".product-top".
             */
            @parent-row-width: @value - (@global-gutter-width * 2);
            @media (min-width: @value) {
                min-height: (@parent-row-width/2) !important;
                flex: 0 0 (@parent-row-width/2) + @thumbs-col-width !important;
            }
        }
    }
}

/*
 * Résolution minimum consignée dans le tableau @screen-resolutions
 */
@media (min-width: 1280px) {
    .product-top .product-top-left {
        max-width: 100% !important;
        .fotorama__stage__frame {
            display: flex;
            background: rgba(231, 231, 231, 0.5);
        }
        .product.media .fotorama__stage img {
            top: unset !important;
            align-self: center;
        }
    }
}

.product-top {

.product-top-left {

* @screen-resolutions: un tableau des résolutions d'écran (largeurs) ciblées par le redimensionnement du visuel principal de la fiche produit.

* C'est LA SEULE VALEUR A MODIFIER! Ajouter ou retirer des résolutions d'écran selon vos besoins de support.

* Résolutions les plus répandues en Europe (en décembre 2020 pour ce qui est renseigné dans le tableau):

* https://gs.statcounter.com/screen-resolution-stats/all/europe

@screen-resolutions: 1280px, 1366px, 1440px, 1536px, 1640px, 1920px;

* @global-gutter-width: la largeur des gouttières telle que définie dans :root{ var(--gutter) }.

* @thumbs-col-width: la largeur (marge à droite comprise) de la colonne des miniatures.

@global-gutter-width: 3.75rem;

@thumbs-col-width: 80px;

// Dépendant de "global/lib/for.less" pour exploiter les données issues d'un tableau dans une boucle FOR avec LESS;

.for(@screen-resolutions); .-each(@value) {

* @parent-row-width: la largeur de l'élément du DOM qui a la classe ".product-top".

@parent-row-width: @value - (@global-gutter-width * 2);

@media (min-width: @value) {

min-height: (@parent-row-width/2) !important;

flex: 0 0 (@parent-row-width/2) + @thumbs-col-width !important;

}

* Résolution minimum consignée dans le tableau @screen-resolutions

@media (min-width: 1280px) {

.product-top .product-top-left {

max-width: 100% !important;

.fotorama__stage__frame {

display: flex;

background: rgba(231, 231, 231, 0.5);

}

.product.media .fotorama__stage img {

top: unset !important;

align-self: center;

}

Version non factorisée (ça fait la même chose en moins bien conceptualisé et en beaucoup plus chiant à maintenir):

.product-top {
    .product_page_image_large(@parent-row-width) {
        /*
         * @parent-row-width: la largeur de l'élément qui a la classe .product-top
         * 80px: la largeur (marge à droite comprise) de la colonne des miniatures
         */
        max-width: 100% !important;
        min-height: (@parent-row-width/2) !important;
        flex: 0 0 (@parent-row-width/2) + 80px !important;
    }
    // Résolutions les plus répandues en Europe en décembre 2020:
    // https://gs.statcounter.com/screen-resolution-stats/all/europe
    @media (min-width: 1280px) {
        // @parent-row-width: 1160px;
        .product-top-left {
            .product_page_image_large(1160px);

            .fotorama__stage__frame {
                display: flex;
                background: rgba(231, 231, 231, 0.5);
            }
            .product.media .fotorama__stage img {
                top: unset !important;
                align-self: center;
            }
        }
    }
    @media (min-width: 1366px) {
        // @parent-row-width: 1246px;
        .product-top-left {
            .product_page_image_large(1246px);
        }
    }
    @media (min-width: 1440px) {
        // @parent-row-width: 1320px;
        .product-top-left {
            .product_page_image_large(1320px);
        }
    }
    @media (min-width: 1536px) {
        // @parent-row-width: 1416px;
        .product-top-left {
            .product_page_image_large(1416px);
        }
    }
    @media (min-width: 1640px) {
        // @parent-row-width: 1775px;
        .product-top-left {
            .product_page_image_large(1775px);
        }
    }
    @media (min-width: 1920px) {
        // @parent-row-width: 1800px;
        .product-top-left {
            .product_page_image_large(1800px);
        }
    }
}

.product-top {

.product_page_image_large(@parent-row-width) {

* @parent-row-width: la largeur de l'élément qui a la classe .product-top

* 80px: la largeur (marge à droite comprise) de la colonne des miniatures

max-width: 100% !important;

min-height: (@parent-row-width/2) !important;

flex: 0 0 (@parent-row-width/2) + 80px !important;

}

// Résolutions les plus répandues en Europe en décembre 2020:

// https://gs.statcounter.com/screen-resolution-stats/all/europe

@media (min-width: 1280px) {

// @parent-row-width: 1160px;

.product-top-left {

.product_page_image_large(1160px);

.fotorama__stage__frame {

display: flex;

background: rgba(231, 231, 231, 0.5);

}

.product.media .fotorama__stage img {

top: unset !important;

align-self: center;

}

@media (min-width: 1366px) {

// @parent-row-width: 1246px;

.product-top-left {

.product_page_image_large(1246px);

}

@media (min-width: 1440px) {

// @parent-row-width: 1320px;

.product-top-left {

.product_page_image_large(1320px);

}

@media (min-width: 1536px) {

// @parent-row-width: 1416px;

.product-top-left {

.product_page_image_large(1416px);

}

@media (min-width: 1640px) {

// @parent-row-width: 1775px;

.product-top-left {

.product_page_image_large(1775px);

}

@media (min-width: 1920px) {

// @parent-row-width: 1800px;

.product-top-left {

.product_page_image_large(1800px);

}

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

Articles récents

Catégories

Archives

Méta

Étiquette : visuel

[Magento 2] Etirer de manière homothétique le visuel principal de la fiche produit affiché via Fotorama

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

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:

Créer un attribut custom `hover_image`

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