Tagmagento

[Magento 2] Ajouter un block (une page) au compte client via un layout XML

29/07/2020 / admin

Dans votre module, dans view/frontend/layout/ ou dans un thème dans Vendor_Module/layout/, rajouter un layout XML contenant ceci:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="customer_account"/>
    <body>
        <referenceContainer name="content">
            <!-- ici votre block -->
        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<body>

</referenceContainer>

</body>

</page>

<update handle="customer_account"/> fait référence au layout global des pages du compte client (dans le module Customer, layout/customer_account.xml).

<referenceContainer name="content"> fait référence à la zone content de la page.

[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][SEO] Configurer le fichier robots.txt et la Meta robots depuis l’interface d’administration

21/07/2020 / admin

Un peu de documentation sur les meta robots et le fichier robots.txt
How to Configure Robots.txt and Meta Robots for Magento 2. Un tutoriel complet et détaillé. Version PDF pour la postérité.
La devdoc officielle de Magento 2: Add site map and search engine robots. Voir notamment la partie sur l’erreur 404 en cas de tentative d’accès au fichier robots.txt en prod. C’est important car ce fichier doit pouvoir être lu depuis le navigateur!

Empêcher des pages d’être vues par les moteurs de recherche:

Cette fonctionnalité va nous être utile pour toutes les pages de notre site que nous ne souhaitons PAS voir référencées par les moteurs de recherche (exemple: landing pages).

Intervenir sur le fichier robots.txt (qui contient des directives destinées aux moteurs de recherche pour l’indexation des pages de votre site) pour empêcher le référencement de certaines pages:

CONTENU > Design > Configuration
Cliquer sur « Modifier » pour la ligne « Global – Main website » (seule ligne disponible normalement)
Scroller un peu vers le bas, ouvrir le volet « Moteurs de recherche »
Dans le champ « Modifier les instructions personnalisées du fichier robots.txt », ajouter le code suivant:

User-agent: *

# Empêcher le référencement des landing pages en les listant ci-dessous:

Disallow: /abonnements-landing.html
Disallow: /landing-test-1.html

User-agent: *

# Empêcher le référencement des landing pages en les listant ci-dessous:

Disallow: /abonnements-landing.html

Disallow: /landing-test-1.html

Ce code empêche le référencement des pages /abonnements-landing.html et /landing-test-1.html de votre site.

Trouver les URLS des pages:

