Tagjs

[Magento 2] Utiliser Knockout JS pour ajouter un message dans le minicart lorsque ce dernier est vide

Dans le fichier de surcharge app/design/frontend///Magento_Checkout/web/template/minicart/content.html, immédiatement sous la condition:

…ajouter la nouvelle condition:

[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

[Magento 2] Etendre un mixin existant

Etendre une extension de widget existante dans Magento 2 n’est pas possible. Il faut obligatoirement surcharger l’extension existante en déclarant l’extension initiale à false dans le fichier requirejs-config.js du module (pouvant être différent) qui contient la nouvelle extension:

Notes:

  • la bonne pratique consiste à placer les extensions de widgets dans des modules (app/code/...) plutôt que dans un thème.

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

[Magento 2] Comment inclure et utiliser un fichier JS custom avec requireJS

Source: How to include and use custom js file with require js in magento2.

Source: Four Ways to Add JavaScript to Magento 2.

En-dehors d’un thème, en créant un module

Se référer à la documentation officielle de Magento 2 pour voir comment créer un nouveau module. Dans mon exemple, le vendor s’appelle Naked et le module s’appelle HelloWorld.

Dans app/code/Naked/HelloWorld/ créer une arborescence de dossiers et les trois fichiers suivants:

  • view/frontend/requirejs-config.js
  • view/frontend/web/js/hello-world.js
  • view/frontend/web/js/methods.js

view/frontend/requirejs-config.js

Les scripts déclarés sous la variable deps vont fonctionner immédiatement et sur toutes les pages du site. Inutile d’initialiser quoi que ce soit dans un fichier *.phtml.

view/frontend/web/js/hello-world.js

view/frontend/web/js/methods.js

[javascript] Importer des breakpoints CSS

Article de lullabot.com: Importing CSS Breakpoints Into JavaScript. Demo Codepen.

Version PDF pour la postérité.

Animation CSS et JS, ressources en ligne, astuces, bonnes pratiques

  • ANIMISTA IS A PLACE WHERE YOU CAN PLAY WITH A COLLECTION OF PRE-MADE CSS ANIMATIONS, TWEAK THEM AND GET ONLY THOSE YOU WILL ACTUALLY USE.
  • Animate.css – A cross-browser library of CSS animations. As easy to use as an easy thing.
  • Motion UI – A Sass library for creating flexible CSS transitions and animations.

[Drupal 7] Les différentes techniques pour ajouter/supprimer des ressources CSS/JS

Ressources généralistes sur le sujet :

Supprimer les CSS Core :

Peut se faire par le biais du hook_css_alter via le fichier template.php du thème.

Attention: dans le cas ou certaines CSS sont déclarées comme étant des dépendances du module contrib, il ne faut pas déclarer le module contrib mais ce qui semblent être des sous-modules… (en commentaires dans l’exemple ci-dessous, les déclarations qui ne fonctionnent pas) :

…ce qui nous donne au propre :

Charger/Ne pas charger certaines ressources CSS/JS si l’utilisateur est anonyme/connecté:

Avec les hooks user_is_anonymous et user_is_logged_in:

Remplacer la version de jQuery par défaut (via CDN)

Peut se faire par le biais du hook_js_alter via le fichier template.php du thème :

[Drupal 7.x] Ajouter une CSS ou un JS conditionels via les preprocess functions

Voir notamment au niveau de la méthode path_to_theme() et de l’option group pour choisir l’ordre de chargement des fichiers.

On peut également affiner la position de chargement de la CSS avec l’option weight :

[Drupal 7.x] Le fichier *.info : le point de départ pour intialiser un thème

© 2021 devfrontend.info

Theme by Anders NorénUp ↑