So erweitern Sie .js- und .html-Dateien in Magento 2

Question

Ich verlängere customer address für diese muss ich ändern/erweitern vendor/Magento/module-ui Kerndateien.

d.h

root/vendor/magento/module-ui/view/base/web/js/form/components/collection.js

Und

root/vendor/magento/module-ui/view/base/web/templates/form/components/collection.html

Wenn ich Kerndateien geändert habe, funktioniert es einwandfrei, aber es ist keine gute Vorgehensweise/Idee zum Erweitern.

Daher habe ich den Namen des Anbieters als erstellt Magento In root/app/code/ und ich habe die oben geänderten Dateien im selben lokalen Ordner abgelegt.

d.h

root/app/code/magento/module-ui/view/base/web/js/form/components/collection.js

Und

root/app/code/magento/module-ui/view/base/web/templates/form/components/collection.html

Nachdem ich diese Dateien abgelegt habe, habe ich den Cache geleert.Aber meine Änderungen werden immer noch nicht angezeigt.

Ich bin gerannt php bin/magento setup:static-content:deploy Befehl auch, aber kein Glück.

Könnten Sie mir bitte vorschlagen, wie das geht?

Answer 1

Endlich habe ich mein Ziel erreicht.

Erstellen requirejs-config.js Datei von Lernen/HelloWorld/view/base und fügen Sie den folgenden Code ein

var config = {
    map: {
        '*': {
            'Magento_Ui/js/form/components/collection':'Learning_HelloWorld/js/form/components/collection'
        }
    }
};

Erstellen collection.js Datei von Learning/HelloWorld/view/base/web/js/form/components und kopieren Sie den Kerncode, fügen Sie ihn ein und modifizieren Sie ihn.

   /**
     * Copyright © 2015 Magento. All rights reserved.
     * See COPYING.txt for license details.
     */
    define([
        'underscore',
        'mageUtils',
        'uiRegistry',
        'uiComponent',
        'uiLayout',
        'Magento_Ui/js/modal/confirm'
    ], function (_, utils, registry, Component, layout, confirm) {
        'use strict';

        var childTemplate = {
            parent: '${ $.$data.name }',
            name: '${ $.$data.childIndex }',
            dataScope: '${ $.name }',
            nodeTemplate: '${ $.$data.name }.${ $.$data.itemTemplate }'
        };

        return Component.extend({
            defaults: {
                lastIndex: 0,
                template: 'Learning_HelloWorld/form/components/collection'
            },

/* my custom methods */
            sendAddress: function (elem) {
                var self = this;
                self._sendAddress(elem);
            },

/* my custom methods */
            _sendAddress: function (elem) {


                this.bubble('update');
            }

        });
    });

Erstellen collection.html Datei von Learning/HelloWorld/view/base/web/template/form/components Pfad, fügen Sie den Kerncode ein und ändern Sie ihn

   <div class="ui-tabs">
<!-- My Extra html code -->
     <button type="button" data-bind="click: $parent.sendAddress.bind($parent, element)">
         Send this Address
     </button>
    </div>

Führen Sie nun die folgenden Befehle aus.

1. Setup:Upgrade
2. setup:static-content:deploy

Jetzt wird es funktionieren.

Bei Fragen können Sie uns jederzeit kontaktieren.

Answer 2

Ein Modul ist unter einem Pfad registriert, deshalb kann es vom Hersteller lesen, aber nicht von der App/dem Code.