Comment ajouter un fichier JS en frontal pour toutes les pages

38

J'ai lu trois pages de résultats Google sur la façon de charger un fichier JS pour toutes les pages et je ne suis toujours pas en mesure de le faire.

J'ai quelques doutes, j'espère que quelqu'un pourra les éliminer.

Dois-je créer un module à l'intérieur app/codeavec requirejs-config.js? Ou je peux mettre un requirejs-config.jsthème dans mon thème?
Que dois-je mettre à l'intérieur requirejs-config.js?
À quoi le code devrait-il ressembler dans mon .jsfichier? J'ai vu que vous ne pouvez pas utiliser jQuery document.readyet vous devez avoir undefine([
Que dois-je mettre à l'intérieur define([?
Si j'ai des modules jQuery tiers, dois-je les modifier pour les faire fonctionner?
Dois-je mettre xml quelque part pour dire à magento que le fichier my.js existe?
Si je crée un module app/codeavec tout le code js à l' intérieur , est-ce qu'il inclura tout le contenu dans toutes les pages? Comment puis-je y arriver?

magento2 javascript requirejs Prashant Akash
la source

65

Pour charger un main.jsfichier personnalisé sur toutes les pages (de la manière RequireJS), procédez comme suit:

1) créer main.js

Créer main.jsdans le dossier du thème

<theme_dir>/web/js/main.js

avec ce contenu:

define([
  "jquery"
], 
function($) {
  "use strict";

  // Here your custom code...
  console.log('Hola');

});

En bref : nous déclarons les dépendances au début, par exemple "jquery". Nous définissons comme paramètre de fonction le nom de la variable pour utiliser la dépendance dans la fonction, par exemple "jquery" --> $. Nous mettons tout notre code personnalisé à l'intérieur function($) { ... }.

2) Déclarer main.jsavec un requirejs-config.jsfichier

Créez un requirejs-config.jsfichier dans le dossier du thème:

<theme_dir>/requirejs-config.js

avec ce contenu:

var config = {

  // When load 'requirejs' always load the following files also
  deps: [
    "js/main"
  ]

};

"js/main"est le chemin de notre coutume main.js. L'extension ".js" n'est pas requise.

Notre requirejs-config.jssera fusionné avec d'autres requirejs-config.jsdéfinis dans Magento.

RequireJS charge notre main.jsfichier, sur chaque page, en résolvant les dépendances et en chargeant les fichiers de manière asynchrone.

Facultatif: bibliothèque tierce incluse

C'est le moyen d'inclure des bibliothèques tierces.

1) Ajouter la bibliothèque en web/js:

<theme_dir>/web/js/vendor/jquery/slick.min.js

2) Ouvrez requirejs-config.jset ajoutez ce contenu:

var config = {

  deps: [
    "js/main"
  ],

  // Paths defines associations from library name (used to include the library,
  // for example when using "define") and the library file path.
  paths: {
    'slick': 'js/vendor/jquery/slick.min',
  },

  // Shim: when you're loading your dependencies, requirejs loads them all
  // concurrently. You need to set up a shim to tell requirejs that the library
  // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
  // on jQuery).
  // Exports: if the library is not AMD aware, you need to tell requirejs what 
  // to look for so it knows the script has loaded correctly. You can do this with an 
  // "exports" entry in your shim. The value must be a variable defined within
  // the library.
  shim: {
    'slick': {
      deps: ['jquery'],
      exports: 'jQuery.fn.slick',
    }
  }

};

Cela semble plus compliqué que ce que c'est réellement.

3) Ajoutez la dépendance dans main.js:

define([
  'jquery',
  'slick'
], 
function($) {

  // ...

});

Andrea
la source

Salut, Pouvez-vous dire si je dois inclure bootstrap.js ici. Comment puis-je l'ajouter pour que bootstrap fonctionne bien dans mon thème? Merci!

Anujeet

1

@anujeet Vous pouvez inclure bootstrap.jsde la même manière que slick.jsdans l'exemple ci-dessus. Pour la valeur shim, vous pouvez essayer ceci :,'bootstrap': { deps: ["jquery"], exports: '$.fn.popover' } comme expliqué ici: stackoverflow.com/a/13556882/3763649

Andrea

Voir mon require-config.js

var config = {  	deps: [ 		"js/animate", 		"js/incase", 		"js/confetti" 	],     paths: { 		"jquery.bootstrap":"js/bootstrap.min"     },     shim:{       'jquery.bootstrap':{ 		'deps':['jquery']       }     } };   require(["jquery",'jquery.bootstrap', 'jquery/ui', 'jquery/validate', 'mage/validation/validation', 'domReady!']);

Mon minicart cesse de fonctionner avec ceci

anujeet

@anujeet Mieux vaut ouvrir une autre question avec ce problème, en signalant votre require-config.js et en signalant des erreurs dans la console javascript. Si vous associez votre question ici, je me ferai un plaisir de vous aider :)

Andrea

quand inclure plus de js j'ai des erreurs "js / ScrollMagic.min", "js / debug.addIndicators.min"

yavonz15

7

Dupliquer le fichier:

app / code / Magento / Theme / view / frontend / layout / default_head_blocks.xml

À

app / code / your_vendor / your_theme /Magento_Theme/layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add local resources -->
        <css src="css/my-styles.css"/>

        <!-- The following two ways to add local JavaScript files are equal -->
        <script src="Magento_Catalog::js/sample1.js"/>
        <link src="js/sample.js"/>

        <!-- Add external resources -->
        <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
        <link src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" /> 
    </head>
