JS in Magento 2 erweitern / überschreiben

Da Magento2 RequireJS zum Laden von Skripten verwendet und es keinen Skin- Ordner mehr gibt , habe ich ein Problem:

Wie kann ich die Modul-JS-Datei von Magento durch meine geänderte Version ersetzen?

Zum Beispiel - die opc-checkout-method.js, die zur Erweiterung Magento_Checkout gehört. Soweit ich sehen kann, ist es nicht in der Datei requirejs-config.js definiert.

Meine Erweiterung wird nach Magento_Checkout geladen , daher werden die erforderlichen js-config.js-Daten am Ende der resultierenden requirejs-config-Datei angehängt.

Oder sollte ich es anders machen, ohne das ganze Skript zu ersetzen?

— DmitryR
quelle

Ich würde mir vorstellen, dass Sie die Datei nicht so sehr ersetzen sollten, als vielmehr die Funktion (en) für das von der Datei geladene Objekt.

— Peter O'Callaghan

Antworten:

Es gibt keinen Skin-Ordner mehr, Sie können jedoch weiterhin Designs verwenden.

Als Proof-of-Concept habe ich Sie beispielhaft mit op-checkout-method.jsdiesem und diesem verwendet.

Voraussetzungen:

Magento2-beta11 installiert
Standarddesign aktiv (leer).
Keine Dateien im pub/staticOrdner erstellt (Ordner pub / static / frontend entfernen)

Aktionen:

Kopiert die op-checkout-method.jsDatei von ihrem Modulspeicherort app/code/Magento/Checkout/view/frontend/web/js/opc-checkout-method.jsin das leere Theme nachapp/design/frontend/Magento/blank/Magento_Checkout/web/js/opc-checkout-method.js
bearbeitete die Klondatei und fügte ein console.log('something')oder alert('something')in der _createFunktion des mage.opcCheckoutMethodWidgets hinzu.
Browser-Cache geleert.

Ergebnis:

Wenn die Checkout-Seite geladen wird, wird meine Warnung angezeigt oder der Text in der Konsole protokolliert.

Verwandte Informationen:

Wenn ich von cli php dev/tools/Magento/Tools/View/deploy.php(dem Skript, das die statischen Ressourcen veröffentlicht) aus starte, wird meine neue js-Datei abgelegtpub/static/frontend/Magento/blank/en_US/Magento_Checkout/js/opc-checkout-method.js

[BEARBEITEN]

Ich habe einen Weg gefunden, dies über ein Modul zu tun.

Dazu kommt [Namespace]/[Module]/view/frontend/requirejs-config.jsnoch:

var config = {
    map: {
        '*': {
            'Magento_Checkout/js/opc-checkout-method':'[Namespace]_[Module]/js/opc-checkout-method'
        }
    }
};

Dann erstellen Sie die Datei [Namespace]/[Module]/view/frontend/web/js/opc-checkout-method.jsmit Ihrem Inhalt.

Zu Testzwecken habe ich die Originaldatei geklont und gerade wieder eine console.login die _createFunktion eingefügt .

Denken Sie auch daran, die öffentlichen Ressourcen für das Frontend neu zu generieren.

— Marius
quelle

Danke, Marius! Ist es möglich, ähnliche Dinge innerhalb der Erweiterung zu tun?

— DmitryR

Ich glaube nicht, dass du das von einer Nebenstelle aus machst. Dies war in Magento 1 nur möglich, wenn Sie die Checkout-Vorlage vollständig geändert haben. Aber ich werde nach einer Möglichkeit suchen, das zu tun.

— Marius

Nochmals vielen Dank, Marius. Ich versuche, einen benutzerdefinierten Checkout zu implementieren, der den Standard-Checkout überschreibt, und bin mit JS-Overrides festgefahren.

— DmitryR

@DmitryR. Siehe mein Update zur Antwort.

— Marius

Der Platz für requirejs-config.js ist jetzt Vendor / Module / view / frontend / requirejs-config.js

— Eugen Bogdanovich

Hier ist das offizielle Dokument zum Erweitern / Ersetzen von Standard-JS-Komponenten: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/custom_js.html

Feedback ist willkommen!

— Alex
quelle

Willkommen bei MagentoSE. Diese Antwort wäre für zukünftige Benutzer nützlicher, wenn Sie die Antwort hier anstelle nur des Links hinzufügen würden. Wenn der Link in Zukunft nicht mehr funktioniert, können die Suchenden die Informationen, auf die Sie verweisen, nicht finden.

— AreDubya

Das ist ein fairer Punkt, aber wir fügen 301 Weiterleitungen hinzu, wenn Themen verschoben werden, damit das Risiko von 404s minimiert wird.

— Steve Johnson