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

9

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.

Anitr
quelle
Sie können js direkt im Layout-XML-Head-Tag aufrufen und haben auf jeder Seite js.
Rakesh Jesadiya
Vielen Dank für Ihre Antwort. Aber wenn ich require-config verwenden und Dateien damit laden möchte, nicht wie in Magento 1?
Anitr
Es wird auch in Magento 2 unterstützt. Sie können das Layout des Modul-Theme-Ordners / default_head_block.xml überprüfen
Rakesh Jesadiya
Ja, ich weiß. Aber ich möchte require-config.js richtig verwenden.
Anitr

Antworten:

17

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 .

Geben Sie hier die Bildbeschreibung ein

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

Khoa TruongDinh
quelle
Ich rufe mein Skript auf \app\design\frontend\Enim\blank\Magento_CatalogWidget\templates\product\widget\content\grid.phtml, habe aber requirejs-config.js und ein Skript im Theme-Ordner (app / design / frontend / Vendor / Theme / requirejs-config.js). Ist das ok? Das Problem ist, dass ich mein Skript von mehreren verschiedenen Orten aus aufrufe.
Anitr
Ihr Skript wirkt sich nur aus, wenn die Vorlage templa‌​tes\product\widget\c‌​ontent\grid.phtmlaufgerufen wird.
Khoa TruongDinh
Ja, das ist in Ordnung - das Problem liegt bei diesem: magento.stackexchange.com/questions/149019/… . Ich frage mich, ob dieses Problem irgendwie mit dem erforderlichen Aufruf zusammenhängt.
Anitr
@KhoaTruongDinh Das verwirrt mich ein wenig. Ich habe noch nicht richtig getestet, aber habe ich Recht, wenn ich denke, dass die Funktion in custom_js.phtmlals regulärer Rückruf behandelt wird, der nach Ausführung des darin enthaltenen Codes ausgeführt wird customscript.js? Oder muss ich den in deklarierten Code customscript.jsinnerhalb der Funktion in ausführen custom_js.phtml?
Joshua Flood
1
@KhoaTruongDinh Ich frage mich auch, warum Ivetas Antwort besagt, dass Sie after.body.startgeändert werden sollten before.body.end?
Joshua Flood
5

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>
Rakesh Jesadiya
quelle
Ja das ist richtig. Aber ich habe gefragt, ob jemand weiß, wie man es im Theme-Ordner verwendet, unabhängig vom Modul - es sollte über die Seite geladen werden, nicht nur auf einem Modul.
Anitr
Sie können es auch im Themenordner verwenden, rufen Sie einfach das obige Skript auf und Sie können Ihr js
Rakesh Jesadiya
Bitte lassen Sie mich wissen, wenn Sie ein Problem haben
Rakesh Jesadiya
Es funktioniert, danke. Trotzdem
Anitr
Hallo, bitte lassen Sie mich wissen, wo die erste Schrittdatei platziert werden soll.
Priya
2

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 ...
Andrei
quelle
1

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.

Iveta Allogenes
quelle