devfrontend.info – Le bloc-notes professionnel d'un développeur front-end senior

[UIKit v3] Boilerplate pour ajouter un composant javascript custom au framework

08/04/2021 / admin

Attention: article en work-in-progress! Testé fonctionnel UIKit v3.6.18.

Nous allons ajouter un composant Drilldown. Ce billet vous donnera seulement un boilerplate. Pas le composant complet.

Quelques petites choses à savoir avant de démarrer:

Un développement custom sous UIKit doit obligatoirement partir de la branche develop si vous souhaitez soumettre par la suite votre composant pour ajout au framework. Sinon, vous pouvez partir du dernier tag en date.
LESS est la langage de style principal pour développer sous UIKit et les fichiers générés dans le dossier dist/css/*.css le sont à partir des sources LESS. La commande npm run build-scss ne fait que générer une version au format SCSS des sources LESS! Vous pouvez tout-à-fait partir des sources SCSS pour vos développements custom, mais il vous faudra fournir vous-même le moyen de les compiler (via Gulp, Webpack ou autre) et votre composant ne pourra pas être ajouté au framework. Corrigez-moi si je dis des bêtises.

Les fichiers de style à créer/à modifier

Créer `src/less/components/drilldown.less`

// Name:            Drilldown
// Description:     Component to create drilldowns
//
// Component:       `uk-drilldown`
//
// Sub-objects:     `uk-drilldown-title`
//                  `uk-drilldown-content`
//
// States:          `uk-open`
//
// ========================================================================


// Variables
// ========================================================================

@drilldown-item-margin-top:                    @global-margin;

@drilldown-title-font-size:                    @global-medium-font-size;
@drilldown-title-line-height:                  1.4;
@drilldown-title-color:                        @global-emphasis-color;
@drilldown-title-hover-color:                  @global-color;

@drilldown-content-margin-top:                 @global-margin;


/* ========================================================================
   Component: Drilldown
 ========================================================================== */

.uk-drilldown {
  padding: 0;
  list-style: none;
  .hook-drilldown;
}


// Hooks
// ========================================================================

.hook-drilldown-misc;

.hook-drilldown() {}
.hook-drilldown-misc() {}

// Name: Drilldown

// Description: Component to create drilldowns

// Component: `uk-drilldown`

// Sub-objects: `uk-drilldown-title`

// `uk-drilldown-content`

// States: `uk-open`

// ========================================================================

// Variables

// ========================================================================

@drilldown-item-margin-top: @global-margin;

@drilldown-title-font-size: @global-medium-font-size;

@drilldown-title-line-height: 1.4;

@drilldown-title-color: @global-emphasis-color;

@drilldown-title-hover-color: @global-color;

@drilldown-content-margin-top: @global-margin;

/* ========================================================================

Component: Drilldown

========================================================================== */

.uk-drilldown {

padding: 0;

list-style: none;

.hook-drilldown;

}

// Hooks

// ========================================================================

.hook-drilldown-misc;

.hook-drilldown() {}

.hook-drilldown-misc() {}

Modifier `src/less/components/_import.less`

Ajouter la ligne @import "drilldown.less"; après le bloc contenant tous les imports // JavaScript:

// JavaScript
@import "accordion.less";
[...]

// JavaScript (Custom)
@import "drilldown.less";

// JavaScript

@import "accordion.less";

[...]

// JavaScript (Custom)

@import "drilldown.less";

Créer `src/less/theme/drilldown.less`

//
// Component: Drilldown
//
// ========================================================================


// Variables
// ========================================================================

//
// New
//

@drilldown-icon-margin-left:                   10px;
@drilldown-icon-color:                         @global-color;
@internal-drilldown-open-image:                "../../images/backgrounds/accordion-open.svg";
@internal-drilldown-close-image:               "../../images/backgrounds/accordion-close.svg";


// Component
// ========================================================================

.hook-drilldown() {}

// Component: Drilldown

// ========================================================================

// Variables

// ========================================================================

// New

@drilldown-icon-margin-left: 10px;

@drilldown-icon-color: @global-color;

@internal-drilldown-open-image: "../../images/backgrounds/accordion-open.svg";

@internal-drilldown-close-image: "../../images/backgrounds/accordion-close.svg";

// Component

// ========================================================================

.hook-drilldown() {}

Modifier `src/less/theme/_import.less`

Ajouter la ligne @import "drilldown.less"; après le bloc contenant tous les imports // JavaScript (même manip’ que pour la partie components:

// JavaScript
@import "accordion.less";
[...]

// JavaScript (Custom)
@import "drilldown.less";

// JavaScript

@import "accordion.less";

[...]

// JavaScript (Custom)

@import "drilldown.less";

Commande pour compiler les fichiers source au format LESS:

yarn compile-less (les icônes sont également compilées via cette commande).

[Webpack Encore] Résoudre les problèmes d’imports et de sous-imports de composants JS à l’utilisation de frameworks comme UiKit ou Foundation 6

10/03/2021 / admin

Note: vous pouvez vous référer à l’article: [Webpack Encore] Utiliser la méthode addAliases pour résoudre les problèmes de sous-imports de fichiers sass/scss à l’utilisation de frameworks comme UiKit ou Foundation 6 pour résoudre la même question côté CSS.

Sources:

Module not found: Error: Can’t resolve ‘uikit-util’ #3399

Erreur: « ./node_modules/uikit/src/js/api/boot.js » contains a reference to the file « uikit-util ».

Utiliser la méthode addAliases() de Webpack Encore pour créer un alias vers le chemin de référence du fichier non trouvé dans node_modules. Dans le fichier webpack.config.js:

const path = require('path');

[...]

Encore
    .addAliases({
        'uikit-util': path.resolve(__dirname, './node_modules/uikit/src/js/util')
    })

[...]

const path = require('path');

[...]

Encore

.addAliases({

'uikit-util': path.resolve(__dirname, './node_modules/uikit/src/js/util')

})

[...]

Etendre la configuration de Webpack Encore pour faciliter la surchage et l’écrasement de fichiers JS

Home / Documentation / Frontend / Advanced Webpack Config (version 5.2)
Webpack – Resolve (webpack v5.26.3)

Dans le fichier webpack.config.js:

const Encore = require('@symfony/webpack-encore');

Encore
    // Ici, toute la config Webpack Encore...
;

// fetch the config, then modify it!
const config = Encore.getWebpackConfig();

// add an extension
config.resolve.modules = ['assets', 'node_modules'];
// console.log(config);

// export the final config
module.exports = config;
// was: module.exports = Encore.getWebpackConfig();

const Encore = require('@symfony/webpack-encore');

Encore

// Ici, toute la config Webpack Encore...

;

// fetch the config, then modify it!

const config = Encore.getWebpackConfig();

// add an extension

config.resolve.modules = ['assets', 'node_modules'];

// console.log(config);

// export the final config

module.exports = config;

// was: module.exports = Encore.getWebpackConfig();

Ici, Webpack va d’abord chercher le fichier JS dans le dossier assets. Si il ne le trouve pas, il va se rabattre sur le dossier node_modules.

Ajouter un console.log(config); vous permettra de visualiser la config au format JSON dans votre console.

Importer uniquement une sélection de modules issus d’un framework (et pas tout le framework)

Dans le fichier JS qui sert de point d’entrée à Webpack (dans mon exemple assets/app.js):

// UIkit
import UIkit from './uikit';

// components can be called from the imported UIkit reference
UIkit.notification('Hello world.');

// UIkit

import UIkit from './uikit';

// components can be called from the imported UIkit reference

UIkit.notification('Hello world.');

Dans le fichier JS qui sert à importer uniquement les modules voulus (dans mon exemple assets/uikit.js):

import UIkit from 'uikit/dist/js/uikit-core';
// import Countdown from 'uikit/dist/js/components/countdown';
// import Filter from 'uikit/dist/js/components/filter';
// import Lightbox from 'uikit/dist/js/components/lightbox';
// import LightboxPanel from 'uikit/dist/js/components/lightbox-panel';
import Notification from 'uikit/dist/js/components/notification';
// import Parallax from 'uikit/dist/js/components/parallax';
// import Slider from 'uikit/dist/js/components/slider';
// import SliderParallax from 'uikit/dist/js/components/slider-parallax';
// import Slideshow from 'uikit/dist/js/components/slideshow';
// import Sortable from 'uikit/dist/js/components/sortable';
import Tooltip from 'uikit/dist/js/components/tooltip';
// import Upload from 'uikit/dist/js/components/upload';