CATALOGUE > Catégories
Choisir une landing page dans l’arborescence en colonne de gauche (par exemple Abonnements landing > Landing test #1)
Ouvrir le volet « Optimisations pour les moteurs de recherche »
Le champ « Clé d’URL » contient la valeur « landing-test-1 ». C’est une partie de l’URL à déclarer.
Il suffit de rajouter une ligne {{Disallow: /}} + la valeur du champ « Clé d’URL » + {{.html}} dans le champ « Modifier les instructions personnalisées du fichier robots.txt » vu plus haut pour rajouter une page à exclure du référencement de votre site.

Ne pas oublier de vider les caches après chaque modification du champ « Modifier les instructions personnalisées du fichier robots.txt »:

SYSTEME > Outils > Gestion du cache
Cocher la ligne « Configuration » (la 1ère ligne normalement)
Sélectionner « Rafraîchir » dans la liste des actions et cliquer sur le bouton « Envoyer »

[Magento 2] Mise à jour du prix final dans une fiche produit lorsqu’on vide dynamiquement via javascript une option sous forme de champ texte

29/06/2020 / admin

Je me suis retrouvé dans un cas extrêmement particulier dans lequel l’utilisateur pouvait, depuis une fiche produit, rajouter des options en cascade: il pouvait en premier lieu choisir une couleur de papier cadeau (+2,00 €).

Une fois le papier cadeau sélectionné (et seulement à cette condition), il pouvait choisir d’ajouter une étiquette avec un prénom (+0,50 €).

Ce champ étiquette était limité à 14 caractères. La fonctionnalité était gérée via un widget remaining-characters.js fourni dans Magento 2.

Problème: lorsque l’utilisateur avait renseigné choisi un papier cadeau et renseigné un prénom, le prix total s’incrémentait de la somme des deux options (+2,00 € +0,50 €). Mais lorsque l’utilisateur décidait finalement de ne pas prendre de papier cadeau en décochant l’option de couleur, seul le prix du papier se décrémentait (-2,00 €) et le prix total comprenait encore celui de l’option étiquette (+0,50 €).

Solution: le plug-in qui compte le nombre de caractères présents dans le champ écoute les événements change keyup paste:

_create: function () {
    [...]
    this.element.on('change keyup paste', this.updateCharacterCount.bind(this));
},

_create: function () {

[...]

this.element.on('change keyup paste', this.updateCharacterCount.bind(this));

Lorsqu’un utilisateur décoche l’option papier cadeau, on vide l'input text de l’option étiquette avec la méthode .val(''), mais de cette manière le plug-in qui écoute les événements change keyup paste n’a pas « capté » que le champ a été vidé et, de ce fait, ne remet pas le pric total à jour correctement.

Pour lui signifier que le champ a été vidé de manière dynamique, il faut chaîner notre déclaration avec la méthode .trigger() qui contient en argument l’événement change:

// Vider le champ Etiquette et reset le compteur de lettres
$('.input-text', $giftWrapSticker)
    .val('')
    .trigger('change');
$('.character-counter', $giftWrapSticker).addClass('no-display');

// Vider le champ Etiquette et reset le compteur de lettres

$('.input-text', $giftWrapSticker)

.val('')

.trigger('change');

$('.character-counter', $giftWrapSticker).addClass('no-display');

Le code complet pour gérer les deux options en cascade

La deuxième contrainte était de faire fonctionner des checkboxes un peu comme des boutons radio (un seul des x checkboxes devait pouvoir être sélectionné à la fois), mais de pouvoir n’en sélectionner aucune.

    <script>
        require([
            'jquery'
        ], function ($) {
            // option PAPIER CADEAU + ETIQUETTE

            const $giftWrapOptions = $('#giftWrapOptions'),
                  $giftWrapPrice   = $('#giftWrapPrice'),
                  $giftWrapSticker = $('#giftWrapSticker');

            // On récupère le prix de la 1ère option (ttes les options ont le même prix) pour l'afficher à côté du libellé
            let giftWrapOptionPrice = $('.field:first-of-type .price-wrapper', $giftWrapOptions).text();
            $giftWrapPrice.text(giftWrapOptionPrice);

            // Au clic sur l'une des options
            $('input[type="checkbox"]', $giftWrapOptions).on('click', function(event){
                let $this = $(this);

                // S'assurer que seule UNE option (ou aucune) est sélectionnée
                if($this.hasClass('is-current-choice')){
                    $this.removeClass('is-current-choice');
                } else {
                    $giftWrapOptions
                        .find('.is-current-choice')
                        .click()
                        .removeClass('is-current-choice');
                    $this.addClass('is-current-choice');
                }

                // Afficher/masquer le champ Etiquette
                if($('input[type="checkbox"]', $giftWrapOptions).is(':checked')){
                    $giftWrapSticker.removeClass('is-hidden');
                } else {
                    $giftWrapSticker.addClass('is-hidden');
                    // Vider le champ Etiquette et reset le compteur de lettres
                    $('.input-text', $giftWrapSticker)
                        .val('')
                        .trigger('change');
                    $('.character-counter', $giftWrapSticker).addClass('no-display');
                }
            });
        });
    </script>

require([

'jquery'

], function ($) {

// option PAPIER CADEAU + ETIQUETTE

const $giftWrapOptions = $('#giftWrapOptions'),

$giftWrapPrice = $('#giftWrapPrice'),

$giftWrapSticker = $('#giftWrapSticker');

// On récupère le prix de la 1ère option (ttes les options ont le même prix) pour l'afficher à côté du libellé

let giftWrapOptionPrice = $('.field:first-of-type .price-wrapper', $giftWrapOptions).text();

$giftWrapPrice.text(giftWrapOptionPrice);

// Au clic sur l'une des options

$('input[type="checkbox"]', $giftWrapOptions).on('click', function(event){

let $this = $(this);

// S'assurer que seule UNE option (ou aucune) est sélectionnée

if($this.hasClass('is-current-choice')){

$this.removeClass('is-current-choice');

} else {

$giftWrapOptions

.find('.is-current-choice')

.click()

.removeClass('is-current-choice');

$this.addClass('is-current-choice');

}

// Afficher/masquer le champ Etiquette

if($('input[type="checkbox"]', $giftWrapOptions).is(':checked')){

$giftWrapSticker.removeClass('is-hidden');

} else {

$giftWrapSticker.addClass('is-hidden');

// Vider le champ Etiquette et reset le compteur de lettres

$('.input-text', $giftWrapSticker)

.val('')

.trigger('change');

$('.character-counter', $giftWrapSticker).addClass('no-display');

}

});

</script>

[Magento 2] Un champ Date de Naissance custom avec validation côté javascript, placeholder et masque de saisie avec le plugin Cleave

23/06/2020 / admin

Testé fonctionnel Magento 2.3, 2.4

Magento 2 Dev Docs – Custom form validation
Autre propos (pas top en terme d’UI, mais peut servir dans un autre cas d’override): DOB Validation with three fields in magento2
Magento 2 Get Current Store Date Time

Nous allons supprimer le widget calendar du champ date de naissance du formulaire de création de compte de Magento 2.
Attention: le champ Date de Naissance n’apparaît pas par défaut! Il faut l’activer via l’interface d’administration (Google est ton ami).

Demo en ligne de Cleave.js.

`app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/dob.phtml`:

Apporter plus d’attention au passages suivants:

data-validate='{"required":true, "validate-date": {"dateFormat": "dd\/MM\/y"}, "validate-dob": true}' sur l'input type="text" permet la bonne validation de votre champ Date de Naissance
<script>require(['cleave'... qui initialise le masque de saisie sur le champ via le plugin Cleave.js

<?php
/** @var \Magento\Customer\Block\Widget\Dob $block */

$fieldCssClass = 'field date field-' . $block->getHtmlId();
$fieldCssClass .= $block->isRequired() ? ' required' : '';
?>
<div class="<?= $block->escapeHtmlAttr($fieldCssClass) ?>">
    <label class="label" for="<?= /* @noEscape */ $block->getHtmlId() ?>"><span><?= $block->escapeHtml($block->getStoreLabel('dob')) ?></span></label>
    <div class="control customer-dob">
        <input type="text"
               name="dob"
               id="dob"
               placeholder="jj/mm/aaaa"
               data-validate='{"required":true, "validate-date": {"dateFormat": "dd\/MM\/y"}, "validate-dob": true}' />
        <?php if ($_message = $block->getAdditionalDescription()) : ?>
            <div class="note"><?= $block->escapeHtml($_message) ?></div>
        <?php endif; ?>
    </div>
</div>

<script>
    require([
        'cleave'
    ], function (Cleave) {
        var cleave = new Cleave('#dob', {
            date: true,
            delimiter: '/',
            datePattern: ['d', 'm', 'Y']
        });
    });
</script>

<?php

/** @var \Magento\Customer\Block\Widget\Dob $block */

$fieldCssClass = 'field date field-' . $block->getHtmlId();

$fieldCssClass .= $block->isRequired() ? ' required' : '';

<div class="<?= $block->escapeHtmlAttr($fieldCssClass) ?>">

<label class="label" for="<?= /* @noEscape */ $block->getHtmlId() ?>"><span><?= $block->escapeHtml($block->getStoreLabel('dob')) ?></span></label>

<input type="text"

name="dob"

id="dob"

placeholder="jj/mm/aaaa"

data-validate='{"required":true, "validate-date": {"dateFormat": "dd\/MM\/y"}, "validate-dob": true}' />

<?php if ($_message = $block->getAdditionalDescription()) : ?>

<div class="note"><?= $block->escapeHtml($_message) ?></div>

<?php endif; ?>

</div>

require([

'cleave'

], function (Cleave) {

var cleave = new Cleave('#dob', {

date: true,

delimiter: '/',

datePattern: ['d', 'm', 'Y']

});

</script>

`app/design/frontend/MyVendor/mytheme/requirejs-config.js`:

var config = {
    map: {
        "*": {
            cleave: 'js/vendor/cleave/dist/cleave.min'
        }
    },
    [...]
};

var config = {

map: {

"*": {

cleave: 'js/vendor/cleave/dist/cleave.min'

}

[...]

};

Import des sources de Cleave.js dans le projet:

Au moment où j’ai mise en place cette fonctionnalité, la dernière version tagguée de Cleave.js était la v1.6.0, mais n’hésitez pas à mettre à jour avec une version supérieure si existante!

Placez la source minifiée dans app/design/frontend/MyVendor/mytheme/web/js/vendor/cleave/dist/cleave.min.js.

[Magento 2] Un plugin jQuery custom pour rendre cliquable une zone complète plutôt que le seul lien qu’elle renferme avec x-magento-init et requireJS

16/06/2020 / admin

Exemple d’utilisation: les cartes (items) catégories ou produits du listing catégories ou produits.

Rendre toute une zone cliquable, plutôt qu’uniquement le lien qu’elle contient. Exemple: une carte produit dans le listing produit. app/design/frontend/MyVendor/mytheme/Magento_Catalog/templates/product/list.phtml.

Utilisation dans un fichier PHTML:

    // <script type="text/x-magento-init">
    //     {
    //         // ID ou classe CSS placée sur l'élément parent (zone qui devient cliquable)
    //         ".product-item": {
    //             // Alias de ce plug-in
    //             "zoneClick": {
    //                 // Paramètre "targetElement": l'élément enfant qui contient l'URL vers laquelle rediriger (valeur d'un attribut "href")
    //                 "targetElement": "a.product-item-link",
    //                 // Paramètre "exclude": la zone cliquable peut renfermer d'autres liens (un bouton d'ajout au panier par exemple) qui doivent rester actifs.
    //                 // Renseigner les IDs ou classes de ces liens ici.
    //                 // Toujours déclarer sous forme de tableau, même si il n'y a qu'un seul élément à exclure. Peut être vide, mais PAS OMIS.
    //                 "exclude": [ ".icon-addtocart.icon", ".toto", ".titi", ".tutu" ]
    //             }
    //         }
    //     }
    // </script>

// <script type="text/x-magento-init">

// {

// // ID ou classe CSS placée sur l'élément parent (zone qui devient cliquable)

// ".product-item": {

// // Alias de ce plug-in

// "zoneClick": {

// // Paramètre "targetElement": l'élément enfant qui contient l'URL vers laquelle rediriger (valeur d'un attribut "href")

// "targetElement": "a.product-item-link",

// // Paramètre "exclude": la zone cliquable peut renfermer d'autres liens (un bouton d'ajout au panier par exemple) qui doivent rester actifs.

// // Renseigner les IDs ou classes de ces liens ici.

// // Toujours déclarer sous forme de tableau, même si il n'y a qu'un seul élément à exclure. Peut être vide, mais PAS OMIS.

// "exclude": [ ".icon-addtocart.icon", ".toto", ".titi", ".tutu" ]

// }

// </script>

Détail des fichiers à mettre en place:

app/web/app/design/frontend/MyVendor/mytheme/web/js/zone-click.js

define([
    "jquery"
], function($) {
    "use strict";

    return function (options, element) {
        $(element).on('click', function (event) {
            let $this = $(this),
                $clickedElement = $(event.target),
                excludeAmount = options.exclude.length,
                testExclude = [];

            // On vérifie que l'élément cliqué ne fait pas partie de la liste des exclusions:
            let i;
            for (i = 0; i < excludeAmount; i++){
                if ($clickedElement.is(options.exclude[i])) {
                    testExclude.push(1);
                } else {
                    // nada ...
                }
            }

            if (testExclude.length > 0) {
                // Si l'élément cliqué fait partie de la liste des exclusions, on ne redirige pas vers la page cible.
                testExclude = [];
            } else {
                // Sinon, on redirige vers la page cible.
                window.location = $this.find(options.targetElement).attr('href');
                return false;
            }
        });
    };
});
// https://www.siphor.com/different-ways-using-javascript-magento-2/
// https://jason.codes/2019/06/magento-2-create-jquery-ui-widget/

define([

"jquery"

], function($) {

"use strict";

return function (options, element) {

$(element).on('click', function (event) {

let $this = $(this),

$clickedElement = $(event.target),

excludeAmount = options.exclude.length,

testExclude = [];

// On vérifie que l'élément cliqué ne fait pas partie de la liste des exclusions:

let i;

for (i = 0; i < excludeAmount; i++){

if ($clickedElement.is(options.exclude[i])) {

testExclude.push(1);

} else {

// nada ...

}

if (testExclude.length > 0) {

// Si l'élément cliqué fait partie de la liste des exclusions, on ne redirige pas vers la page cible.

testExclude = [];

} else {

// Sinon, on redirige vers la page cible.

window.location = $this.find(options.targetElement).attr('href');

return false;

}

});

};

});

// https://www.siphor.com/different-ways-using-javascript-magento-2/

// https://jason.codes/2019/06/magento-2-create-jquery-ui-widget/

Note: pour être sûr de ce que vous allez renseigner en paramètre exclude, vous pouvez ajouter dans le code ci-dessus un console.log($clickedElement.attr('class'));. Puis allez en front et cliquez sur les éléments à exclure. Les classes qui leur sont affectées apparaîtront en console (F12).

Déclaration via requireJS: app/design/frontend/MyVendor/mytheme/requirejs-config.js

var config = {
    map: {
        "*": {
            zoneClick: 'js/zone-click'
        }
    }
};

var config = {

map: {

"*": {

zoneClick: 'js/zone-click'

}

};

app/design/frontend/MyVendor/mytheme/Magento_Catalog/templates/product/list.phtml

        <script type="text/x-magento-init">
            {
                ".product-item": {
                    "zoneClick": {
                        "targetElement": "a.product-item-link",
                        "exclude": [ ".icon-addtocart.icon" ]
                    }
                }
            }
        </script>

{

".product-item": {

"zoneClick": {

"targetElement": "a.product-item-link",

"exclude": [ ".icon-addtocart.icon" ]

}

</script>

[Magento 2] Des cases à cocher et des boutons radio sexy dans vos formulaires avec le markup HTML du core

10/06/2020 / admin

ATTENTION: les input et label doivent respectivement avoir des attributs for et id ayant une valeur identique afin que les styles fonctionnent correctement!

// Magento 2 core forms sexy inputs type=radio and type=checkbox
// !!! Will only work with Magento 2 core forms markup (replace "checkbox" with "radio" whenever needed) !!!
// <div class="field choice">
//     <input type="checkbox" id="is_subscribed" class="checkbox" />
//     <label for="is_subscribed" class="label"><span>Abonnez-vous à la lettre d’information</span></label>
// </div>
.field.choice {
    @custom-field_choice---width: 20px;
    position: relative;
    input[type="radio"],
    input[type="checkbox"] {
        position: absolute;
        left: -99999em;
        + .label {
            &:before {
                content: "";
                display: inline-block;
                vertical-align: bottom;
                margin-right: 8px;
                width: @custom-field_choice---width;
                height: @custom-field_choice---width;
                border: 1px solid @color_green;
                cursor: pointer;
                background: #fff;

                // Fine tuning vertical-align if needed
                //position: relative;
                //top: 2px;
            }
        }
        &:checked {
            + .label {
                &:before {
                    background: @color_green;
                }
            }
        }
    }
    input[type="radio"] {
        + .label {
            &:before {
                border-radius: @custom-field_choice---width;
            }
        }
    }
    input[type="checkbox"] {
        + .label {
            &:before {
                border-radius: @custom-field_choice---width/10;
            }
        }
    }
}

// Magento 2 core forms sexy inputs type=radio and type=checkbox

// !!! Will only work with Magento 2 core forms markup (replace "checkbox" with "radio" whenever needed) !!!

// <div class="field choice">

// <input type="checkbox" id="is_subscribed" class="checkbox" />

// <label for="is_subscribed" class="label"><span>Abonnez-vous à la lettre d’information</span></label>

// </div>

.field.choice {

@custom-field_choice---width: 20px;

position: relative;

input[type="radio"],

input[type="checkbox"] {

position: absolute;

left: -99999em;

+ .label {

&:before {

content: "";

display: inline-block;

vertical-align: bottom;

margin-right: 8px;

width: @custom-field_choice---width;

height: @custom-field_choice---width;

border: 1px solid @color_green;

cursor: pointer;

background: #fff;

// Fine tuning vertical-align if needed

//position: relative;

//top: 2px;

}

&:checked {

+ .label {

&:before {

background: @color_green;

}

input[type="radio"] {

+ .label {

&:before {

border-radius: @custom-field_choice---width;

}

input[type="checkbox"] {

+ .label {

&:before {

border-radius: @custom-field_choice---width/10;

}

[Magento 2] Gérer l’affichage des formulaires avec les mixins LESS de la Magento UI Library

10/06/2020 / admin

Documentation officielle: Magento UI Library – Forms mixins.

Bonnes pratiques

Si vous avez simplement l’intention de changer les valeurs des variables existantes (regardez la doc, il y en a beaucoup, vous pouvez probablement vous en tirer sans aller plus loin que ça…) faites le dans le fichier _theme.less de votre thème.

Fields customization variables – The `.lib-form-field()` mixin variables

Libellés au-dessus des champs, une colonne

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: block
            );
        }
    }
}

& when (@media-common = true) {

.fieldset {

> .field {

.lib-form-field(

@_type: block

);

}

Libellés au-dessus des champs, deux colonnes

A savoir: lorsqu’on affiche le champ sur plusieurs colonnes, on peut utiliser la variable (appartenant au mixin) @_column-number (qui répond elle-même à la variable globale @form-field-column__number paramétrée par défaut à 2 pour modifier le nombre de colonnes sur lesquelles le formulaire va s’étaler.

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: block,
                @_column: true
            );
        }
    }
}

& when (@media-common = true) {

.fieldset {

> .field {

.lib-form-field(

@_type: block,

@_column: true

);

}

Libellés à côté des champs, une colonne

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: inline
            );
        }
    }
}

& when (@media-common = true) {

.fieldset {

> .field {

.lib-form-field(

@_type: inline

);

}

Libellés à côté des champs, deux colonnes

A savoir: (je me répète…) lorsqu’on affiche le champ sur plusieurs colonnes, on peut utiliser la variable (appartenant au mixin) @_column-number (qui répond elle-même à la variable globale @form-field-column__number paramétrée par défaut à 2 pour modifier le nombre de colonnes sur lesquelles le formulaire va s’étaler.

& when (@media-common = true) {
    .fieldset {
        > .field {
            .lib-form-field(
                @_type: inline,
                @_column: true
            );
        }
    }
}

& when (@media-common = true) {

.fieldset {

> .field {

.lib-form-field(

@_type: inline,

@_column: true

);

}

[Magento 2] Utiliser l’Argument Attributes et l’Item Class dans un Layout XML pour ajouter une classe spécifique à un élément du menu de navigation du compte client

08/06/2020 / admin

Problématique: ajouter des icônes devant chaque entrée du menu de navigation du compte client. Cette opération s’effectue en plusieurs étapes:

Dans un layout XML

Dans un fichier app/design/frontend/MyVendor/mytheme/Magento_Customer/layout/customer_account.xml, nous allons utiliser les attributs <argument name="attributes" et <item name="class pour affecter des classes CSS à l’élément a d’une entrée de menu (dans mon exemple, l’entrée Mon compte apparenant au module Magento_Customer et les classes icon-customer-nav icon-account):

<referenceBlock name="customer_account_navigation">
    <referenceBlock name="customer-account-navigation-account-link" template="Magento_Customer::account/customer-nav-link.phtml">
        <arguments>
            <argument name="sortOrder" xsi:type="number">250</argument>
            <argument name="attributes" xsi:type="array">
                <item name="class" xsi:type="string">icon-customer-nav icon-account</item>
            </argument>
        </arguments>
    </referenceBlock>
</referenceBlock>
</block>

<item name="class" xsi:type="string">icon-customer-nav icon-account</item>

</argument>

</arguments>

</referenceBlock>

</block>

A ce stade nous avons un problème: les classes s’ajoutent sur l’élément a et on voit bien nos icônes, sauf lorsque l’entrée de menu en question est en current et que l’élément a est remplacé par un strong. Il perd alors les classes que nous lui avons affecté.

Dans un template PHTML

Nous allons créer un fichier app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/account/customer-nav-link.phtml qui va venir surcharger le markup généré au départ par le block vendor/magento/framework/View/Element/Html/link/Current.php.

Ce fichier va permettre que les valeurs que nous avons renseigné précédemment pour les attributs <argument name="attributes" et <item name="class dans le fichier app/design/frontend/MyVendor/mytheme/Magento_Customer/layout/customer_account.xml puissent être également affectées à l’élément strong lorsqu’il remplace le lien pour signifier la page current.

Notre fichier complet:

<?php
/**
 * @var block \Magento\Framework\View\Element\Html\Link\Current
 */

$attributesHtml = '';
$attributes = $block->getAttributes();
if ($attributes) {
    foreach ($attributes as $attribute => $value) {
        $attributesHtml .= ' ' . $attribute . '="' . $block->escapeHtml($value) . '"';
    }
}

if ( $block->isCurrent() ) { ?>
    <li class="nav item current">
        <strong <?= $attributesHtml ?>>
            <?= $block->escapeHtml(__($block->getLabel())) ?>
        </strong>
    </li>
<?php } else { ?>
    <li class="nav item <?= $block->getIsHighlighted() ? 'current' : ''?>">
        <a href="<?= $block->escapeHtml($block->getHref()) ?>"
            <?= $block->getTitle() ? ' title="' . $block->escapeHtml(__($block->getTitle())) . '"' : ''; ?>
            <?= $attributesHtml ?>
        >

        <?php if ($block->getIsHighlighted()) : ?>
            <strong>
        <?php endif; ?>
                <?= $block->escapeHtml(__($block->getLabel())); ?>
        <?php if ($block->getIsHighlighted()) : ?>
            </strong>
        <?php endif; ?>

        </a>
    </li>
<?php } ?>

<?php

/**

* @var block \Magento\Framework\View\Element\Html\Link\Current

$attributesHtml = '';

$attributes = $block->getAttributes();

if ($attributes) {

foreach ($attributes as $attribute => $value) {

$attributesHtml .= ' ' . $attribute . '="' . $block->escapeHtml($value) . '"';

}

if ( $block->isCurrent() ) { ?>

<?= $block->escapeHtml(__($block->getLabel())) ?>

</strong>

</li>

<?php } else { ?>

<li class="nav item <?= $block->getIsHighlighted() ? 'current' : ''?>">

<a href="<?= $block->escapeHtml($block->getHref()) ?>"

<?= $block->getTitle() ? ' title="' . $block->escapeHtml(__($block->getTitle())) . '"' : ''; ?>

<?= $attributesHtml ?>

<?php if ($block->getIsHighlighted()) : ?>

<?php endif; ?>

<?= $block->escapeHtml(__($block->getLabel())); ?>

<?php if ($block->getIsHighlighted()) : ?>

</strong>

<?php endif; ?>

</a>

</li>

<?php } ?>

Explications (sommaires…)

Ici, toutes les références à $this qu’on peut trouver dans Current.php sont replacées par $block dans customer-nav-link.phtml.

La partie haute:

$attributesHtml = '';
$attributes = $block->getAttributes();
if ($attributes) {
    foreach ($attributes as $attribute => $value) {
        $attributesHtml .= ' ' . $attribute . '="' . $block->escapeHtml($value) . '"';
    }
}

$attributesHtml = '';

$attributes = $block->getAttributes();

if ($attributes) {

foreach ($attributes as $attribute => $value) {

$attributesHtml .= ' ' . $attribute . '="' . $block->escapeHtml($value) . '"';

}

…est une référence à la fonction privée getAttributesHtml() dans Current.php. On voit plus bas que l’attribut et ses valeurs sont affectées aux éléments strong et a:

if ( $block->isCurrent() ) { ?>
    <li class="nav item current">
        <strong <?= $attributesHtml ?>>
        [..]
    </li>
<?php } else { ?>
    <li class="nav item <?= $block->getIsHighlighted() ? 'current' : ''?>">
        <a href="<?= $block->escapeHtml($block->getHref()) ?>"
            [...]
            <?= $attributesHtml ?>
        >
            [...]
        </a>
    </li>
<?php } ?>

if ( $block->isCurrent() ) { ?>

[..]

</li>

<?php } else { ?>

<li class="nav item <?= $block->getIsHighlighted() ? 'current' : ''?>">

<a href="<?= $block->escapeHtml($block->getHref()) ?>"

[...]

<?= $attributesHtml ?>

[...]

</a>

</li>

<?php } ?>

Faire appel à notre template PHTML dans le layout XML

Afin que notre surcharge PHP soit prise en compte, il faut déclarer notre template app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/account/customer-nav-link.phtml dans le layout app/design/frontend/MyVendor/mytheme/Magento_Customer/layout/customer_account.xml, au niveau du bloc référencé (il faut le faire pour chaque bloc):

<referenceBlock name="customer-account-navigation-account-link" template="Magento_Customer::account/customer-nav-link.phtml">

1	<referenceBlock name="customer-account-navigation-account-link" template="Magento_Customer::account/customer-nav-link.phtml">

A savoir: l'argument name="attributes" peut reçevoir des item name="" totalement custom/spécifiques. Exemple:

<referenceBlock name="customer-account-navigation-account-link">
    <arguments>
       <argument name="label" xsi:type="string" translate="true">Account Dashboard</argument>
       <argument name="path" xsi:type="string">customer/account</argument>
       <argument name="sortOrder" xsi:type="number">250</argument>
       <argument name="attributes" xsi:type="array">
          <item name="mobile" xsi:type="string">hidden</item>
       </argument>
    </arguments>
</referenceBlock>

<argument name="label" xsi:type="string" translate="true">Account Dashboard</argument>

<argument name="path" xsi:type="string">customer/account</argument>

<item name="mobile" xsi:type="string">hidden</item>

</argument>

</arguments>

</referenceBlock>

…et ensuite dans votre CSS:

@media (max-width: 767px) {
   *[mobile="hidden"] {
      display: none !important;
   }
}

@media (max-width: 767px) {

*[mobile="hidden"] {

display: none !important;

}

[Magento 2] Ajouter un lien de déconnexion dans le menu du dashboard compte client

08/06/2020 / admin

Ajouter le fichier Magento_Customer/layout/customer_account.xml dans le dossier de votre thème et y placer le code suivant:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>        
        <referenceBlock name="customer_account_navigation"><!--ifconfig="wishlist/general/active"-->
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="customer-account-navigation-logout-link">
                <arguments>
                    <argument name="path" xsi:type="string">customer/account/logout</argument>
                    <argument name="label" xsi:type="string">Logout</argument>
                    <argument name="sortOrder" xsi:type="number">1</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

<?xml version="1.0"?>

<body>

<argument name="path" xsi:type="string">customer/account/logout</argument>

<argument name="label" xsi:type="string">Logout</argument>

</arguments>

</block>

</referenceBlock>

</body>

</page>

Theme by Anders Norén — Up ↑

Juste quelques bonnes pratiques pour faire de votre site une usine à gaz :)

Articles récents

Catégories

Tags

Archives

Méta

Tagmagento

Solution #2 (fonctionnelle)

Solution #1 (pas focntionnelle)

Le fichier template PHTML:

Bonus:

Le fichier layout XML:

Les styles:

Empêcher des pages d’être vues par les moteurs de recherche:

Trouver les URLS des pages:

Ne pas oublier de vider les caches après chaque modification du champ « Modifier les instructions personnalisées du fichier robots.txt »:

Le code complet pour gérer les deux options en cascade

app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/dob.phtml:

app/design/frontend/MyVendor/mytheme/requirejs-config.js:

Import des sources de Cleave.js dans le projet:

Utilisation dans un fichier PHTML:

Détail des fichiers à mettre en place:

Bonnes pratiques

Libellés au-dessus des champs, une colonne

Libellés au-dessus des champs, deux colonnes

Libellés à côté des champs, une colonne

Libellés à côté des champs, deux colonnes

Dans un layout XML

Dans un template PHTML

Notre fichier complet:

Explications (sommaires…)

Faire appel à notre template PHTML dans le layout XML

`app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/dob.phtml`:

`app/design/frontend/MyVendor/mytheme/requirejs-config.js`: