Tagjquery

[Magento 2] Utiliser une Regex et la méthode Trim de jQuery pour affecter une largeur dynamique aux tooltips

En fait on ne va pas utiliser de regex comme annoncé dans le titre, car la méthode trim() de jQuery fait le boulot attendu de supprimer tous les espaces au début et à la fin d’une chaîne de caractères.

Le code ci-dessous vérifie si il y a au moins un tooltip dans la page. Si « oui », il récupère le contenu de chaque tooltip présent, retire les espaces blancs (white spaces) au début et à la fin de la chaîne de caractères récupérée, compte le nombre de caractères restant et attribue une largeur fixe en pixels au tooltip en fonction de la formule nombre de caractères * 2.25.

[Magento 2] Afficher/masquer le bouton « Effacer tous les filtres » dans la liste des catégories/produits

Testé fonctionnel Magento 2.4!

Dans mon exemple, l’ID « narrow-by-list » est présent deux fois dans le DOM (ce qui n’est pas du tout une bonne pratique) car la liste des filtres s’affiche dans deux zones bien distinctes de la page: 1. en mode horizontal au-dessus de la liste des catégories/produits et dans un volet glissant qui ne s’affiche qu’au clic sur un bouton de type « Voir plus de filtres ».

Il faudra donc adapter un peu mon code à votre propre utilisation.

Chemin: app/design/frontend/MyVendor/MyTheme/Magento_LayeredNavigation/templates/layer/view.phtml.

  • Je désactive la condition PHP <?php if ($block->getLayer()->getState()->getFilters()) : ?> qui sette la visibilité du bouton « Effacer tout », mais uniquement au rechargement de la page.
  • J’ajoute un ID <div id="filterActions" class="block-actions filter-actions">.

Dans le même fichier view.phtml, j’ajoute ce bout de code javaScript (il vous faudra probablement adapter le ciblage du selecteur suivant qui n’existera pas chez vous: let FILTER = $('#narrow-by-list.is-view-top').find('.active');):

On n’oublie pas le petit CSS qui va bien:

[jQuery] Utiliser la méthode .contents() pour supprimer un élément parent du DOM, mais conserver tous ses enfants

Cette méthode fait écho à tous les posts dans différents blogs et forums qui incitent à utiliser la méthode .unwrap() de jQuery. La méthode .contents() récupère absolument tout ce que contient l’élément parent qu’on souhaite supprimer alors qu'.unwrap() se montre plus sélective, ce qui peut entrainer quelques désagréments (perte de contenu, etc…).

Source: How to remove only the parent element and not its child elements in JavaScript?

HTML:

jQuery:

Résultat dans le DOM:

[Magento 2] Etendre un composant JS natif

Testé fonctionnel Magento 2.4. Source: Extending Magento 2 default JS components. Version PDF – inchoo.net-Extending Magento 2 default JS components.

Etendre le composant UI Tabs pour ajouter un effet de bordure animée sous les onglets:

app/design/frontend/MyVendor/mytheme/web/js/tabs-custom.js

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

app/design/frontend/MyVendor/mytheme/Magento_Theme/templates/html/sections.phtml

app/design/frontend/MyVendor/mytheme/web/css/source/tabs.less

app/design/frontend/MyVendor/mytheme/Magento_Sales/layout/sales_order_info_links.xml et app/design/frontend/MyVendor/mytheme/Magento_Sales/layout/sales_order_guest_info_links.xml

[javascript] L’équivalent ES6/vanilla JS de la méthode .eq() de jQuery

Source: Pure JS equivalent of Jquery eq().

La méthode .eq() de jQuery

La même chose en ES6/vanilla 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

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:

Détail des fichiers à mettre en place:

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

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

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

[Magento 2] Comment inclure et utiliser un fichier JS custom placé dans un thème depuis un template PHTML avec data-mage-init

C’est par ici: [Magento 2] Vérifier qu’un utilisateur client est connecté à son compte et afficher son prénom dans un template PHTML.

Voir aussi: [Magento 2] Comment inclure et utiliser un fichier JS custom avec requireJS.

[Foundation 6] Exploiter le composant Drilldown et jQuery pour créer un product finder wizard

Un product finder wizard qui pose une série de questions pour aider l’utilisateur à trouver le bon produit en fonction de ses besoins. La fonctionnalité est constituée de:

  • le Drilldown de Foundation 6 pour la mise en place du wizard <ul class="vertical menu drilldown product-finder-tree">
  • des boutons de navigation Précédent, Réinitialiser et Suivant <div class="product-finder-actions">
  • un fil d’Ariane qui se constitue à la volée en fonction des choix précédents de l’utilisateur <div id="productFinderBreadcrumb" class="product-finder-breadcrumb"></div>

Partie PHTML

Le code HTML qui constitue le menu n’est autre qu’une liste non-ordonnée d’éléments imbriqués. Il est conforme au markup générique fourni par Zurb pour la démo du composant Drilldown aux exceptions près que:

  • les éléments <a> portent une classe .question
  • les éléments <li> ont un ID questionID_ (généré via PHP dans notre exemple)

Partie jQuery

Nous utilisons plusieurs méthodes natives du composant Drilldown de Foundation 6:

  • _hideAll pour réinitialiser le menu à son état initial.

    Attention: cette méthode semble bugguée. Je l’ai peut-être aussi mal exploitée, mais j’ai dû écrire un fix; voir ci-dessous:

  • _showMenu pour rediriger l’utilisateur vers un choix précédent dans le DOM du menu (lorsqu’il clique sur le bouton Précédent).

    Attention: il est important de pointer un élément UL (dans mon exemple, sur la classe .submenu) pour que cette méthode fonctionne!

  • _show pour rediriger l’utilisateur plus en avant dans ses choix dans le DOM du menu (lorsqu’il clique sur le bouton Suivant).

    Attention: il est important de pointer un élément LI (dans mon exemple, sur l’ID questionID_ se trouvant sur les LI) pour que cette méthode fonctionne!

