Wie kann ich eine UI-Komponente JavaScript in Magento 2 erweitern?

7

Ich weiß, dass es bereits ein Thema dazu sowie eine Dokumentation gibt , aber ich kann es einfach nicht zum Laufen bringen:

Wie kann ich das JavaScript einer UI-Komponente in Magento 2 erweitern?

Ich versuche zu erweitern Magento_Ui/js/form/form(befindet sich in vendor/magento/module-ui/view/base/web/js/form/form.js). Also habe ich requirejs-config.jsim view/baseOrdner meiner Module hinzugefügt:

var config = {
    map: {
        '*': {
            "Magento_Ui/js/form/form": "Vendor_Module/js/form/form"
        }
    }
};

Und in meiner Akte base/web/js/form/form.js:

define([
  "Magento_Ui/js/form/form"
], function(FormComponent){
  "use strict";

  /**
   * Rewrite original UI Component:
   */
  return FormComponent.extend({});
});

Aber aus irgendeinem Grund FormComponentist nicht die UI-Komponente, die ich zu erweitern versuche, sondern undefined.

Laut Dokumentation sollte dies funktionieren, tut es aber nicht. Was vermisse ich hier?

magento2 uicomponent extend

— Giel Berkers
quelle

Bitte beschreiben Sie Ihre Aufgabe, da Sie meiner Meinung nach die Kernformularkomponente nicht überschreiben müssen. Sieht so aus, als ob sich Ihre Komponente selbst benötigt, da sich eine Karte in der erforderlichen Konfiguration befindet

— Max

@MaxStsepantsevich Nun, es hängt mit meiner anderen Frage zusammen: magento.stackexchange.com/questions/154201/… Ich habe Upload-Felder dynamisch hinzugefügt und möchte, dass diese auch gesendet werden, wenn ich mein Formular speichere.

— Giel Berkers

12

Dies kann unter Verwendung eines erforderlichen "Mixins" erreicht werden.

Erstellen Sie zuerst Your_Module/view/base/requirejs-config.jsmit diesem Code:

var config = {
    'config': {
        'mixins': {
            'Magento_Ui/js/form/form': {
                'Your_Module/form-hook': true
            }
        }
    }
};

Nun mache die Datei Your_Module/view/base/web/form-hook.js:

define([], function () {
    'use strict';

    return function (Form) {
        return Form.extend({
            initialize: function () {
                this._super();
                console.log('Hello from the mixin!');
            }
        });
    }
});

Dieses Beispiel erweitert die Initialisierungsmethode der formKomponente.

Weitere Informationen zu "Mixins" finden Sie hier: http://alanstorm.com/the-curious-case-of-magento-2-mixins/

— Aaron Allen
quelle

0

Ich hatte ein ähnliches Problem und habe es gelöst.

Versuchen Sie, die Deklaration der UI-Komponente im Code zu finden und zu ersetzen. Zum Beispiel:

Magento_Checkout: LayoutProcessor.php

private function processPaymentConfiguration(array &$configuration, array $elements)

...
$output[$paymentCode . '-form'] = [
    'component' => 'Vendor_Module/js/view/billing-address',

PS Verwenden Sie dies nicht:

var config = {
    map: {
        '*': {
            "Magento_Ui/js/form/form": "Vendor_Module/js/form/form"
        }
    }
};

— Mykhailo Shatilov
quelle