Verwenden Sie require-config.js, um die auf allen Seiten benötigten Dateien zu laden

Ich weiß, wie man require-config.jsein benutzerdefiniertes Thema verwendet, aber ich möchte myfile.jsauf allen Seiten eine benutzerdefinierte Javascript-Datei ( ) verwenden. In welchem ​​Verzeichnis soll ich hinzufügen require-config.jsund wie man es benutzt, damit es so funktioniert, wie es sollte?

Bitte verweisen Sie nicht auf die offizielle Magento-Seite.

requirejs-config.jswird zum Erstellen der JavaScript-Ressourcenzuordnung verwendet . Wir finden alle erforderlichen Konfigurationen unter : pub/static/_requirejs.

Soweit ich weiß, der richtige Weg, um unser benutzerdefiniertes Skript über Require Js zu laden: Verwenden Sie die Vorlage, um unser Skript aufzurufen . Wir werden eine neue Vorlage mit Magento\Framework\View\Element\Templateihrer Blockklasse erstellen .

Wenn wir js-Dateien auf allen Seiten laden und kein neues Modul erstellen möchten, sollte unser Block auf before.body.endoderafter.body.start container in default.xml- Magento Theme-Modul verweisen .

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 / customcript.js

define('jquery', function($) {

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

    }(jQuery)
);

Unsere Vorlage ruft unser Skript auf: app / design / frontend / Vendor / Theme / Magento_Theme / templates / custom_js.phtml

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

Löschen Sie den Magento-Cache und führen Sie die Bereitstellung statischer Inhalte aus: php bin/magento setup:static-content:deploy

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

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

Ihre js-Datei sollte sich befinden in: app / code / Vendor / Module / view / frontend / web / js / myfile.js

Jetzt können Sie eine beliebige Stelle in Ihrer Vorlagendatei mit der folgenden Methode verwenden:

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

Es gibt eine einfachere Version mit deps. Abhängigkeiten in der Datei requirejs-config.js laden Ihre Datei beim Laden von requirejs selbst (überall im Shop). Hier ist ein Beispiel dafür, wie Ihre requirejs-config.js aussehen sollte:

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

Als alternativen Ansatz zu Khoas Empfehlung, die eine hervorragende Magento-Entwicklungspraxis darstellt, können Sie Ihr JavaScript in eine .phtml-Datei wie folgt einfügen:

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

Verknüpfen Sie dann Ihre HTML-Datei aus default.xml wie in Khoas Antwort beschrieben, obwohl ich empfehlen würde, sie zu before.body.end hinzuzufügen. Rufen Sie dann Ihr JS-Skript in der Datei copyright.phtml folgendermaßen auf :

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

copyright.phtml wird auf jeder Seite geladen, auch auf Seiten wie der Kasse, auf denen die Fußzeile weggelassen wird.