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

9

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.

Anitr
la source
Vous pouvez appeler directement js à l'intérieur de la balise de mise en page xml et vous avez obtenu js dans chaque page.
Rakesh Jesadiya
Merci pour votre réponse. Mais si je voudrais utiliser require-config et charger des fichiers avec, pas comme dans Magento 1?
Anitr
Il prend également en charge dans magento 2, vous pouvez vérifier la disposition du dossier module-thème / fichier default_head_block.xml
Rakesh Jesadiya
Oui je sais. Mais, je veux utiliser require-config.js de la bonne façon.
Anitr

Réponses:

17

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.

entrez la description de l'image ici

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

Khoa TruongDinh
la source
J'appelle mon script \app\design\frontend\Enim\blank\Magento_CatalogWidget\templates\product\widget\content\grid.phtml, mais j'ai requirejs-config.js et le script dans le dossier Theme (app / design / frontend / Vendor / Theme / requirejs-config.js). Est-ce correct? Le problème est que j'appelle mon script à partir de plusieurs endroits différents.
Anitr
Votre script n'affecte que lorsque le modèle templa‌​tes\product\widget\c‌​ontent\grid.phtmlest appelé.
Khoa TruongDinh
Oui, c'est ok - le problème est avec celui-ci: magento.stackexchange.com/questions/149019/… , je me demande si ce problème est en quelque sorte connecté à un appel à requirejs.
Anitr
@KhoaTruongDinh Je suis un peu confus par cela. Je n'ai pas encore correctement testé, mais ai-je raison de penser que la fonction dans custom_js.phtmlest traitée comme un rappel régulier, effectué après l'exécution du code contenu dans customscript.js? Ou aurais-je besoin d'exécuter le code déclaré dans customscript.jsdepuis la fonction dans custom_js.phtml?
Joshua Flood
1
@KhoaTruongDinh Je me demande aussi pourquoi la réponse d'Iveta indique que votre after.body.startdevrait être changé en before.body.end?
Joshua Flood
5

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>
Rakesh Jesadiya
la source
Oui c'est correct. Mais j'ai demandé si quelqu'un savait comment l'utiliser dans le dossier Thème, pas en fonction du module - il devrait être chargé sur la page, pas seulement sur un module.
Anitr
vous pouvez également l'utiliser dans le dossier du thème, il suffit d'appeler le script ci-dessus et vous pouvez utiliser votre js
Rakesh Jesadiya
s'il vous plaît laissez-moi savoir si vous avez un problème
Rakesh Jesadiya
Cela fonctionne, merci. Mais quand même, j'ai des problèmes sur autre chose: magento.stackexchange.com/questions/149019/…
Anitr
Bonjour, veuillez me faire savoir où placer le premier fichier d'étape?
Priya
2

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 ...
Andrei
la source
1

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.

Iveta Allogenes
la source