Utilisez require-config.js pour charger les fichiers nécessaires sur toutes les pages

Je sais comment utiliser require-config.jsun thème personnalisé, mais je voudrais utiliser un fichier javascript personnalisé ( myfile.js) sur toutes les pages. Dans quel répertoire dois-je ajouter require-config.jset comment l'utiliser pour qu'il fonctionne comme il se doit?

S'il vous plaît, ne faites pas référence à la page officielle de Magento.

requirejs-config.jsutilise pour créer le mappage des ressources JavaScript . Nous pouvons trouver tous besoin configs sous: pub/static/_requirejs.

Pour autant que je sache, la bonne façon de charger notre script personnalisé via Require Js: en utilisant un modèle pour appeler notre script . Nous allons créer un nouveau modèle avec Magento\Framework\View\Element\Templatesa classe de blocs.

Si nous voulons charger des fichiers js sur toutes les pages et ne voulons pas créer un nouveau module, notre bloc doit faire référence à before.body.endouafter.body.start container dans default.xml- le module Thème Magento.

app / design / frontend / Vendor / Theme / Magento_Theme / layout / default.xml

<?xml version="1.0"?>

<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <referenceContainer name="after.body.start">
        <block class="Magento\Framework\View\Element\Template" name="custom.js" template="Magento_Theme::custom_js.phtml"/>
    </referenceContainer>

</page>

app / design / frontend / Vendor / Theme / requirejs-config.js

var config = {
    map: {
        '*': {
            customScript:'Magento_Theme/js/customscript'
        }
    }
};

app / design / frontend / Vendor / Theme / Magento_Theme / web / js / douanecript.js

define('jquery', function($) {

    //Your code here
    //alert('Here');

    }(jQuery)
);

Notre modèle appellera notre script: app / design / frontend / Vendor / Theme / Magento_Theme / templates / custom_js.phtml

<script>// <![CDATA[
    require([
        'jquery',
        'customScript'
    ], function ($, script) {
        //Your code here
        //alert('Here');
    });
    // ]]>
</script>

Vider le cache Magento et exécuter le déploiement de contenu statique: php bin/magento setup:static-content:deploy

Fichier Requirejs-config: app / code / Vendor / Module / view / frontend / requirejs-config.js

var config = {
    paths: {            
         'myfile': "Vendor_Modulename/js/myfile"
      },   
    shim: {
    'myfile': {
        deps: ['jquery']
    }
  }
} 

Votre fichier js doit être dans: app / code / Vendor / Module / view / frontend / web / js / myfile.js

Vous pouvez maintenant utiliser n'importe où dans votre fichier modèle par la méthode ci-dessous:

<srcipt>
 require(["jquery","myfile"],function($,myfile){
     $(document).ready(function(){
        //call your js here...
     })
 })
</script>

Il existe une version plus facile à utiliser deps. Les dépendances dans le requirejs-config.js chargeront votre fichier lors du chargement de requirejs lui-même (partout dans la boutique). Voici un exemple de l' apparence de votre requirejs-config.js :

var config = {
    // When load 'requirejs' always load the following files also
    deps: [
        'common-js'
    ],

    // Library file path.
    paths: {
        'common-js': 'js/Your-File-Name'
    },

    // The rest of your config file ...

Comme approche alternative à la recommandation de Khoa, qui est une excellente pratique de développement Magento, vous pouvez coller votre JavaScript dans un fichier .phtml comme ceci:

<srcipt>
require(["jquery"],function($){
 $(document).ready(function(){
    your script here...
 })
});
</script>

Ensuite, liez votre fichier phtml à partir de default.xml comme décrit dans la réponse de Khoa, bien que je recommande de l'ajouter à before.body.end. Et puis appelez votre script JS à partir de copyright.phtml , comme ceci:

<script>
jQuery(document).ready(function($) {
..call your script here ..
});
</script>

copyright.phtml est chargé sur chaque page, même sur des pages comme la caisse, où le pied de page est omis.