Authoradmin

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

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

Modifier src/less/components/_import.less

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

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

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:

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

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:

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:

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

Dans le fichier webpack.config.js:

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

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

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

Source: Webpack sass loader resolve absolute path

/webpack.config.js:

/assets/styles/apps.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";

[Pimcore] Utiliser le Bundle Webpack Encore de Symfony

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

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é)…

config.yml

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

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.

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.

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

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:

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

Déclaration du widget sous la forme $.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 ;))

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

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

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

Commentaires directement dans le bout de code 😉

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

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.

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

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:

Version finale (également disponible dans le ZIP):

Déclaration de notre widget jQuery UI via RequireJS

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

Utilisation du widget dans un template PHTML de Magento 2

[SEO] Obfuscation des liens pour le maillage interne

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.

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

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:

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:

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.

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.

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.

Ressources en ligne:

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

Source: jQuery, how to use multiple cached elements

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

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

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

© 2021 devfrontend.info

Theme by Anders NorénUp ↑