import Icons from 'uikit/dist/js/uikit-icons';

UIkit.use(Icons);

// UIkit.component('countdown', Countdown);
// UIkit.component('filter', Filter); // new
// UIkit.component('gridParallax', GridParallax);
// UIkit.component('lightbox', Lightbox);
// UIkit.component('lightboxPanel', LightboxPanel); // new
UIkit.component('notification', Notification);
// UIkit.component('parallax', Parallax);
// UIkit.component('slider', Slider); // new
// UIkit.component('sliderParallax', SliderParallax); // new
// UIkit.component('slideshow', Slideshow);
// UIkit.component('sortable', Sortable);
UIkit.component('tooltip', Tooltip);
// UIkit.component('upload', Upload);

export default UIkit;

import UIkit from 'uikit/dist/js/uikit-core';

// import Countdown from 'uikit/dist/js/components/countdown';

// import Filter from 'uikit/dist/js/components/filter';

// import Lightbox from 'uikit/dist/js/components/lightbox';

// import LightboxPanel from 'uikit/dist/js/components/lightbox-panel';

import Notification from 'uikit/dist/js/components/notification';

// import Parallax from 'uikit/dist/js/components/parallax';

// import Slider from 'uikit/dist/js/components/slider';

// import SliderParallax from 'uikit/dist/js/components/slider-parallax';

// import Slideshow from 'uikit/dist/js/components/slideshow';

// import Sortable from 'uikit/dist/js/components/sortable';

import Tooltip from 'uikit/dist/js/components/tooltip';

// import Upload from 'uikit/dist/js/components/upload';

import Icons from 'uikit/dist/js/uikit-icons';

UIkit.use(Icons);

// UIkit.component('countdown', Countdown);

// UIkit.component('filter', Filter); // new

// UIkit.component('gridParallax', GridParallax);

// UIkit.component('lightbox', Lightbox);

// UIkit.component('lightboxPanel', LightboxPanel); // new

UIkit.component('notification', Notification);

// UIkit.component('parallax', Parallax);

// UIkit.component('slider', Slider); // new

// UIkit.component('sliderParallax', SliderParallax); // new

// UIkit.component('slideshow', Slideshow);

// UIkit.component('sortable', Sortable);

UIkit.component('tooltip', Tooltip);

// UIkit.component('upload', Upload);

export default UIkit;

Ici, j’importe uniquement les modules notification, tooltip et uikit-icons. Le fichier généré par webpack pour le front ne contiendra pas le code des autres modules du framework UIkit.

[Webpack Encore] Utiliser la méthode addAliases pour résoudre les problèmes de sous-imports de fichiers sass/scss à l’utilisation de frameworks comme UiKit ou Foundation 6

09/03/2021 / admin

Source: Webpack sass loader resolve absolute path

/webpack.config.js:

const path = require('path');
const Encore = require('@symfony/webpack-encore');

[...]

Encore
    .addAliases({
        '@uk': path.resolve(__dirname, './node_modules/uikit/src/scss'),
        '@uk-components': path.resolve(__dirname, './node_modules/uikit/src/scss/components'),
        '@uk-theme': path.resolve(__dirname, './node_modules/uikit/src/scss/theme')
    })

[...]

const path = require('path');

const Encore = require('@symfony/webpack-encore');

[...]

Encore

.addAliases({

'@uk': path.resolve(__dirname, './node_modules/uikit/src/scss'),

'@uk-components': path.resolve(__dirname, './node_modules/uikit/src/scss/components'),

'@uk-theme': path.resolve(__dirname, './node_modules/uikit/src/scss/theme')

})

[...]

/assets/styles/apps.scss.

// @import uikit
// https://getuikit.com/docs/sass#how-to-build

// @import your custom variables and variables overwrites here.
@import "~uikit/src/scss/variables.scss";
// @import your custom mixin overwrites here.
@import "~uikit/src/scss/mixins.scss";
@import "~uikit/src/scss/uikit.scss"; // Cherche d'abord l'existence d'une surcharge (./assets/styles/uikit/src/scss/uikit.scss) avant de pointer vers ./node_modules/uikit/src/scss/uikit.scss

// @import uikit

// https://getuikit.com/docs/sass#how-to-build

// @import your custom variables and variables overwrites here.

@import "~uikit/src/scss/variables.scss";

// @import your custom mixin overwrites here.

@import "~uikit/src/scss/mixins.scss";

@import "~uikit/src/scss/uikit.scss"; // Cherche d'abord l'existence d'une surcharge (./assets/styles/uikit/src/scss/uikit.scss) avant de pointer vers ./node_modules/uikit/src/scss/uikit.scss

ATTENTION: afin que le principe de fallback décrit dans l’exemple (surcharge si existante, sinon fichier natif consigné dans node_modules), il est impératif de respecter l’arborescence native de votre framework dans votre chemin vers le fichier surchargé.

Exemple: si je veux surcharger le fichier natif ./node_modules/uikit/src/scss/uikit.scss, je dois respecter l’arborescence suivante: ./assets/styles/uikit/src/scss/uikit.scss.

/assets/styles/uikit/src/scss/components/_import.scss: ce fichier est une surcharge de /node_modules/uikit/src/scss/components/_import.scss.

Par le biais de cette surcharge, nous pouvons:

Commenter les composants que nous ne souhaitons pas utiliser dans notre projet: //@import "table.scss";
Faire pointer les composants que nous allons utiliser en l’état fourni par le framework (sans en modifier l’aspect ou le comportement) vers la source consignée dans le dossier node_modules: @import "~@uk-components/base.scss";
Faire pointer les composants que nous allons surcharger (nous allons modifier l’aspect ou le comportement prévu par le framework) vers les fichiers consignés dans le dossier assets/styles: @import "link.scss";

// Base
@import "~@uk-components/base.scss"; // Fichier natif. Pointe vers: ./node_modules/uikit/src/scss/components/base.scss

// Elements
@import "link.scss"; // Surcharge. Pointe vers: ./assets/styles/uikit/src/scss/components/link.scss

// Base

@import "~@uk-components/base.scss"; // Fichier natif. Pointe vers: ./node_modules/uikit/src/scss/components/base.scss

// Elements

@import "link.scss"; // Surcharge. Pointe vers: ./assets/styles/uikit/src/scss/components/link.scss

[Pimcore] Utiliser le Bundle Webpack Encore de Symfony

06/03/2021 / admin

ATTENTION: Testé fonctionnel (moyennant mes ajustements ci-dessous) sur les bases de la demo officielle de Pimcore qui tournait, au moment de mes tests, sous Pimcore v6.8.10. Source: msenkpiel.de – Using Symfony Webpack-Encore-Bundle with Pimcore et version PDF pour la postérité.

Doc officielle Symfony/Webpack Encore: Encore: Setting up your Project
Symfony5: The Fast Track (is the best book to learn modern Symfony development, from zero to production. +300 pages showcasing Symfony with Docker, APIs, queues & async tasks, Webpack, SPAs, etc.): Step 22: Styling the User Interface with Webpack

Résoudre l’erreur Could not find the entrypoints file from Webpack: the file « /var/www/html/web/build/entrypoints.json » does not exist.

Attention à bien vérifier les deux fichiers suivants par rapport à ce qui est indiqué dans le billet de blog de référence. J’ai eu une erreur Could not find the entrypoints file from Webpack: the file « /var/www/html/web/build/entrypoints.json » does not exist. en respectant à la lettre ce qui est indiqué. En modifiant les deux fichiers ci-dessous conformément à ce que je décris, ça a fonctionné.

webpack.config.js

