Ajouter une bibliothèque jQuery à Magento 2

Comment un développeur tiers peut-il ajouter une bibliothèque jQuery à Magento 2?

Alors que Magento 2 inclut une version de jQuery dans leurs thèmes frontaux, l'objet jQuery n'est pas immédiatement disponible dans l'espace de noms global. Je crois que c'est parce que Magento 2 utilise RequireJS pour extraire jQuery, et RequireJS ne chargera pas un fichier de module avant qu'il ne soit nécessaire.

Cela pose un problème pour les plugins jQuery. Normalement, j'inclurais un plugin avec HTML qui ressemblait à quelque chose comme ça

<script type="text/javascript" src="http://magento-1-9-2-2.dev/js/commercebug/jquery-ui-1.8.custom/js/jquery.cookie.js"></script>

Cependant, cela n'est pas possible avec Magento 2. Étant donné que le jquery.cookie.jsfichier définit le plug-in jQuery à l'aide de l'objet global jQuery, il échouera dans Magento 2 avec une jQuery is not definederreur.

Comment un développeur frontal devrait-il inclure une bibliothèque de plugins jquery standard dans l'application frontale de Magento 2?

Créer requirejs-config.js Companyname \ Modulename \ view \ frontend \ requirejs-config.js add

var config = {
   map: {
       '*': {
           bannerslider: 'Companyname_Modulename/js/flexslider',
       }
   }
};

Votre fichier Js dans votre module Companyname \ Modulename \ view \ frontend \ web \ js \ flexslider.js
Vous ajoutez simplement jquery lib en utilisant la syntaxe suivante

<script type="text/javascript">
require(['jquery','bannerslider'],function($){
    $(window).load(function() {
        $('.flexslider-8').flexslider({
            animation: "fade",
            controlNav: "thumbnails",
            slideshowSpeed: 2000,
            minItems: 2,
            maxItems: 4
        });
    });
});
</script>

deuxième exemple

<script type="text/javascript">
    require(['jquery'],function($){
        $(window).load(function() {
            alert('jquery working');
        });
    });
</script>

Je cite les documents Magento .

Pour créer une dépendance sur le plug-in tiers, spécifiez un shim dans les fichiers de configuration suivants:

Dans votre requirejs-config.js:

var config = {
  "shim": {
     "3-rd-party-plugin": ["jquery"]
    }
  };

Ensuite, incluez votre code de plugin tiers dans votre thème ou module: "web / js / 3-rd-party-plugin.js" comme ceci:

!(function($){
  // plugin code
  // where $ == jQuery
})(jQuery);

Cette solution est avantageuse car vous incluez votre fichier de plugin sans aucune sorte de modification. Remplacez simplement le fichier js lorsque l'auteur du plugin se met à jour ou même utilisez un cdn!

La meilleure chose à faire est d'utiliser un module Magento 2 ou un thème pour inclure de tels plugins / bibliothèques. C'est la voie recommandée et la meilleure pratique .

Méthode 1> THÈME : Si la bibliothèque javascript / jquery est liée au thème (afin de changer l'apparence du système).

• Placez le fichier source du composant personnalisé dans l'un des emplacements suivants
  [rép_thème] / web / js /
• Placez votre fichier requirejs-config.js dans
  [theme_dir]

Méthode 2> MODULE : si la bibliothèque javascript / jquery est liée à une fonction métier particulière ou gère une fonctionnalité Magento. Il devrait aller à l'intérieur d'un module.

• Placez le fichier source du composant personnalisé dans l'un des emplacements suivants
  [rép_module] / view / frontend / web / js /

• Placez votre fichier requirejs-config.js dans
  [rép_module] / view / frontend /

Magento 2 recommande fortement de ne pas modifier le code source des composants et widgets Magento par défaut. Toutes les personnalisations doivent être implémentées dans des modules ou des thèmes personnalisés.

Alan, jQuery UI Widget Factory a un cas spécial. Pour rendre AMD compatible, veuillez vérifier le lien suivant.

http://gregfranko.com/blog/registering-the-jqueryui-widget-factory-as-an-amd-module/