[jQuery][bxSlider] Les liens dans le slider ne fonctionnent pas

Solution: stevenwanderski/bxslider-4: links in sliders aren’t working – Error in the latest version of Chrome (73.0.3683.75).

I might have found a reliable fix for this. The problem happens in Chrome because it doesn’t fire a click event after pointerup unlike other browsers such as Firefox. This is because bxslider in onTouchStart function sets slider viewport as target of all succeeding pointer events. Now if you have a link inside a slide when you click the link the target of pointerdown is not slider viewport, but the link content and since this target is different from pointerup target (which is slider viewport), then Chrome doesn’t fire a click. The solution is to make sure pointerup fires on the same element as pointerdown so that Chrome fires a click. So we need to refactor this snippet:

to this:

This solved the problem for me in Chrome without loss of any functionality in any browser or mobile device.

[Magento 2] Importer les points de rupture CSS LESS pour une exploitation avec javascript jQuery

Source: Importing CSS Breakpoints Into JavaScript (adapté pour Magento 2).

!important: ce tuto demande à créer/modifier un certain nombre de fichiers. Le respect de l’organisation de ces derniers dans l’arborescence de votre thème est capital pour le bon fonctionnement de la fonctionnalité présentée. Vous pourrez bien-sûr modifier les emplacements des fichiers, mais pensez dans ce cas à mettre à jour tous les chemins en conséquence.

L’arborescence utilisée dans le code source fourni est mise à plat plus bas.

Intérêt pour le développeur Magento 2 d’importer les breakpoints LESS pour une exploitation avec javascript?

Magento 2 permet, par le biais de l’outil matchMedia.js, de déclencher du code javascript/jQuery en fonction d’un point de rupture. Extrait de la documentation officielle à ce sujet:

On remarque que la valeur du point de rupture est renseignée de manière statique (768px): media: '(min-width: 768px)'. Ce procédé a ses limites. Le jour où la valeur de ce breakpoint est modifiée dans la feuille de style, il faudra mettre à jour à la main toutes les déclarations faites avec matchMedia.

Le but est donc de rendre dynamique la valeur de media:.

Partie LESS:

Si il n’existe pas encore dans votre thème, créer un dossier app/design/frontend/<Vendor_name>/<theme_name>/web/css/vendor/less-curious/ et y placer, à la racine, l’intégralité des fichiers disponibles sur ce repository Git.

A ce stade, il est surtout important que les fichiers for.less et for-each.less soient accessibles respectivement depuis les chemins suivants:

  • app/design/frontend/<Vendor_name>/<theme_name>/web/css/vendor/less-curious/src/for.less
  • app/design/frontend/<Vendor_name>/<theme_name>/web/css/vendor/less-curious/src/for-each.less
  • Note: le repo Git pouvant disparaître du jour au lendemain, un backup au format ZIP est disponible ici 😉.
  • Note #2: si vous regardez le code source du projet less-curious, vous remarquerez peut-être que ce dernier est déprécié et que l’auteur fournit un lien vers une version plus actuelle, full JS à intégrer avec un pré-processeur comme Grunt. Problème: j’ai eu beau suivre les bonnes pratiques d’intégration d’un plug-in pour grunt-contrib-less dans le système mis en place dans Magento 2, je n’ai rien réussi à compiler… UPDATE (pas testé) 05/11/2019: la solution se situe peut-être dans la mise en place d’une configuration custom de Grunt.

Si il n’existe pas encore dans votre thème, créer un dossier app/design/frontend/<Vendor_name>/<theme_name>/web/css/source/devtools/.

Créer le fichier app/design/frontend/<Vendor_name>/<theme_name>/web/css/source/devtools/_js-mediaqueries.less et placez-y le code ci-dessous:

Dans le fichier app/design/frontend/<Vendor_name>/<theme_name>/web/css/source/_theme.less, ajouter la ligne suivante JUSTE EN-DESSOUS des potentielles surcharges que vous avez faites des variables pré-déclarées dans le(s) thème(s) parent(s) dont votre thème va hériter:

Partie JS:

Créer le fichier app/design/frontend/<Vendor_name>/<theme_name>/web/js/js-mediaqueries.js:

Créer ou adapter le fichier app/design/frontend/<Vendor_name>/<theme_name>/requirejs-config.js:

Partie XML:

Créer le fichier app/design/frontend/<Vendor_name>/<theme_name>/Magento_Theme/layout/default_head_blocks.xml:

Note: si ce fichier existe déjà dans votre thème, ajouter simplement la ligne <script src="js/js-mediaqueries.js" /> entre les balises <head>.

Commandes à exécuter en bash:

  • Un cache:clean
  • $ rm -rf pub/static/*; rm -rf var/view_preprocessed/*

Un process Grunt doit tourner ou une compilation des assets front-end via une commande Magento doit être faite.

Arborescence complète, selon les fichiers de ce tuto:

  • app/design/frontend/[Vendor_name]/[theme_name]/
    • Magento_Theme/
      • layout/
        • default_head_blocks.xml
    • web/
      • css/
        • source/
          • devtools/
            • _js-mediaqueries.less
          • vendor/
            • less-curious/
              • src/
                • for.less
                • for-each.less
          • _theme.less
      • js/
        • js-mediaqueries.js
    • requirejs-config.js

© 2021 devfrontend.info

Theme by Anders NorénUp ↑