Étiquette : fiche produit

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

05/01/2021 / admin

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);

}

[Magento 2] Afficher un lien vers la fiche produit depuis la quickview en exploitant le localStorage

23/07/2020 / admin

edit: je me suis rendu compte que la solution #1 n’était pas fonctionnelle. En effet, à l’utilisation, le local storage (clé: product_data_storage) était vide/n’avait aucune valeur!

Solution #2 (fonctionnelle)

app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/list.phtml: au clic sur un item produit (parce qu’au clic sur le trigger de la quickview, il ne se passait rien), on cherche dans le markup enfant le lien vers la fiche produit cible et on le stocke dans le local storage via window.localStorage.setItem('clé', valeur);.

<script>
    require([
        'jquery'
    ], function ($) {
        $('.product-item').on('click', function(){
            let quickviewRelatedProductURL = $(this).find('.product-item-link').attr('href');
            window.localStorage.setItem('quickviewRelatedProductURL', quickviewRelatedProductURL);
        });
    });
</script>

require([

'jquery'

], function ($) {

$('.product-item').on('click', function(){

let quickviewRelatedProductURL = $(this).find('.product-item-link').attr('href');

window.localStorage.setItem('quickviewRelatedProductURL', quickviewRelatedProductURL);

});

</script>

app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/view/product-url.phtml: au clic sur le lien « voir la fiche produit », on récupère l’URL dans le local storage (clé quickviewRelatedProductURL):

<div class="product-url">
    <a id="currentlyViewedProductURL" class="link-see-product"><?= __('link-see-product'); ?></a>
</div>
<script>
    require([
        'jquery'
    ], function ($) {
        const $currentlyViewedProductURL = $('#currentlyViewedProductURL');

        $currentlyViewedProductURL.on('click', function(){
            // ...on fait une redirection JS dans la fenêtre parente de l'iFrame (la quickview) qui contient une partie de la fiche produit
            window.top.location.href = window.localStorage.getItem('quickviewRelatedProductURL');

            // ...et seulement ensuite, on simule le click sur la croix de fermeture de la quickview.
            $('.action-close', parent.document).click();
        });
    });
</script>

</div>

require([

'jquery'

], function ($) {

const $currentlyViewedProductURL = $('#currentlyViewedProductURL');

$currentlyViewedProductURL.on('click', function(){

// ...on fait une redirection JS dans la fenêtre parente de l'iFrame (la quickview) qui contient une partie de la fiche produit

window.top.location.href = window.localStorage.getItem('quickviewRelatedProductURL');

// ...et seulement ensuite, on simule le click sur la croix de fermeture de la quickview.

$('.action-close', parent.document).click();

});

</script>

Le layout XML et les styles de la solution #1 restent valables. Merci de vous y référer.

Solution #1 (pas focntionnelle)

Quickview rattachée au module CartQuickPro fourni avec le thème Venuse.

La quickview s’affiche en cliquant sur un item produit dans le listing produit (page catégorie) du site Magento 2. Elle affiche, dans une iFrame, une partie des éléments de la fiche produit (c’est le même code qui est utilisé pour la quickview et la fiche produit).

Le fichier template PHTML:

Objectif: placer un lien vers la fiche produit dans la page.
On récupère l’URL de la fiche produit en consultation dans le localStorage (clé: product_data_storage) sous forme de chaîne JSON. Il faut convertir cette chaîne JSON en objet JavaScript pour pouvoir l’exploiter.
On récupère l’ID du produit dans le DOM.
Au clic sur l’élément a#currentlyViewedProductURL (le lien « Voir la fiche produit »)…
- …on fait une redirection JS dans la fenêtre parente de l’iFrame (la quickview) qui contient une partie de la fiche produit
- …et seulement ensuite, on simule le click sur la croix de fermeture de la quickview.

app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/view/product-url.phtml

<div class="product-url">
    <a id="currentlyViewedProductURL" class="link-see-product"><?= __('link-see-product'); ?></a>
</div>
<script>
    require([
        'jquery'
    ], function ($) {
        const $currentlyViewedProductURL = $('#currentlyViewedProductURL');

        // On récupère l'URL de la fiche produit dans le localStorage (clé: product_data_storage) sous forme de chaîne JSON.
        // Il faut convertir cette chaîne JSON en objet JavaScript pour pouvoir l'exploiter.
        // https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/
        let productDataStorageObject = JSON.parse(window.localStorage.getItem('product_data_storage')),
        // On récupère l'ID du produit dans le DOM.
            viewedProductID = $('.price-box').attr('data-product-id');

        // On assigne l'URL de la fiche produit à l'élément a#currentlyViewedProductURL via le pseudo attribut href.
        $currentlyViewedProductURL.attr('href', productDataStorageObject[viewedProductID].url);

        // Au clic sur l'élément a#currentlyViewedProductURL (le lien "Voir la fiche produit")...
        $currentlyViewedProductURL.on('click', function(){
            // ...on fait une redirection JS dans la fenêtre parente de l'iFrame (la quickview) qui contient une partie de la fiche produit
            // https://stackoverflow.com/questions/580669/redirect-parent-window-from-an-iframe-action
            window.top.location.href = productDataStorageObject[viewedProductID].url;

            // ...et seulement ensuite, on simule le click sur la croix de fermeture de la quickview.
            // https://stackoverflow.com/questions/23913951/how-to-get-an-element-outside-of-iframe-with-javascript-or-jquery/23914011
            $('.action-close', parent.document).click();
        });
    });
</script>

</div>

require([

'jquery'

], function ($) {

const $currentlyViewedProductURL = $('#currentlyViewedProductURL');

// On récupère l'URL de la fiche produit dans le localStorage (clé: product_data_storage) sous forme de chaîne JSON.

// Il faut convertir cette chaîne JSON en objet JavaScript pour pouvoir l'exploiter.

// https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/

let productDataStorageObject = JSON.parse(window.localStorage.getItem('product_data_storage')),

// On récupère l'ID du produit dans le DOM.

viewedProductID = $('.price-box').attr('data-product-id');

// On assigne l'URL de la fiche produit à l'élément a#currentlyViewedProductURL via le pseudo attribut href.

$currentlyViewedProductURL.attr('href', productDataStorageObject[viewedProductID].url);

// Au clic sur l'élément a#currentlyViewedProductURL (le lien "Voir la fiche produit")...

$currentlyViewedProductURL.on('click', function(){

// ...on fait une redirection JS dans la fenêtre parente de l'iFrame (la quickview) qui contient une partie de la fiche produit

// https://stackoverflow.com/questions/580669/redirect-parent-window-from-an-iframe-action

window.top.location.href = productDataStorageObject[viewedProductID].url;

// ...et seulement ensuite, on simule le click sur la croix de fermeture de la quickview.

// https://stackoverflow.com/questions/23913951/how-to-get-an-element-outside-of-iframe-with-javascript-or-jquery/23914011

$('.action-close', parent.document).click();

});

</script>

Bonus:

(inutile pour ce qu’on essaye de faire, mais bon à savoir) Récupérer la première clé d’un objet JSON sans connaître le libellé de cette clé:

// https://stackoverflow.com/questions/42097143/how-to-get-first-key-pair-element-of-json-object-without-knowing-key-and-deletin
let firstKey = Object.keys(productDataStorageObject)[0];
$('#currentlyViewedProductURL').attr('href', productDataStorageObject[firstKey].url);

// https://stackoverflow.com/questions/42097143/how-to-get-first-key-pair-element-of-json-object-without-knowing-key-and-deletin

let firstKey = Object.keys(productDataStorageObject)[0];

$('#currentlyViewedProductURL').attr('href', productDataStorageObject[firstKey].url);

Le fichier layout XML:

On s’en sert pour positionner le template PHTML dans la page.

app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view.xml

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="content">
        <referenceContainer name="product.info.main">
            <container name="product.info.url" after="product.info">
                <block class="Magento\Framework\View\Element\Template" name="product.url" template="Magento_Catalog::product/view/product-url.phtml"/>
            </container>
        </referenceContainer>

<?xml version="1.0"?>

</container>

</referenceContainer>

Les styles:

.product-url {
    display: none;
    width: 100%;

    // On affiche le lien vers la fiche produit UNIQUEMENT dans la quickview
    .cartquickpro-catalog_product-view & {
        display: flex;
    }

    .link-see-product {
        text-decoration: underline;
        &:hover {
            text-decoration: none;
        }
    }
}

.product-url {

display: none;

width: 100%;

// On affiche le lien vers la fiche produit UNIQUEMENT dans la quickview

.cartquickpro-catalog_product-view & {

display: flex;

}

.link-see-product {

text-decoration: underline;

&:hover {

text-decoration: none;

}

[Magento 2] Récupérer la valeur d’un attribut produit dans une page category, product list, product

26/03/2020 / admin

Les codes des attributs sont visibles en backoffice en se rendant dans STORES > Product [Attributes].

Attention: de manière générale votre attribut ne sera pas visible en front si il n’est pas configuré comme tel en admin. STORES > Product [Attributes]. Editez l’attribut de votre choix. Dans la partie Storefront Properties, vous pouvez configurer la visibilité de votre attribut pour les pages du catalogue, son utilisation pour la recherche, la focntionnalité de comparaison, etc…

Pour un attribut de type `text`

// Pour un attribut donc le code name est "test_frank":
// solution 1.
<?php echo $_product->getData('test_frank'); ?>
// solution 2.
<?php echo $_product->getTestFrank(); ?>

// Pour un attribut donc le code name est "test_frank":

// solution 1.

<?php echo $_product->getData('test_frank'); ?>

// solution 2.

<?php echo $_product->getTestFrank(); ?>

// solution 3.
<?php
$customAttribute = $_product->getData('test_frank');
?>
<span><?= $customAttribute ?></span>

// solution 3.

<?php

$customAttribute = $_product->getData('test_frank');

Pour un attribut de type `dropdown`

<?= $_product->getAttributeText('test_frank'); ?>

1	<?= $_product->getAttributeText('test_frank'); ?>

En BO, mettre « Used in Product Listing » à « Yes » dans ATTRIBUTE INFORMATION > Storefront Properties.

Articles récents

Catégories

Archives

Méta

Étiquette : fiche produit

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

[Magento 2] Afficher un lien vers la fiche produit depuis la quickview en exploitant le localStorage

Solution #2 (fonctionnelle)

Solution #1 (pas focntionnelle)

Le fichier template PHTML:

Bonus:

Le fichier layout XML:

Les styles:

[Magento 2] Récupérer la valeur d’un attribut produit dans une page category, product list, product

Pour un attribut de type `text`

Pour un attribut de type `dropdown`

Solution #2 (fonctionnelle)

Solution #1 (pas focntionnelle)

Le fichier template PHTML:

Bonus:

Le fichier layout XML:

Les styles:

Pour un attribut de type text

Pour un attribut de type dropdown

Pour un attribut de type `text`

Pour un attribut de type `dropdown`