So fügen Sie eine JS-Datei im Frontend für alle Seiten hinzu

38

Ich habe 3 Seiten der Google-Ergebnisse gelesen, in denen beschrieben wird, wie eine JS-Datei für alle Seiten geladen wird, und kann dies immer noch nicht.

Ich habe ein paar Zweifel, hoffe jemand kann sie ausräumen.

Muss ich app/codemit dem ein Modul erstellen requirejs-config.js? Oder kann requirejs-config.jsich stattdessen ein Thema einfügen?
Was soll ich hineinstecken requirejs-config.js?
Wie soll der Code in meiner .jsDatei aussehen ? Ich habe gesehen, dass Sie jQuery nicht verwenden können document.readyund dass Sie eine haben müssendefine([
Was soll ich hineinstecken define([?
Wenn ich jQuery-Module von Drittanbietern habe, muss ich sie bearbeiten, damit sie funktionieren?
Muss ich xml irgendwo ablegen, um Magento mitzuteilen, dass die Datei my.js existiert?
Wenn ich ein Modul app/codemit dem gesamten dortigen js-Code erstelle , würde es dann das gesamte Material auf allen Seiten enthalten? Wie kann ich das erreichen?

magento2 javascript requirejs Prashant Akash
quelle

65

Um eine benutzerdefinierte main.jsDatei auf alle Seiten zu laden (auf die RequireJS-Weise), ist dies ein guter Weg:

1) Erstellen main.js

Erstellen Sie main.jsinnerhalb des Themenordners

<theme_dir>/web/js/main.js

mit diesem Inhalt:

define([
  "jquery"
], 
function($) {
  "use strict";

  // Here your custom code...
  console.log('Hola');

});

Kurz : Wir deklarieren zu Beginn Abhängigkeiten, z "jquery". Wir definieren als Funktionsparameter den Variablennamen für die Verwendung der Abhängigkeit innerhalb der Funktion, z "jquery" --> $. Wir setzen all unseren benutzerdefinierten Code ein function($) { ... }.

2) main.jsMit einer requirejs-config.jsDatei deklarieren

Erstellen Sie eine requirejs-config.jsDatei im Themenordner:

<theme_dir>/requirejs-config.js

mit diesem Inhalt:

var config = {

  // When load 'requirejs' always load the following files also
  deps: [
    "js/main"
  ]

};

"js/main"ist der Weg zu unserem Brauch main.js. Die Erweiterung ".js" ist nicht erforderlich.

Unsere requirejs-config.jswerden mit anderen requirejs-config.jsin Magento definierten zusammengeführt.

RequireJS unsere lädt main.jsDatei, auf jeder Seite, Abhängigkeiten aufzulösen und das Laden von Dateien in einem Asynchron - Weg.

Optional: Einschließlich Bibliothek eines Drittanbieters

Auf diese Weise können Bibliotheken von Drittanbietern eingebunden werden.

1) Fügen Sie die Bibliothek hinzu in web/js:

<theme_dir>/web/js/vendor/jquery/slick.min.js

2) Öffne requirejs-config.jsund füge diesen Inhalt hinzu:

var config = {

  deps: [
    "js/main"
  ],

  // Paths defines associations from library name (used to include the library,
  // for example when using "define") and the library file path.
  paths: {
    'slick': 'js/vendor/jquery/slick.min',
  },

  // Shim: when you're loading your dependencies, requirejs loads them all
  // concurrently. You need to set up a shim to tell requirejs that the library
  // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
  // on jQuery).
  // Exports: if the library is not AMD aware, you need to tell requirejs what 
  // to look for so it knows the script has loaded correctly. You can do this with an 
  // "exports" entry in your shim. The value must be a variable defined within
  // the library.
  shim: {
    'slick': {
      deps: ['jquery'],
      exports: 'jQuery.fn.slick',
    }
  }

};

Es sieht komplizierter aus als das, was es eigentlich ist.

3) Fügen Sie die Abhängigkeit hinzu in main.js:

