Magento 2 で .js および .html ファイルを拡張する方法

Question

延長中です customer address これらのために私はしなければなりません 変更/拡張 vendor/Magento/module-ui コアファイル。

つまり

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

そして

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

コアファイルを変更すると正常に動作しますが、これは拡張するのに良い手順/アイデアではありません。

したがって、ベンダー名を次のように作成しました Magento で root/app/code/ 変更した上記のファイルをローカルの同じフォルダーに配置しました。

つまり

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

そして

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

これらのファイルを配置した後、キャッシュをクリアしました。しかし、それでも変更は表示されません。

走ってしまいました php bin/magento setup:static-content:deploy コマンドもできましたが、運がありませんでした。

これを行う方法を教えてください。

Answer 1

ついに自分らしさを達成しました。

作成する requirejs-config.js からのファイル 学習/HelloWorld/ビュー/ベース 以下のコードを貼り付けてください

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

作成する collection.js からのファイル ラーニング/HelloWorld/view/base/web/js/form/components そしてコアコードをコピー＆ペーストして変更します。

   /**
     * 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');
            }

        });
    });

作成する collection.html からのファイル 学習/HelloWorld/ビュー/ベース/web/テンプレート/フォーム/コンポーネント パスを指定してコアコードを貼り付け、変更します

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

次に、以下のコマンドを実行します。

1. セットアップ:アップグレード
2. セットアップ:静的コンテンツ:展開

これでうまくいきます。

ご質問がございましたらお気軽にお問い合わせください。

Answer 2

1 つのモジュールは 1 つのパスに登録されているため、ベンダーからは読み取ることができますが、アプリ/コードからは読み取ることができません。