/pimcore-demo/webpack.config.js. Attention au paramètre .setOutputPath() pour lequel il faut mettre 'web/build' (et non pas 'public/build'.

Attention, si vous utilisez le skeleton officiel de Pimcore le paramètre .setOutputPath('public/build') sera peut-être valide (pas testé)…

Encore
    // directory where compiled assets will be stored
    .setOutputPath('web/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

Encore

// directory where compiled assets will be stored

.setOutputPath('web/build/')

// public path used by the web server to access the output path

.setPublicPath('/build')

// only needed for CDN's or sub-directory deploy

//.setManifestKeyPrefix('build/')

config.yml

/pimcore-demo/app/config/config.yml

#### SYMFONY OVERRIDES
framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/web/build/manifest.json'

webpack_encore:
    output_path: '%kernel.project_dir%/web/build'

#### SYMFONY OVERRIDES

framework:

assets:

json_manifest_path: '%kernel.project_dir%/web/build/manifest.json'

webpack_encore:

output_path: '%kernel.project_dir%/web/build'

Remarque: nous avons /pimcore-demo/config/packages/assets/assets.yaml qui contient aussi une référence au dossier public/. Je ne l’ai pas modifié lors de mon test.

framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

framework:

assets:

json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

Ajout des liens vers les fichiers compilés dans un template Twig

Attention: veiller à bien positionner l’appel à la source JS juste avant la fermeture du tag </body>. Sinon on peut avoir des problèmes à l’exécution de certains JS, comme par exemple avec l’exemple d’intégration du framework UIkit avec Webpack ou j’obtenais une erreur cannot read property appendChild of undefined.

    {% block javascripts %}
        {{ encore_entry_script_tags('app') }}
    {% endblock %}
</body>

{% block javascripts %}

{% endblock %}

</body>

[Magento 2] Astuces pour adapter rapidement du code javascript aux standards jQuery UI Widget

26/02/2021 / admin

L’intérêt de ce billet est de donner quelques astuces pour adapter rapidement du code javascript aux standards jQuery UI Widget pour une meilleure exploitation dans Magento 2.

Télécharger les sources: Magento2-jQuery-widget-example.

Dans cette archive au format ZIP, deux fichiers:

la version « old » du code du module, fonctionnelle mais pas formatée à la sauce jQuery UI Widget Factory
la version standardisée jQuery UI Widget Factory du code, pour une meilleure exploitation dans Magento 2

Note: très bonne ressource, en marge de la doc officielle, pour créer un widget jQuery UI pour Magento 2.

Découpage du squelette de base d’un widget jQuery UI pour Magento 2

Note: notre fichier d’exemple est placé dans un thème Magento 2 suivant le chemin: app/design/frontend/MyVendor/mytheme/web/js/attribute-carousel.js

On commence par un bon vieux define qui nous servira à définir notre widget en tant que de module via RequireJS. Il pourra ensuite s’articuler avec d’autres modules définis en tant que tels, toujours via RequireJS:

define([
    'jquery', // obligatoire
    'jquery-ui-modules/widget', // obligatoire
    'autre module...', // facultatif
    'autre module...', // facultatif
    'slick' // le plugin tiers jQuery AMD Slick Carousel
], function($) {
    'use strict';

define([

'jquery', // obligatoire

'jquery-ui-modules/widget', // obligatoire

'autre module...', // facultatif

'slick' // le plugin tiers jQuery AMD Slick Carousel

], function($) {

'use strict';

Déclaration ici des variables globales pour ce widget (facultatif, votre widget n’en a peut-être pas besoin):

    let ATTRIBUTE_SELECTOR_ELEMENT_ID,
        SELECTED_OPTION_INDEX;

1 2	let ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX;

Déclaration du widget sous la forme $.widget('mage.<nomDuWidget>', {:

    $.widget('mage.nomDuWidget', {

1	$.widget('mage.nomDuWidget', {

Déclaration des options du widget sous forme d’objet options, si il exploite des arguments (facultatif).
Le libellé options ne doit pas être modifié!
(voir aussi les commentaires directement dans le bout de code ;))

        options: {

            // Option "simple":
            attributeSelectorId: '[id^="attribute"]',

            // Passage de plusieurs paramètres sous forme de sous-objet "slick" (par exemple, si on souhaite exploiter un plugin jQuery tiers qui propose des paramètres):
            slick: {
                infinite: false,
                slidesToShow: 3,
                slidesToScroll: 3,
                prevArrow: '<button type="button" class="clear slick-prev"><svg viewBox="0 0 100 100" class="icon icon-arrow-back-chevron"><use xlink:href="#icon-arrow-back-chevron"></use></svg></button>',
                nextArrow: '<button type="button" class="clear slick-next"><svg viewBox="0 0 100 100" class="icon icon-arrow-forward-chevron"><use xlink:href="#icon-arrow-forward-chevron"></use></svg></button>'
            }
        }, // <= ATTENTION A NE PAS OUBLIER LA VIRGULE JUSTE LA!

options: {

// Option "simple":

attributeSelectorId: '[id^="attribute"]',

// Passage de plusieurs paramètres sous forme de sous-objet "slick" (par exemple, si on souhaite exploiter un plugin jQuery tiers qui propose des paramètres):

slick: {

infinite: false,

slidesToShow: 3,

slidesToScroll: 3,

prevArrow: '<button type="button" class="clear slick-prev"><svg viewBox="0 0 100 100" class="icon icon-arrow-back-chevron"><use xlink:href="#icon-arrow-back-chevron"></use></svg></button>',

nextArrow: '<button type="button" class="clear slick-next"><svg viewBox="0 0 100 100" class="icon icon-arrow-forward-chevron"><use xlink:href="#icon-arrow-forward-chevron"></use></svg></button>'

}

}, // <= ATTENTION A NE PAS OUBLIER LA VIRGULE JUSTE LA!

La fonction privée _create" (présence obligatoire), qui sera automatiquement exécutée à chaque initialisation de ce widget depuis un PHTML, un fichier JS, …
Le libellé _create ne doit pas être modifié!

        _create: function () {

1	_create: function () {

Variabiliser le sélecteur, présent dans le DOM, sur lequel est initialisé le widget. Remarquer ici le chemin this.options.attributeSelectorId pour exploiter la valeur de l’option simple attributeSelectorId déclarée plus haut dans notre objet options.

Et variabiliser this (ici sous l’alias that) est important dès lors qu’on cherche à exécuter une fonction de ce widget (on le verra plus bas):

            const $_THIS = $(this.options.attributeSelectorId),
                  that = this;

1 2	const $_THIS = $(this.options.attributeSelectorId), that = this;

On précède chaque exécution d’une fonction de ce widget par notre « that » alias de « this »:

            that.appendCarouselToDOM($_THIS, that.ulToCarousel(that.clonedSelectToUl(that.cloneSelect($_THIS))));

1	that.appendCarouselToDOM($_THIS, that.ulToCarousel(that.clonedSelectToUl(that.cloneSelect($_THIS))));

Commentaires directement dans le bout de code 😉

            $('.slick-slide').on('click', function () {
                const $_THIS = $(this);

                // Les mises à jour des valeurs de nos variables globales se font sous ce mode:
                ATTRIBUTE_SELECTOR_ELEMENT_ID = $_THIS.closest('ul').attr('id');
                SELECTED_OPTION_INDEX = $_THIS.attr('data-slick-index');

                // Systématiquement, on précède chaque exécution d'une fonction de ce widget par notre "that" alias de "this":
                // (si on oublie le "that", la fonction n'est pas exécutée)
                that.synchronizeCarouselWithSelect(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);
                that.handleCarouselSelectedOptionClass(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);
            });
        }, // <= ATTENTION A NE PAS OUBLIER LA VIRGULE JUSTE LA!

$('.slick-slide').on('click', function () {

const $_THIS = $(this);

// Les mises à jour des valeurs de nos variables globales se font sous ce mode:

ATTRIBUTE_SELECTOR_ELEMENT_ID = $_THIS.closest('ul').attr('id');

SELECTED_OPTION_INDEX = $_THIS.attr('data-slick-index');

// Systématiquement, on précède chaque exécution d'une fonction de ce widget par notre "that" alias de "this":

// (si on oublie le "that", la fonction n'est pas exécutée)

that.synchronizeCarouselWithSelect(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);

that.handleCarouselSelectedOptionClass(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);

});

}, // <= ATTENTION A NE PAS OUBLIER LA VIRGULE JUSTE LA!

Manière de déclarer une fonction (<nomDeLaFontion>: function(<argument>, <argument>) { return <quelque chose> }):

        ulToCarousel: function(clonedSelectToUl) {

1	ulToCarousel: function(clonedSelectToUl) {

Ici, on déclare le chemin this.options.slick pour exploiter la valeur d’une option du sous-objet « slick » déclaré plus haut dans notre objet « options ».
Note: il y a probablement plus simple pour passer une série d’arguments que de repointer un à un tous les objets. Je manquais de temps sur le projet en question.

            return clonedSelectToUl.slick({
                infinite: this.options.slick.infinite,
                slidesToShow: this.options.slick.slidesToShow,
                slidesToScroll: this.options.slick.slidesToScroll,
                prevArrow: this.options.slick.prevArrow,
                nextArrow: this.options.slick.nextArrow
            });
        }, // <= ATTENTION A NE PAS OUBLIER LA VIRGULE JUSTE LA!

return clonedSelectToUl.slick({

infinite: this.options.slick.infinite,

slidesToShow: this.options.slick.slidesToShow,

slidesToScroll: this.options.slick.slidesToScroll,

prevArrow: this.options.slick.prevArrow,

nextArrow: this.options.slick.nextArrow

});

}, // <= ATTENTION A NE PAS OUBLIER LA VIRGULE JUSTE LA!

Manière de déclarer une fonction (: function(, ) { sans « return » cette fois-ci (ça fonctionne mais ce n’est pas la meilleure pratique!) }):

        synchronizeSelectWithCarousel: function(relatedElementID, selectedOptionIndex) {
            $('ul#' + relatedElementID).slick('slickGoTo', parseInt(selectedOptionIndex));
        }, // <= SAUF SI ON VIENT DE DECLARER LA TOUTE DERNIERE FONCTION DU WIDGET.

    });

synchronizeSelectWithCarousel: function(relatedElementID, selectedOptionIndex) {

$('ul#' + relatedElementID).slick('slickGoTo', parseInt(selectedOptionIndex));

}, // <= SAUF SI ON VIENT DE DECLARER LA TOUTE DERNIERE FONCTION DU WIDGET.

});

On n’oublie pas de retourner le widget avant de refermer définitivement l’accolade et la parenthèse qui embrassent (c’est bô <3!) le widget:

    return $.mage.nomDuWidget;
});

1 2	return $.mage.nomDuWidget; });

Version finale (également disponible dans le ZIP):

define([
    'jquery',
    'jquery-ui-modules/widget',
    'Magento_ConfigurableProduct/js/configurable',
    'slick'
], function($, configurable) {
    'use strict';

    let ATTRIBUTE_SELECTOR_ELEMENT_ID, // Peut être un ID de <select> ou de <ul> (carousel)
        SELECTED_OPTION_INDEX; // Index de l'option sélectionnée par l'utilisateur dans un <select> ou un <ul> (carousel)

    $.widget('mage.attributeCarousel', {
        options: {
            attributeSelectorId: '[id^="attribute"]',
            slick: {
                infinite: false,
                slidesToShow: 3,
                slidesToScroll: 3,
                prevArrow: '<button type="button" class="clear slick-prev"><svg viewBox="0 0 100 100" class="icon icon-arrow-back-chevron"><use xlink:href="#icon-arrow-back-chevron"></use></svg></button>',
                nextArrow: '<button type="button" class="clear slick-next"><svg viewBox="0 0 100 100" class="icon icon-arrow-forward-chevron"><use xlink:href="#icon-arrow-forward-chevron"></use></svg></button>'
            }
        },

        _create: function () {
            const $_THIS = $(this.options.attributeSelectorId),
                  that = this;

            // 1. On clone le <select>
            // 2. On le transforme en <ul>/<li>
            // 3. On initialise le carousel sur le markup du <select> cloné et transformé en <ul>/<li>
            // 4. On injecte le carousel dans le DOM
            that.appendCarouselToDOM($_THIS, that.ulToCarousel(that.clonedSelectToUl(that.cloneSelect($_THIS))));

            // Lorsqu'on change la valeur d'un attribut produit depuis le carousel
            $('.slick-slide').on('click', function () {
                const $_THIS = $(this);

                // Mise à jour de:
                ATTRIBUTE_SELECTOR_ELEMENT_ID = $_THIS.closest('ul').attr('id');
                SELECTED_OPTION_INDEX = $_THIS.attr('data-slick-index');

                that.synchronizeCarouselWithSelect(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);
                that.handleCarouselSelectedOptionClass(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);
            });

            // Lorsqu'on change la valeur d'un attribut produit depuis le select
            $_THIS.on('change', function () {

                // Mise à jour de:
                ATTRIBUTE_SELECTOR_ELEMENT_ID = $_THIS.attr('id');
                SELECTED_OPTION_INDEX = $_THIS.prop('selectedIndex');

                that.synchronizeSelectWithCarousel(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);
                that.handleCarouselSelectedOptionClass(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);
            });
        },

        // 1. On clone le <select>, sous conditions...
        cloneSelect: function(thisObj) {
            const $_THIS = thisObj,
                  $_THIS_ID = $_THIS.attr('id');

            // Vérifier si le select est [disabled] ou si il a déjà été cloné
            // [TODO_DEV] Rajouter une condition qui vérifie si les options du select affichent des images. Si false, on ne créera pas de carousel pour ce champ.
            if ($_THIS.attr('disabled') || $('ul#' + $_THIS_ID).length) {
                // Si l'un des deux cas est true, on ne fait rien
                return false;
            } else {
                // Sinon
                return $_THIS.clone().prop('id', $_THIS_ID);
            }
        },

        // 2. On transforme le <select> cloné en <ul>/<li>
        clonedSelectToUl: function(clonedSelect) {
            const $_CLONED_SELECT = $(clonedSelect);

            return  $_CLONED_SELECT.find("option").map(function() {
                const $_THIS = $(this);
                return $("<li>").attr("value", $_THIS.attr("value")).text($_THIS.text()).get();
            }).appendTo($("<ul>").attr({
                id: $_CLONED_SELECT.attr("id"),
                name: $_CLONED_SELECT.attr("name")
            })).parent().replaceAll($_CLONED_SELECT);
        },

        // 3. On initialise le carousel (slick) sur le markup du <select> cloné et transformé en <ul>/<li>
        ulToCarousel: function(clonedSelectToUl) {
            return clonedSelectToUl.slick({
                infinite: this.options.slick.infinite,
                slidesToShow: this.options.slick.slidesToShow,
                slidesToScroll: this.options.slick.slidesToScroll,
                prevArrow: this.options.slick.prevArrow,
                nextArrow: this.options.slick.nextArrow
            });
        },

        // 4. On injecte le carousel dans le DOM
        appendCarouselToDOM: function(thisObj, carouselElement) {
            return carouselElement.insertBefore(thisObj);
        },

        // On gère la classe CSS sur l'option sélectionnée par l'utilisateur dans le carousel
        handleCarouselSelectedOptionClass: function(relatedElementID, selectedOptionIndex) {
            $('ul#' + relatedElementID).find('.is-selected-option').removeClass('is-selected-option');
            $('[data-slick-index="' + selectedOptionIndex + '"]', 'ul#' + relatedElementID).addClass('is-selected-option');
        },

        // Synchronization slick>select (select2 se gère tout seul)
        synchronizeCarouselWithSelect: function(relatedElementID, selectedOptionIndex) {
            const SELECTED_OPTION_VALUE = $('option', 'select#' + relatedElementID).eq(selectedOptionIndex).attr('value');
            $('select#' + relatedElementID).val(SELECTED_OPTION_VALUE).trigger('change');
        },

        // synchronization select>slick (select2 se gère toujours encore tout seul :))
        synchronizeSelectWithCarousel: function(relatedElementID, selectedOptionIndex) {
            $('ul#' + relatedElementID).slick('slickGoTo', parseInt(selectedOptionIndex));

            // https://github.com/kenwheeler/slick/issues/235#issuecomment-43406956
            $(window).trigger('resize');
        }
    });

    return $.mage.attributeCarousel;
});
// https://www.siphor.com/different-ways-using-javascript-magento-2/
// https://jason.codes/2019/06/magento-2-create-jquery-ui-widget/

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

define([

'jquery',

'jquery-ui-modules/widget',

'Magento_ConfigurableProduct/js/configurable',

'slick'

], function($, configurable) {

'use strict';

let ATTRIBUTE_SELECTOR_ELEMENT_ID, // Peut être un ID de <select> ou de <ul> (carousel)

SELECTED_OPTION_INDEX; // Index de l'option sélectionnée par l'utilisateur dans un <select> ou un <ul> (carousel)

$.widget('mage.attributeCarousel', {

options: {

attributeSelectorId: '[id^="attribute"]',

slick: {

infinite: false,

slidesToShow: 3,

slidesToScroll: 3,

prevArrow: '<button type="button" class="clear slick-prev"><svg viewBox="0 0 100 100" class="icon icon-arrow-back-chevron"><use xlink:href="#icon-arrow-back-chevron"></use></svg></button>',

nextArrow: '<button type="button" class="clear slick-next"><svg viewBox="0 0 100 100" class="icon icon-arrow-forward-chevron"><use xlink:href="#icon-arrow-forward-chevron"></use></svg></button>'

}

_create: function () {

const $_THIS = $(this.options.attributeSelectorId),

that = this;

// 1. On clone le <select>

// 2. On le transforme en <ul>/<li>

// 3. On initialise le carousel sur le markup du <select> cloné et transformé en <ul>/<li>

// 4. On injecte le carousel dans le DOM

that.appendCarouselToDOM($_THIS, that.ulToCarousel(that.clonedSelectToUl(that.cloneSelect($_THIS))));

// Lorsqu'on change la valeur d'un attribut produit depuis le carousel

$('.slick-slide').on('click', function () {

const $_THIS = $(this);

// Mise à jour de:

ATTRIBUTE_SELECTOR_ELEMENT_ID = $_THIS.closest('ul').attr('id');

SELECTED_OPTION_INDEX = $_THIS.attr('data-slick-index');

that.synchronizeCarouselWithSelect(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);

that.handleCarouselSelectedOptionClass(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);

});

// Lorsqu'on change la valeur d'un attribut produit depuis le select

$_THIS.on('change', function () {

// Mise à jour de:

ATTRIBUTE_SELECTOR_ELEMENT_ID = $_THIS.attr('id');

SELECTED_OPTION_INDEX = $_THIS.prop('selectedIndex');

that.synchronizeSelectWithCarousel(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);

that.handleCarouselSelectedOptionClass(ATTRIBUTE_SELECTOR_ELEMENT_ID, SELECTED_OPTION_INDEX);

});

// 1. On clone le <select>, sous conditions...

cloneSelect: function(thisObj) {

const $_THIS = thisObj,

$_THIS_ID = $_THIS.attr('id');

// Vérifier si le select est [disabled] ou si il a déjà été cloné

// [TODO_DEV] Rajouter une condition qui vérifie si les options du select affichent des images. Si false, on ne créera pas de carousel pour ce champ.

if ($_THIS.attr('disabled') || $('ul#' + $_THIS_ID).length) {

// Si l'un des deux cas est true, on ne fait rien

return false;

} else {

// Sinon

return $_THIS.clone().prop('id', $_THIS_ID);

}

// 2. On transforme le <select> cloné en <ul>/<li>

clonedSelectToUl: function(clonedSelect) {

const $_CLONED_SELECT = $(clonedSelect);

return $_CLONED_SELECT.find("option").map(function() {

const $_THIS = $(this);

return $("<li>").attr("value", $_THIS.attr("value")).text($_THIS.text()).get();

}).appendTo($("<ul>").attr({

id: $_CLONED_SELECT.attr("id"),

name: $_CLONED_SELECT.attr("name")

})).parent().replaceAll($_CLONED_SELECT);

// 3. On initialise le carousel (slick) sur le markup du <select> cloné et transformé en <ul>/<li>

ulToCarousel: function(clonedSelectToUl) {

return clonedSelectToUl.slick({

infinite: this.options.slick.infinite,

slidesToShow: this.options.slick.slidesToShow,

slidesToScroll: this.options.slick.slidesToScroll,

prevArrow: this.options.slick.prevArrow,

nextArrow: this.options.slick.nextArrow

});

// 4. On injecte le carousel dans le DOM

appendCarouselToDOM: function(thisObj, carouselElement) {

return carouselElement.insertBefore(thisObj);

// On gère la classe CSS sur l'option sélectionnée par l'utilisateur dans le carousel

handleCarouselSelectedOptionClass: function(relatedElementID, selectedOptionIndex) {

$('ul#' + relatedElementID).find('.is-selected-option').removeClass('is-selected-option');

$('[data-slick-index="' + selectedOptionIndex + '"]', 'ul#' + relatedElementID).addClass('is-selected-option');

// Synchronization slick>select (select2 se gère tout seul)

synchronizeCarouselWithSelect: function(relatedElementID, selectedOptionIndex) {

const SELECTED_OPTION_VALUE = $('option', 'select#' + relatedElementID).eq(selectedOptionIndex).attr('value');

$('select#' + relatedElementID).val(SELECTED_OPTION_VALUE).trigger('change');

// synchronization select>slick (select2 se gère toujours encore tout seul :))

synchronizeSelectWithCarousel: function(relatedElementID, selectedOptionIndex) {

$('ul#' + relatedElementID).slick('slickGoTo', parseInt(selectedOptionIndex));

// https://github.com/kenwheeler/slick/issues/235#issuecomment-43406956

$(window).trigger('resize');

}

});

return $.mage.attributeCarousel;

});

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

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

Déclaration de notre widget jQuery UI via RequireJS

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

var config = {

    map: {
        "*": {
            attributeCarousel: 'js/attribute-carousel'
        }
    },

    // Paths defines associations from library name (used to include the library,
    // for example when using "define") and the library file path.
    paths: {
        'slick': 'js/vendor/slick/slick.min'
    },

    // Shim: when you're loading your dependencies, requirejs loads them all
    // concurrently. You need to set up a shim to tell requirejs that the library
    // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
    // on jQuery).
    shim: {
        'slick': {
            deps: ['jquery']
        }
    }
};

var config = {

map: {

"*": {

attributeCarousel: 'js/attribute-carousel'

}

// Paths defines associations from library name (used to include the library,

// for example when using "define") and the library file path.

paths: {

'slick': 'js/vendor/slick/slick.min'

// Shim: when you're loading your dependencies, requirejs loads them all

// concurrently. You need to set up a shim to tell requirejs that the library

// (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends

// on jQuery).

shim: {

'slick': {

deps: ['jquery']

}

};

Utilisation du widget dans un template PHTML de Magento 2

<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "attributeCarousel": {
                "attributeSelectorId": "#attribute76",
                "slick": {
                    "slidesToShow": 4,
                    "slidesToScroll": 4
                }
            }
        }
    }
</script>

{

"#product_addtocart_form": {

"attributeCarousel": {

"attributeSelectorId": "#attribute76",

"slick": {

"slidesToShow": 4,

"slidesToScroll": 4

}

</script>

[Magento 2] Utiliser les layouts XML pour rendre visible la navigation du compte client sur toutes les pages du site

26/02/2021 / admin

Testé fonctionnel Magento 2.4!

Nous souhaitons que la navigation du compte soit visible depuis n’importe quelle page du site, et pas uniquement dans les pages du compte client (à condition d’être connecté à un compte, bien-sûr ;)).

Attention: déplacer la navigation du compte client sur toutes les pages d’une boutique Magento 2 va demander à fournir des efforts d’adaptation côté code XML, mais également au minimum côté LESS et PHTML, voire un peu de JS pour obtenir un affichage optimal (selon l’UI attendue). Ce billet va se concentrer uniquement sur la manière de faire côté layout XML, seule ré-exploitable en l’état d’un projet à l’autre.
Attention #2: cette manipulation demande un minimum de connaissances et de conpréhension des concepts de base des layouts dans Magento 2, donc si ce n’est pas acquis ou fait, documentez-vous au préalable.

L’intérêt de procéder via XML est multiple:

Nous déplaçons une zone de l’interface utilisateur de la manière la plus propre en regard des bonnes pratiques Magento 2.
Nous allons de ce fait profiter des fonctionnalités d’héritage et d’extension natives offertes par Magento 2.
Lorsqu’un élément de ce menu sera ajouté ultérieurement (toujours selon les bonnes pratiques Magento 2) par vous ou un autre développeur (via l’installation d’un module tiers par exemple, ou le développemnt d’un module custom), celui-ci sera mis à jour automatiquement sans nécessiter une quelconque intervention de notre part.
Idem si un élément est à supprimer de ce menu ou si un module tiers est désactivé ou désinstallé: le menu sera mis à jour sans notre intervention.

Déclaration native du block menu du compte client dans un layout XML du module Customer de Magento 2

Le <block [...] name="sidebar.main.account_nav" [...] /> qui initie l’affichage du menu du compte client est, out-of-the-box, déclaré dans la pile des layout XML dans le fichier /vendor/magento/module-customer/view/frontend/layout/customer_account.xml. Le code complet, qui contient uniquement les entrées liées au module Customer, est le suivant:

<block class="Magento\Framework\View\Element\Template" name="sidebar.main.account_nav" template="Magento_Theme::html/collapsible.phtml" before="-">
    <arguments>
        <argument name="block_css" xsi:type="string">account-nav</argument>
    </arguments>
    <block class="Magento\Customer\Block\Account\Navigation" name="customer_account_navigation" before="-">
        <arguments>
            <argument name="css_class" xsi:type="string">nav items</argument>
        </arguments>
        <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-account-link">
            <arguments>
                <argument name="label" xsi:type="string" translate="true">My Account</argument>
                <argument name="path" xsi:type="string">customer/account</argument>
                <argument name="sortOrder" xsi:type="number">250</argument>
            </arguments>
        </block>
        <block class="Magento\Customer\Block\Account\Delimiter" name="customer-account-navigation-delimiter-1" template="Magento_Customer::account/navigation-delimiter.phtml">
            <arguments>
                <argument name="sortOrder" xsi:type="number">200</argument>
            </arguments>
        </block>
        <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-address-link">
            <arguments>
                <argument name="label" xsi:type="string" translate="true">Address Book</argument>
                <argument name="path" xsi:type="string">customer/address</argument>
                <argument name="sortOrder" xsi:type="number">190</argument>
            </arguments>
        </block>
        <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-account-edit-link">
            <arguments>
                <argument name="label" xsi:type="string" translate="true">Account Information</argument>
                <argument name="path" xsi:type="string">customer/account/edit</argument>
                <argument name="sortOrder" xsi:type="number">180</argument>
            </arguments>
        </block>
        <block class="Magento\Customer\Block\Account\Delimiter" name="customer-account-navigation-delimiter-2" template="Magento_Customer::account/navigation-delimiter.phtml">
            <arguments>
                <argument name="sortOrder" xsi:type="number">130</argument>
            </arguments>
        </block>
    </block>
</block>

<argument name="block_css" xsi:type="string">account-nav</argument>

</arguments>

<argument name="css_class" xsi:type="string">nav items</argument>

</arguments>

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

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

</arguments>

</block>

</arguments>

</block>

<argument name="label" xsi:type="string" translate="true">Address Book</argument>

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

</arguments>

</block>

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

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

</arguments>

</block>

</arguments>

</block>

Déplacer la déclaration du block `sidebar.main.account_nav` à la hauteur du thème

Pour rappel: nous souhaitons que la navigation du compte soit visible depuis n’importe quelle page du site, et pas uniquement dans les pages du compte client.

Nous allons pour ce faire déplacer la déclaration du block sidebar.main.account_nav à la hauteur de notre thème.

Dans votre thème (et si il n’existe pas déjà), créer le fichier app/design/frontend/MyVendor/mytheme/Magento_Theme/layout/default.xml et copiez/collez-y l’intégralité du block sidebar.main.account_nav. Dans l’exemple ci-dessous, je l’ai affecté au container after.body.start, mais vous pouvez l’affecter à un autre container, y-compris un container custom que vous auriez créer vous-même pour les besoins spécifiques à votre mise en page.

<?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>
        <referenceContainer name="after.body.start">

            <!-- navigation du compte client -->
            <block class="Magento\Framework\View\Element\Template" name="sidebar.main.account_nav" template="Magento_Theme::html/collapsible.phtml" before="-">
                <arguments>
                    <argument name="block_css" xsi:type="string">account-nav</argument>
                </arguments>
                <block class="Magento\Customer\Block\Account\Navigation" name="customer_account_navigation" before="-">
                    <arguments>
                        <argument name="css_class" xsi:type="string">nav items</argument>
                    </arguments>
                    <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-account-link">
                        <arguments>
                            <argument name="label" xsi:type="string" translate="true">My Account</argument>
                            <argument name="path" xsi:type="string">customer/account</argument>
                            <argument name="sortOrder" xsi:type="number">250</argument>
                        </arguments>
                    </block>
                    <block class="Magento\Customer\Block\Account\Delimiter" name="customer-account-navigation-delimiter-1" template="Magento_Customer::account/navigation-delimiter.phtml">
                        <arguments>
                            <argument name="sortOrder" xsi:type="number">200</argument>
                        </arguments>
                    </block>
                    <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-address-link">
                        <arguments>
                            <argument name="label" xsi:type="string" translate="true">Address Book</argument>
                            <argument name="path" xsi:type="string">customer/address</argument>
                            <argument name="sortOrder" xsi:type="number">190</argument>
                        </arguments>
                    </block>
                    <block class="Magento\Customer\Block\Account\SortLinkInterface" name="customer-account-navigation-account-edit-link">
                        <arguments>
                            <argument name="label" xsi:type="string" translate="true">Account Information</argument>
                            <argument name="path" xsi:type="string">customer/account/edit</argument>
                            <argument name="sortOrder" xsi:type="number">180</argument>
                        </arguments>
                    </block>
                    <block class="Magento\Customer\Block\Account\Delimiter" name="customer-account-navigation-delimiter-2" template="Magento_Customer::account/navigation-delimiter.phtml">
                        <arguments>
                            <argument name="sortOrder" xsi:type="number">130</argument>
                        </arguments>
                    </block>
                </block>
            </block>
            <!-- fin: navigation du compte client -->

        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<body>

<argument name="block_css" xsi:type="string">account-nav</argument>

</arguments>

<argument name="css_class" xsi:type="string">nav items</argument>

</arguments>

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

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

</arguments>

</block>

</arguments>

</block>

<argument name="label" xsi:type="string" translate="true">Address Book</argument>

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

</arguments>

</block>

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

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

</arguments>

</block>

</arguments>

</block>

</referenceContainer>

</body>

</page>

Router la déclaration intiale du block `sidebar.main.account_nav"` vers notre thème

Attention: si on compile nos XMLs en l’état, nous allons avoir un conflit entre le layout du module Customer du core de Magento 2 et le layout default.xml de notre thème, car <block class="Magento\Framework\View\Element\Template" name="sidebar.main.account_nav" est déclaré deux fois!

Dans votre thème (et si il n’existe pas déjà), créer le fichier app/design/frontend/MyVendor/mytheme/Magento_Customer/layout/customer_account.xml et y placer le code suivant:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" label="Customer My Account (All Pages)" design_abstraction="custom">
    <head>
        <title>My Account</title>
    </head>
    <body>
        <attribute name="class" value="account"/>

        <move element="sidebar.main.account_nav" destination="sidebar.main" after="-" />

        <referenceContainer name="sidebar.main"></referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<head>

<title>My Account</title>

</head>

<body>

</body>

</page>

Ici, le <move element="sidebar.main.account_nav" destination="sidebar.main" after="-" /> permet d’indiquer à Magento 2 que la déclaration initiale du block sidebar.main.account_nav" a été déplacée du module Customer du core au module Theme de notre thème.

Commande à exécuter avant de rafraîchir nos pages dans le navigateur

magerun2 cache:clean layout

1	magerun2 cache:clean layout

Conclusion

Le menu du compte devrait désormais (et à condition d’être connecté à un compte client) s’afficher dans n’importe quelle page de votre site, à l’endroit indiqué dans le layout XML default.xml de votre thème.

Comme indiqué en début de billet, l’affichage est probablement plus qu’àpproximatif et c’est à vous de jouer côté LESS, PHTML et JS pour adapter tout ça 🙂

[SEO] Obfuscation des liens pour le maillage interne

26/02/2021 / admin

Article ayant servi de source à ce billet: Comment faire de l’obfuscation de liens pour votre maillage interne ? et version PDF – 410-gone.fr-Comment faire de lobfuscation de liens pour votre maillage interne.

// Source/doc: https://www.410-gone.fr/seo/optimisation-on-site/maillage-interne/cocon-semantique/obfuscation.html

// HTML pour les liens à obfusquer (les URLs doivent être encodées en base-64):
// <span class="qcd" data-qcd="aHR0cHM6Ly93d3cuNDEwLWdvbmUuZnIvYS1wcm9wb3MuaHRtbA==">
//     mentions légales
// </span>

// Encodage en base-64 en PHP:
// https://www.php.net/manual/en/function.base64-encode.php

document.addEventListener("DOMContentLoaded", function(event) {
    var classname = document.getElementsByClassName("qcd");
    for (var i = 0; i < classname.length; i++) {
        //click gauche
        classname[i].addEventListener('click', myFunction, false);
        //click droit
        classname[i].addEventListener('contextmenu', myRightFunction, false);
    }
});

//fonction du click gauche
var myFunction = function(event) {
    var attribute = this.getAttribute("data-qcd");
    if(event.ctrlKey) {
        var newWindow = window.open(decodeURIComponent(window.atob(attribute)), '_blank');
        newWindow.focus();
    } else {
        document.location.href= decodeURIComponent(window.atob(attribute));
    }
};

//fonction du click droit
var myRightFunction = function(event) {
    var attribute = this.getAttribute("data-qcd");
    if(event.ctrlKey) {
        var newWindow = window.open(decodeURIComponent(window.atob(attribute)), '_blank');
        newWindow.focus();
    } else {
        window.open(decodeURIComponent(window.atob(attribute)),'_blank');
    }
}

// Source/doc: https://www.410-gone.fr/seo/optimisation-on-site/maillage-interne/cocon-semantique/obfuscation.html

// HTML pour les liens à obfusquer (les URLs doivent être encodées en base-64):

// <span class="qcd" data-qcd="aHR0cHM6Ly93d3cuNDEwLWdvbmUuZnIvYS1wcm9wb3MuaHRtbA==">

// mentions légales

// </span>

// Encodage en base-64 en PHP:

// https://www.php.net/manual/en/function.base64-encode.php

document.addEventListener("DOMContentLoaded", function(event) {

var classname = document.getElementsByClassName("qcd");

for (var i = 0; i < classname.length; i++) {

//click gauche

classname[i].addEventListener('click', myFunction, false);

//click droit

classname[i].addEventListener('contextmenu', myRightFunction, false);

}

});

//fonction du click gauche

var myFunction = function(event) {

var attribute = this.getAttribute("data-qcd");

if(event.ctrlKey) {

var newWindow = window.open(decodeURIComponent(window.atob(attribute)), '_blank');

newWindow.focus();

} else {

document.location.href= decodeURIComponent(window.atob(attribute));

}

};

//fonction du click droit

var myRightFunction = function(event) {

var attribute = this.getAttribute("data-qcd");

if(event.ctrlKey) {

var newWindow = window.open(decodeURIComponent(window.atob(attribute)), '_blank');

newWindow.focus();

} else {

window.open(decodeURIComponent(window.atob(attribute)),'_blank');

}

[Magento 2] Les bases et patterns de l’utilisation de javascript (AMD, requireJS, widget jQuery, plugin, module, x-magento-init, etc…)

26/02/2021 / admin

Intégrer et exploiter dans Magento 2 un plugin jQuery tiers dont le code source est structuré selon le pattern AMD

Pour illustrer cette partie, nous allons intégrer dans Magento 2 le plugin jQuery Slick Carousel, dont le code source est structuré selon le pattern AMD.

Remarque: l’intégration du plugin jQuery tiers va se faire dans un thème. Si vous comptez utiliser le plugin en question sur un projet multi-sites/multi-thèmes ou sur plusieurs projets, une meilleure stratégie consisterait à intégrer ce premier dans un nouveau module MyVendor_Slick qu’on placerait dans app/code/MyVendor/Slick.
Cette démarche n’est pas décrite ici, mais mériterait d’être envisagée en fonction de vos besoins.

Récupération du plugin sous Git et copie dans l’arborescence du thème

Récupérer la source minifiée du plugin Slick sous Git (tag v1.8.1 dans mon exemple, mais vous pouvez vérifier si il existe un tag plus récent) et copier-coller le fichier dans votre thème, au chemin suivant: app/design/frontend/MyVendor/mytheme/web/js/vendor/slick/slick.min.js.

Déclaration du plugin en tant que module via RequireJS

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

var config = {
    // Paths defines associations from library name (used to include the library,
    // for example when using "define") and the library file path.
    paths: {
        'slick': 'js/vendor/slick/slick.min
    },

    // Shim: when you're loading your dependencies, requirejs loads them all
    // concurrently. You need to set up a shim to tell requirejs that the library
    // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
    // on jQuery).
    shim: {
        'slick': {
            deps: ['jquery']
        }
    }
};

var config = {

// Paths defines associations from library name (used to include the library,

// for example when using "define") and the library file path.

paths: {

'slick': 'js/vendor/slick/slick.min

// Shim: when you're loading your dependencies, requirejs loads them all

// concurrently. You need to set up a shim to tell requirejs that the library

// (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends

// on jQuery).

shim: {

'slick': {

deps: ['jquery']

}

};

Création d’un fichier d’initialisation d’une instance du plugin

Dans votre thème, créer le fichier app/design/frontend/MyVendor/mytheme/web/js/init-slick.js qui va servir à appeller et à initialiser une instance du plugin javascript Slick et vous donnera accès à toutes les options de l’API originale:

define(['jquery','slick'], function($)
{
    return function(config, element)
    {
        $(element).slick(config);
    };
});

define(['jquery','slick'], function($)

{

return function(config, element)

{

$(element).slick(config);

};

});

Petite subtilité: ajouter une configuration spécifique par défaut à toutes les instances de votre plugin

Dans l’exemple ci-dessous, le fichier app/design/frontend/MyVendor/mytheme/web/js/init-slick.js est agrémenté d’un objet defaults qui surcharge (via les settings proposés de base par le plugin Slick Carousel prevArrow et nextArrow) l’aspect graphique des chevrons « slide précédent/slide suivant ».

L’intérêt d’ajouter une configuration spécifique par défaut à toutes les instances de votre plugin réside, pour l’exemple du Carousel, dans le fait qui si la charte graphique de votre projet prévoit les mêmes chevrons spés pour tous les sliders du site, vous allez pouvoir tous les initialiser sans avoir besoin de re-préciser à chaque fois que vous voulez surcharger les pictos fournis de base par ceux de votre charte.

Vous pouvez, bien entendu, les re-surcharger et utiliser d’autres options du plugin à la demande pour chaque nouveau Carousel que vous allez mettre en place.

define(['jquery','slick'], function($)
{
    return function(config, element)
    {
        let defaults = {
            prevArrow: '<button type="button" class="btn-round slick-prev"><svg viewBox="0 0 100 100" class="icon icon-arrow-back-chevron"><use xlink:href="#icon-arrow-back-chevron"></use></svg></button>',
            nextArrow: '<button type="button" class="btn-round slick-next"><svg viewBox="0 0 100 100" class="icon icon-arrow-forward-chevron"><use xlink:href="#icon-arrow-forward-chevron"></use></svg></button>'
        };

        $(element).slick($.extend(defaults, config));
    };
});

define(['jquery','slick'], function($)

{

return function(config, element)

{

let defaults = {

prevArrow: '<button type="button" class="btn-round slick-prev"><svg viewBox="0 0 100 100" class="icon icon-arrow-back-chevron"><use xlink:href="#icon-arrow-back-chevron"></use></svg></button>',

nextArrow: '<button type="button" class="btn-round slick-next"><svg viewBox="0 0 100 100" class="icon icon-arrow-forward-chevron"><use xlink:href="#icon-arrow-forward-chevron"></use></svg></button>'

};

$(element).slick($.extend(defaults, config));

};

});

Appeler et initialiser une instance du plugin sur un élément du DOM

Cette page de la documentation officielle vous expliquera comment appeler et initialiser une instance du plugin sur un élément du DOM dans Magento 2.

Elle aborde notamment la manière de procéder depuis un fichier template PHTML, depuis un fichier JS et comment exécuter data-amge-init et x-magento-init dans un cas où le DOM se met à jour dynamiquement.

Dans ce billet, je vais me contenter d’illustrer un exemple de notation déclarative avec x-magento-init depuis un fichier PHTML.

Exemple de notation déclarative avec `x-magento-init` depuis un fichier PHTML

Ici, j’initialise simplement mon module Slick sur l’élément du DOM qui porte l’ID home-slider. Le carousel va s’afficher soit avec les options de base fournies par le plugin Slick, soit avec les options de base fournies par le plugin Slick ET des pictos chevrons surchargés par ma configuration par défaut si j’en ai défini une.

<div id="home-slider">
    <div><a href="#">Slide one</a></div>
    <div><a href="#">Slide two</a></div>
    <div><a href="#">Slide three</a></div>
    <div><a href="#">Slide four</a></div>
    <div><a href="#">Slide five</a></div>
    <div><a href="#">Slide six</a></div>
</div>

<script type="text/x-magento-init">
    {
        "#home-slider": {
            "js/init-slick": {}
        }
    }
</script>

<div><a href="#">Slide one</a></div>

<div><a href="#">Slide two</a></div>

<div><a href="#">Slide three</a></div>

<div><a href="#">Slide four</a></div>

<div><a href="#">Slide five</a></div>

<div><a href="#">Slide six</a></div>

</div>

{

"#home-slider": {

"js/init-slick": {}

}

</script>

Même exemple avec ajout d’options

Ici, je choisis de paramétrer mon carousel afin qu’il affiche 4 slides à la fois et qu’on scrolle d’une slide à chaque fois qu’on active les boutons prev/next ou tout autre mode de navigation fourni par le plugin. Les options slidesToShow et slidesToScroll sont fournies par le plugin Slick et exploitables immédiatement grâce à la magie d’AMD, de RequireJs et de Magento.

<script type="text/x-magento-init">
    {
        "#home-slider": {
            "js/init-slick": {
                "slidesToShow": "4", // # of slides to show at a time
                "slidesToScroll": "1" // # of slides to scroll at a time
            }
        }
    }
</script>

{

"#home-slider": {

"js/init-slick": {

"slidesToShow": "4", // # of slides to show at a time

"slidesToScroll": "1" // # of slides to scroll at a time

}

</script>

Ressources en ligne:

Un excellent pense-bête sur l’intégration de code javascript dans Magento 2. Tout y est parfaitement structuré, clair, concis et illustré: initialisation imperative/declaration, plain modules, jQuery UI Widgets (add new method, override existing method, create new widget), UI components, etc… Version PDF pour la postérité – jason.codes-Magento 2 JavaScript CheatSheet. Voir aussi, les sous-articles connexes:

[jQuery] Performances: comment utiliser de multiples éléments mis en cache?

05/02/2021 / admin

Source: jQuery, how to use multiple cached elements

  const $_CATEGORY_ICON_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryIcon'),
        $_CATEGORY_LABEL_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryLabel'),
        $_CATEGORY_LINK_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryLink'),
        $_CATEGORY_NAV_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryNav'),
        $_CATEGORY_IMAGE_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryImage');

const $_CATEGORY_ICON_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryIcon'),

$_CATEGORY_LABEL_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryLabel'),

$_CATEGORY_LINK_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryLink'),

$_CATEGORY_NAV_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryNav'),

$_CATEGORY_IMAGE_MEGAMENU_SECONDARY = $('#megaMenuSecondaryCategoryImage');

        console.time('emptyThings');
        $_CATEGORY_ICON_MEGAMENU_SECONDARY.empty();
        $_CATEGORY_LABEL_MEGAMENU_SECONDARY.empty();
        $_CATEGORY_LINK_MEGAMENU_SECONDARY.empty();
        $_CATEGORY_NAV_MEGAMENU_SECONDARY.empty();
        $_CATEGORY_IMAGE_MEGAMENU_SECONDARY.empty();
        console.timeEnd('emptyThings');

console.time('emptyThings');

$_CATEGORY_ICON_MEGAMENU_SECONDARY.empty();

$_CATEGORY_LABEL_MEGAMENU_SECONDARY.empty();

$_CATEGORY_LINK_MEGAMENU_SECONDARY.empty();

$_CATEGORY_NAV_MEGAMENU_SECONDARY.empty();

$_CATEGORY_IMAGE_MEGAMENU_SECONDARY.empty();

console.timeEnd('emptyThings');

emptyThings: 1.92041015625 ms
megamenu.js:127 emptyThings: 4.44091796875 ms
megamenu.js:127 emptyThings: 1.739990234375 ms
megamenu.js:127 emptyThings: 2.5419921875 ms
megamenu.js:127 emptyThings: 1.958740234375 ms
megamenu.js:127 emptyThings: 2.581787109375 ms
megamenu.js:127 emptyThings: 2.59912109375 ms
megamenu.js:127 emptyThings: 2.1240234375 ms
megamenu.js:127 emptyThings: 3.0361328125 ms
megamenu.js:127 emptyThings: 3.2548828125 ms

        console.time('emptyThings');
        $([$_CATEGORY_ICON_MEGAMENU_SECONDARY[0], $_CATEGORY_LABEL_MEGAMENU_SECONDARY[0], $_CATEGORY_LINK_MEGAMENU_SECONDARY[0], $_CATEGORY_NAV_MEGAMENU_SECONDARY[0], $_CATEGORY_IMAGE_MEGAMENU_SECONDARY[0]]).empty();
        console.timeEnd('emptyThings');

console.time('emptyThings');

$([$_CATEGORY_ICON_MEGAMENU_SECONDARY[0], $_CATEGORY_LABEL_MEGAMENU_SECONDARY[0], $_CATEGORY_LINK_MEGAMENU_SECONDARY[0], $_CATEGORY_NAV_MEGAMENU_SECONDARY[0], $_CATEGORY_IMAGE_MEGAMENU_SECONDARY[0]]).empty();

console.timeEnd('emptyThings');

emptyThings: 1.552001953125 ms
megamenu.js:131 emptyThings: 4.814697265625 ms
megamenu.js:131 emptyThings: 2.326904296875 ms
megamenu.js:131 emptyThings: 2.762939453125 ms
megamenu.js:131 emptyThings: 3.281982421875 ms
megamenu.js:131 emptyThings: 1.970947265625 ms
megamenu.js:131 emptyThings: 2.184814453125 ms
megamenu.js:131 emptyThings: 3.62109375 ms
megamenu.js:131 emptyThings: 3.26123046875 ms
megamenu.js:131 emptyThings: 3.065673828125 ms

[Magento 2] Afficher le formulaire de connexion client dans n’importe quel template PHTML

29/01/2021 / admin

Testé fonctionnel Magento 2.4 CE. Source: Magento 2: Call customer login page in other phtml.

<?php echo $this->getLayout()->createBlock("Magento\Customer\Block\Form\Login")->setTemplate("Magento_Customer::form/login.phtml")->toHtml();?>
<?php echo $this->getLayout()->createBlock("Magento\Customer\Block\Form\Login\Info")->setTemplate("Magento_Customer::newcustomer.phtml")->toHtml(); ?>

1 2	<?php echo $this->getLayout()->createBlock("Magento\Customer\Block\Form\Login")->setTemplate("Magento_Customer::form/login.phtml")->toHtml();?> <?php echo $this->getLayout()->createBlock("Magento\Customer\Block\Form\Login\Info")->setTemplate("Magento_Customer::newcustomer.phtml")->toHtml(); ?>

Theme by Anders Norén — Up ↑

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Tags

Archives

Méta

Quelques petites choses à savoir avant de démarrer:

Les fichiers de style à créer/à modifier

Créer src/less/components/drilldown.less

Modifier src/less/components/_import.less

Créer src/less/theme/drilldown.less

Modifier src/less/theme/_import.less

Commande pour compiler les fichiers source au format LESS:

Erreur: « ./node_modules/uikit/src/js/api/boot.js » contains a reference to the file « uikit-util ».

Etendre la configuration de Webpack Encore pour faciliter la surchage et l’écrasement de fichiers JS

Importer uniquement une sélection de modules issus d’un framework (et pas tout le framework)

Résoudre l’erreur Could not find the entrypoints file from Webpack: the file « /var/www/html/web/build/entrypoints.json » does not exist.

webpack.config.js

config.yml

Ajout des liens vers les fichiers compilés dans un template Twig

Découpage du squelette de base d’un widget jQuery UI pour Magento 2

Version finale (également disponible dans le ZIP):

Déclaration de notre widget jQuery UI via RequireJS

Utilisation du widget dans un template PHTML de Magento 2

L’intérêt de procéder via XML est multiple:

Déclaration native du block menu du compte client dans un layout XML du module Customer de Magento 2

Déplacer la déclaration du block sidebar.main.account_nav à la hauteur du thème

Router la déclaration intiale du block sidebar.main.account_nav" vers notre thème

Commande à exécuter avant de rafraîchir nos pages dans le navigateur

Conclusion

Intégrer et exploiter dans Magento 2 un plugin jQuery tiers dont le code source est structuré selon le pattern AMD

Récupération du plugin sous Git et copie dans l’arborescence du thème

Déclaration du plugin en tant que module via RequireJS

Création d’un fichier d’initialisation d’une instance du plugin

Petite subtilité: ajouter une configuration spécifique par défaut à toutes les instances de votre plugin

Appeler et initialiser une instance du plugin sur un élément du DOM

Exemple de notation déclarative avec x-magento-init depuis un fichier PHTML

Même exemple avec ajout d’options

Ressources en ligne:

Créer `src/less/components/drilldown.less`

Modifier `src/less/components/_import.less`

Créer `src/less/theme/drilldown.less`

Modifier `src/less/theme/_import.less`

Déplacer la déclaration du block `sidebar.main.account_nav` à la hauteur du thème

Router la déclaration intiale du block `sidebar.main.account_nav"` vers notre thème

Exemple de notation déclarative avec `x-magento-init` depuis un fichier PHTML