define([
  'jquery',
  'slick'
], 
function($) {

  // ...

});

Andrea
quelle

Hallo, kannst du sagen, ob ich bootstrap.js hier einfügen muss? Wie kann ich es hinzufügen, so dass Bootstrap in meinem Thema gut funktioniert. Vielen Dank!

Anujeet

1

@anujeet Sie können bootstrap.jsauf die gleiche Weise wie slick.jsim obigen Beispiel einfügen . Für den Shim-Wert können Sie versuchen, dies zu verwenden: 'bootstrap': { deps: ["jquery"], exports: '$.fn.popover' }Wie hier erklärt: stackoverflow.com/a/13556882/3763649

Andrea

Siehe meine require-config.js

var config = {  	deps: [ 		"js/animate", 		"js/incase", 		"js/confetti" 	],     paths: { 		"jquery.bootstrap":"js/bootstrap.min"     },     shim:{       'jquery.bootstrap':{ 		'deps':['jquery']       }     } };   require(["jquery",'jquery.bootstrap', 'jquery/ui', 'jquery/validate', 'mage/validation/validation', 'domReady!']);

Mein Minicart funktioniert nicht mehr damit

anujeet

@anujeet Besser, Sie öffnen eine andere Frage mit diesem Problem, melden Ihre require-config.js und wenn Sie einige Fehler in der Javascript-Konsole haben. Wenn Sie Ihre Frage hier verlinken, helfe ich Ihnen gerne :)

Andrea

wenn mehr js enthalten Ich habe Fehler "js / ScrollMagic.min", "js / debug.addIndicators.min"

yavonz15

6

Sie können JS-Dateien mit XML wie folgt hinzufügen. Dies fügt js auf allen Seiten hinzu.

Mit benutzerdefiniertem Modul:

Erstellen Sie eine default.xmlDatei in Ihrem Modul.

app/code/vendor_name/module_name/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <head>
        <!-- Add js using link tag-->
        <link src="js/script.js"/>

        <!-- Add js-->
        <script src="Vendor_Module::js/script.js"/>

        <!-- Add external js -->
        <script src="https://apis.google.com/js/platform.js" src_type="url" />
   </head>
</page>

SCC
quelle

6

Dupliziere die Datei:

app / code / Magento / Theme / view / frontend / layout / default_head_blocks.xml

Zu

app / code / your_vendor / your_theme /Magento_Theme/layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add local resources -->
        <css src="css/my-styles.css"/>

        <!-- The following two ways to add local JavaScript files are equal -->
        <script src="Magento_Catalog::js/sample1.js"/>
        <link src="js/sample.js"/>

        <!-- Add external resources -->
        <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
        <link src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" /> 
    </head>
</page>

Für mehr Informationen:

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html

Viel Glück!

Übrigens: Lies die offiziellen Devdocs des Frontends von Magento, um die Grundlagen zu erhalten :)

Goldy
quelle

Da für das Skript von Bootstrap die Initialisierung von JQuery erforderlich ist, funktioniert es nicht, wenn es in den Kopf eingefügt wird. Lesen Sie dieses offizielle Dokument. Für mehr Information. :)

VS

2

Die Methode zum Hinzufügen von js mithilfe der default_head_blocks.xmlDatei funktioniert nicht für JQuery-Plugins von Drittanbietern. Wenn Sie also benutzerdefinierte JQuery-Plugins hinzufügen und verwenden möchten, müssen Sie requirejs-config.jsfile verwenden.

So beantworten Sie Ihre Fragen einzeln:

1) & 2) Sie müssen kein Modul erstellen, um die requirejs-config.jsDatei hinzuzufügen . Sie können es einfach an dieser Stelle hinzufügen:

app/design/frontend/<Vendor>/<theme>/requirejs-config.js

Lesen Sie diese Antwort , um eine richtige requirejs-config.jsDatei zu erstellen .

