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).
|
1 2 3 4 5 6 |
<div class="column main"> <section class="product-top row"> <div class="product-top-left"></div> <div class="product-top-right"></div> </section> </div> |
Surcharger la largeur et la hauteur max du visuel principal dans le fichier etc/view.xml de votre thème:
|
1 2 3 4 5 6 7 8 9 10 11 |
<?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> |
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:
|
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 34 35 36 37 38 39 40 41 42 43 44 45 46 |
.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):
|
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
.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); } } } |