Wie lade ich eine benutzerdefinierte Modul-JS-Datei in Magento 2?

9

Ich habe ein Banner-Slider-Modul für Magento 2 erstellt. Ich habe die JS-Datei auf folgende Weise aufgerufen und sie funktioniert einwandfrei. In der Blockklasse habe ich folgende Funktion erstellt

public function getBaseJs($fileName){

        return $this->_storeManager->getStore()->getBaseUrl(
                \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
            ).'bannerslider/js/'.$fileName;
    }

und diese Funktion wird in der bannerslider.phtmlDatei wie folgt aufgerufen .

<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery-1.7.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery.flexslider.js') ?>"></script>

Aber laut jQuery-Abhängigkeitsmechanismus von require.jsWie kann ich das machen?

Praful Rajput
quelle

Antworten:

29

Endlich habe ich die Lösung für meine Anfrage bekommen. Ich möchte es im Detail wie unten teilen.

Geben Sie hier die Bildbeschreibung ein

Schritt 1: Fügen Sie Ihre Modul-JS-Datei unter hinzu<Vendor>/<Module_Name>/view/<area>/web/js/

z.B <Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js

Schritt 2:requirejs-config.js Datei erstellen unter<Vendor>/<Module_Name>/view/<area>/

z.B <Vendor>/<Module_Name>/view/<frontend>/requirejs-config.js

Fügen Sie folgenden Code hinzu requirejs-config.js

var config = {
    map: {
        '*': {
            bannerslider: 'VendorName_ModuleName/js/flexslider'
        }
    }
};

Hinweis: Sie können Ihren Objektnamen nach Ihren Wünschen festlegen. In meinem Fall habe ich die bannersliderErweiterung .js als Dateiname in festgelegt und füge sie nicht hinzuVendorName_ModuleName/js/flexslider

Schritt 3: Rufen Sie die Datei functionIhres Moduls js in der .phtmlDatei wie folgt auf.

<script type="text/javascript">
    require(['jquery','bannerslider'],function($){
        $(window).load(function() {
            $('.flexslider-8').flexslider({
                animation: "fade",
                controlNav: "thumbnails",
                slideshowSpeed: 2000,
                minItems: 2,
                maxItems: 4
            });
        });

    });
</script>

Es funktioniert gut für mich.

Trace: Verwenden Sie die NetRegisterkarte, um die angeforderte URL der geladenen JS-Datei anzuzeigen oder nicht.

Geben Sie hier die Bildbeschreibung ein

Praful Rajput
quelle
4
besser 'domReady!' Plugin anstelle von $ (Fenster) .load (), zum Beispiel erfordern (['jquery', 'bannerslider', 'domReady!], Funktion ($) {... Code erst nach dom load} ausführen)
KAndy
Ja, es wird sehr nützlich sein.
Praful Rajput
@KAndy es hängt davon ab, ob das Skript zuletzt ausgeführt werden soll. Ist es nicht besser, $ (Fenster) zu verwenden? Wird das Skript nicht nicht nur ausgeführt, wenn DOM gelesen wird, sondern wenn alle Skripte ausgeführt werden?
Lachezar Raychev
Und dieser Weg funktioniert bei mir nicht ... sagt static / adminhtml / Magento / backend / en_US / gift.js 404 (nicht gefunden) Ich habe den Cache geleert und die Kneipe / static ... bot nope .. funktioniert nicht
Lachezar Raychev
kratz das, es funktioniert ... domReady! funktioniert aber nicht ... wie kann ich ein Skript anweisen, ausgeführt zu werden, nachdem alle anderen Skripte geladen wurden, oder das ist in der aktuellen magent2-Methodik nicht vorhanden?
Lachezar Raychev
4

Mein Weg ist:

Schritt 1

Fügen Sie die Basis-Javascript-Datei einer Erweiterung mithilfe von Layoutanweisungen ein.

Schritt 2

Fordern Sie die anderen Javascript-Dateien der Erweiterung aus der Basisdatei mit RequireJS an:

require(
    [
      'jquery', 
      '{VendorName}_{ModuleName}{path_to_js_file/relative_to/view/web/no_js_at_end}'
     // ex. Magento/Ui/view/base/web/js/grid/sticky/sticky.js
     // became Magento_Ui/js/grid/sticky/stick
    ], 
    function($, someOtherLibrary) {
        // custom code here...
    );
});
Mage2.PRO
quelle
1
habe einen Fehler erforderlich ist nicht definiert, weil mein js vor requirejs geladen wird
einfacher Typ