Utilizzare require-config.js per caricare i file necessari su tutte le pagine

So come utilizzare il require-config.jstema personalizzato, ma vorrei utilizzare il file javascript personalizzato ( myfile.js) su tutte le pagine. In quale directory dovrei aggiungere require-config.jse come usarlo, in modo che funzioni come dovrebbe?

Per favore, non fare riferimento alla pagina ufficiale di Magento.

requirejs-config.jsutilizza per la creazione della mappatura delle risorse JavaScript . Possiamo trovare tutti richiedono configurazioni sotto: pub/static/_requirejs.

Per quanto ne so, il modo corretto di caricare il nostro script personalizzato tramite Require Js: utilizzando il modello per chiamare il nostro script . Creeremo un nuovo modello con la Magento\Framework\View\Element\Templatesua classe di blocco.

Se vogliamo caricare i file js su tutte le pagine e non vogliamo creare un nuovo modulo, il nostro blocco dovrebbe fare riferimento a before.body.endoafter.body.start container in default.xml- Modulo tema Magento.

app / design / frontend / Venditore / a tema / 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 / Venditore / a tema / requirejs-config.js

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

app / design / frontend / Venditore / a tema / Magento_Theme / web / js / customscript.js

define('jquery', function($) {

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

    }(jQuery)
);

Il nostro modello chiamerà il nostro 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>

Svuota la cache Magento ed esegui la distribuzione di contenuto statico: php bin/magento setup:static-content:deploy

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

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

Il tuo file js dovrebbe essere in: app / code / Vendor / Module / view / frontend / web / js / myfile.js

Ora puoi usare ovunque nel tuo file modello con il metodo seguente:

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

È disponibile una versione più semplice deps. Le dipendenze in requestjs-config.js caricheranno il tuo file quando caricherai stesso Requjs (ovunque nel negozio). Ecco un esempio di come dovrebbe apparire il tuo requestjs-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 ...

Come approccio alternativo alla raccomandazione di Khoa, che è un'ottima pratica di sviluppo Magento, puoi incollare il tuo JavaScript in un file .phtml come questo:

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

Quindi collega il tuo file phtml da default.xml come descritto nella risposta di Khoa, anche se consiglierei di aggiungerlo a before.body.end. E poi chiama il tuo script JS da copyright.phtml , in questo modo:

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

copyright.phtml viene caricato su ogni pagina, anche su pagine come il checkout, dove viene omesso il piè di pagina.