Use require-config.js para carregar os arquivos necessários em todas as páginas

Eu sei como usar require-config.jsno tema personalizado, mas gostaria de usar o arquivo javascript personalizado ( myfile.js) em todas as páginas. Em qual diretório devo adicionar require-config.jse como usá-lo, para que ele funcione como deveria?

Por favor, não faça referência à página oficial do Magento.

requirejs-config.jsusa para criar o mapeamento de recursos JavaScript . Podemos encontrar todos exigem configurações em: pub/static/_requirejs.

Até onde eu sei, a maneira correta de carregar nosso script personalizado via Require Js: using template para chamar nosso script . Criaremos um novo modelo com Magento\Framework\View\Element\Templatesua classe de bloco.

Se queremos carregar arquivos js em todas as páginas e não queremos criar um novo módulo, nosso bloco deve se referir a before.body.endouafter.body.start container no default.xmlmódulo Magento Theme.

app / design / front-end / fornecedor / tema / tema-magento / 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 / front-end / fornecedor / tema / requirejs-config.js

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

app / design / frontend / fornecedor / tema / tema_ Magento / web / js / costumescript.js

define('jquery', function($) {

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

    }(jQuery)
);

Nosso modelo chamará nosso 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>

Limpe o Magento Cache e execute a implantação de conteúdo estático: php bin/magento setup:static-content:deploy

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

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

Seu arquivo js deve estar em: app / code / Vendor / Module / view / frontend / web / js / myfile.js

Agora você pode usar em qualquer lugar do seu arquivo de modelo pelo método abaixo:

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

Existe uma versão mais fácil usando deps. Dependências no requirejs-config.js carregarão seu arquivo ao carregar o requirejs em si (em qualquer lugar da loja). Aqui está um exemplo de como o seu requirejs-config.js deve ficar:

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 ...

Como uma abordagem alternativa à recomendação do Khoa, que é uma excelente prática para desenvolvedores do Magento, você pode colar seu JavaScript em um arquivo .phtml como este:

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

Em seguida, vincule seu arquivo phtml a partir do default.xml, conforme descrito na resposta do Khoa, embora eu recomendo adicioná-lo ao before.body.end. E, em seguida, chame seu script JS de dentro de copyright.phtml , assim:

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

O copyright.phtml é carregado em todas as páginas, mesmo em páginas como checkout, onde o rodapé é omitido.