3) Sie müssen die Abhängigkeiten Ihrer js-Datei auflisten, bevor Sie Ihre Skripte schreiben.

require([
  'jquery',
  'jquery/ui'
], function($){
   // ... Your code here
});

Der obige Code besagt, dass Sie jquery und jquery ui für Ihre Skripte benötigen.

4) Sie müssen das nicht verwenden, es define([sei denn, Sie erstellen ein Javascript-Plugin.

5) Nein, Sie müssen sie nicht bearbeiten, aber Sie müssen ihre Abhängigkeit mithilfe der requirejs-config.jsDatei angeben . Wenn Sie owl.carousel.min.jsin <vendor>/<theme>/web/js/owl.carousel.min.jsIhr requirejs-config.jswird Datei wie folgt aussehen:

var config = {
    map: {
        '*': {
            owlCarouselTheme: 'js/owl.carousel.min'
        }
    },
    shim: {
        owlCarouselTheme: ['jquery']
    }
};

Denken Sie im obigen Code bitte daran, dass es .jsfür die Datei keine gibt . Und jetzt, um es in Ihrem js zu verwenden

require(['jquery', 'owlCarouselTheme'],function($){
    $(document).ready(function() {
        $(".footer.links").addClass("owl-carousel").owlCarousel({items: 1});
    });
})

Wenn alles gut funktioniert, sollten Sie Ihre Fußzeilenlinks in einem Schieberegler haben.

6) & 7) Verwenden Sie einfach die von @Goldy vorgeschlagene Methode, um Ihre js hinzuzufügen. Es wird Ihre js-Datei zu allen Seiten hinzufügen.

Weitere Informationen finden Sie in diesem Beitrag

Hoffe das hilft.

VS
quelle

1

So füge ich eine dotdotdot-Bibliothek in mein Magento2-Design ein.

1. Laden Sie die Js Library herunter und fügen Sie sie in Ihr Design ein.

// app/design/frontend/Namespace/themename/web/js/jquery.dotdotdot.min.js

2. Erstellen Sie die RequirementJS-Datei eines Themas wie folgt und teilen Sie den RequirementJS die neu hinzugefügte Bibliothek mit.

// app/design/frontend/Namespace/themename/requirejs-config.js
var config = {
   map: {
       '*': {
           dotdotdot: 'js/jquery.dotdotdot.min',
       }
   }
};

3. Verwenden Sie die hinzugefügte Bibliothek in der Haupt-JS-Datei Ihres Themas wie folgt:

// app/design/frontend/Namespace/themename/web/js/main.js
require([ 'jquery' , 'dotdotdot' , 'domReady!'],function($){
    $(window).load(function() {
        //custom js code
        /* $(".product-item-name").each(function(){
            $(this).dotdotdot(); 
        }); */
    });
});

4. und fügen Sie die js-Datei Ihres Themas wie folgt in den Kopf Ihrer Site ein:

// app/design/frontend/Namespace/themename/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="js/main.js"/> 
    </head>
</page>

Sie können jede externe JS-Bibliothek und benutzerdefinierte Datei auf jeder Seite in magento2 hinzufügen.

sagte
quelle

Ich habe versucht, dies ist Admin-Seite, js kommt richtig, aber erwartetes Ergebnis kommt nicht

Naveenbos

Gute Antwort. Ich werde es versuchen. Gibt es eine Möglichkeit, eine bestimmte Seite anzugeben, auf der die js-Datei benötigt wird?

Mohammed Joraid

Verschieben Sie für eine bestimmte Seite den Inhalt "default_head_blocks.xml" im obigen Beispiel in Ihre spezifische Layoutdatei. Fügen Sie zum Beispiel im Falle einer Produktdetailseite diese XML in app / design / frontend / Namespace / themename / Magento_Catalog / layout / catalog_product_view.xml hinzu

sagte

So fügen Sie eine JS-Datei im Frontend für alle Seiten hinzu

Antworten:

Optional: Einschließlich Bibliothek eines Drittanbieters