</page>

Pour plus d'informations:

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html

Bonne chance!

BTW a lu le devdocs officiel de Magento pour obtenir la base :)

Goldy
la source

Comme le script de Bootstrap nécessite l’initialisation de JQuery, son inclusion en tête ne fonctionnera pas. Lisez ce document officiel. pour plus d'informations. :)

VS

6

Vous pouvez ajouter des fichiers JS en utilisant XML comme ci-dessous. Cela va ajouter js dans toutes les pages.

Avec module personnalisé:

Créer un default.xmlfichier dans votre module.

app/code/vendor_name/module_name/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <head>
        <!-- Add js using link tag-->
        <link src="js/script.js"/>

        <!-- Add js-->
        <script src="Vendor_Module::js/script.js"/>

        <!-- Add external js -->
        <script src="https://apis.google.com/js/platform.js" src_type="url" />
   </head>
</page>

CSC
la source

2

La méthode d'ajout de js à l'aide du default_head_blocks.xmlfichier ne fonctionnera pas pour les plug-ins JQuery tiers. Donc, si vous voulez ajouter des plugins JQuery personnalisés et les utiliser, vous devez utiliser un requirejs-config.jsfichier.

Pour répondre à vos questions une à une:

1) et 2) Il n'est pas nécessaire de créer un module pour ajouter le requirejs-config.jsfichier. Vous pouvez simplement l'ajouter à cet endroit:

app/design/frontend/<Vendor>/<theme>/requirejs-config.js

Reportez-vous à cette réponse pour créer un requirejs-config.jsfichier approprié .

3) Vous aurez besoin de lister les dépendances de votre fichier js avant d'écrire vos scripts.

require([
  'jquery',
  'jquery/ui'
], function($){
   // ... Your code here
});

Le code ci-dessus indique que vous aurez besoin de jquery et jquery ui pour vos scripts.

4) Vous n’avez pas besoin d’utiliser le define([sauf si vous créez un plugin javascript.

5) Non, vous n'avez pas besoin de les éditer, mais vous devrez spécifier leur dépendance à l'aide du requirejs-config.jsfichier. Si vous avez owl.carousel.min.jsdedans <vendor>/<theme>/web/js/owl.carousel.min.js, votre requirejs-config.jsfichier ressemblera à ceci:

var config = {
    map: {
        '*': {
            owlCarouselTheme: 'js/owl.carousel.min'
        }
    },
    shim: {
        owlCarouselTheme: ['jquery']
    }
};

Dans le code ci-dessus, rappelez-vous qu'il n'y a pas .jsde fichier. Et maintenant, à utiliser dans votre js

require(['jquery', 'owlCarouselTheme'],function($){
    $(document).ready(function() {
        $(".footer.links").addClass("owl-carousel").owlCarousel({items: 1});
    });
})

Si tout fonctionne bien, vous devriez avoir vos liens de pied de page dans un curseur.

6) et 7) Utilisez simplement la méthode suggérée par @Goldy pour ajouter votre js. Il va ajouter votre fichier js à toutes les pages.

Pour en savoir plus, vous pouvez regarder ce post

J'espère que cela t'aides.

CONTRE
la source

1

C'est ainsi que j'ajoute la bibliothèque dotdotdot dans mon thème personnalisé magento2.

1. Téléchargez et ajoutez Js Library à votre thème en suivant le chemin:

// app/design/frontend/Namespace/themename/web/js/jquery.dotdotdot.min.js

2. Créez le fichier requirejs d'un thème comme suit et informez-le de la bibliothèque nouvellement ajoutée.

// app/design/frontend/Namespace/themename/requirejs-config.js
var config = {
   map: {
       '*': {
           dotdotdot: 'js/jquery.dotdotdot.min',
       }
   }
};

3. Utilisez la bibliothèque ajoutée dans le fichier js principal de votre thème comme suit:

// app/design/frontend/Namespace/themename/web/js/main.js
require([ 'jquery' , 'dotdotdot' , 'domReady!'],function($){
    $(window).load(function() {
        //custom js code
        /* $(".product-item-name").each(function(){
            $(this).dotdotdot(); 
        }); */
    });
});

4. et incluez le fichier js de votre thème dans la tête de votre site comme suit:

// app/design/frontend/Namespace/themename/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="js/main.js"/> 
    </head>
</page>

Vous pouvez ajouter n'importe quelle bibliothèque JS externe et fichier personnalisé sur chaque page de magento2.

saiid
la source

J'ai essayé c'est du côté de l'administration, js arrive correctement mais le résultat attendu n'est pas à venir

Naveenbos

Bonne réponse. Je vais l'essayer. Existe-t-il un moyen de spécifier une certaine page où le fichier js est nécessaire?

Mohammed Joraid

Pour une page spécifique, déplacez le contenu "default_head_blocks.xml" de l'exemple ci-dessus vers votre fichier de présentation spécifique. Par exemple, dans le cas d'une page de détail du produit, ajoutez ce code xml dans app / design / frontend / Espace de noms / nom de domaine / Magento_Catalog / layout / catalog_product_view.xml

saiid

Comment ajouter un fichier JS en frontal pour toutes les pages

Réponses:

Facultatif: bibliothèque tierce incluse