Étiquette : jQuery UI

[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

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

Testé fonctionnel Magento 2.3, 2.4

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

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

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.

[jQuery] Astuces de manipulation du widget Autocomplete de jQuery UI

Modifier le rendu HTML avec les fonctions natives _renderMenu and _renderItem

Source: Quick example of multi-column results with jQueryUI’s new Autocomplete?

I ended up manually overriding the _renderMenu and _renderItem functions after all. Works like a charm so far, and was actually very easy to do. I was hoping for a « per-instance » solution, but we’ll burn that bridge when we come to it. Here’s what it came to, and thanks again!

Annuler les styles de .ui-menu pour .ui-autocomplete

Cette astuce fonctionne pour n’importe quel widget issu de jQuery UI.

jQuery Autocomplete with custom renderer throwing “Cannot read property ‘value’ of undefined”

Source : jQuery Autocomplete with custom renderer throwing “Cannot read property ‘value’ of undefined”

[jQuery] Migrer jQuery-ui pour jQuery 3.x

Une partie des sources migrées est disponible ici.

Uncaught TypeError: Cannot read property ‘msie’ of undefined

Erreur Uncaught TypeError: Cannot read property 'msie' of undefined: cette erreur est rencontrée, notamment avec le composant datepicker. Il suffit de placer le code suivant au début du fichier incriminé: