Magento 2 覆盖管理 js 文件

Question

如何将 vendor/magento/module-configurable-product/view/adminhtml/web/js/variations/steps/summary.js 覆盖到本地。我试过 https://magento.stackexchange.com/questions/60276/extending-overriding-js-in-magento-2 这个但没有运气

Answer 1

终于找到答案了

我写了一个模块，它在 Vendor/Module/view/adminhtml/requirejs-config.js 路径下包含一个 requirejs-config.js 并具有

var config = {
    "map": {
        "*": {
            "Magento_ConfigurableProduct/js/variations/steps/summary": "Vendor_Module/js/variations/steps/summary-custom",
        }
    }
}

在 Vendor/Module/view/adminhtml/web/js/variations/steps/summary-custom.js 中，我有

/** * Copyright © 2016 Magento. All rights reserved. * See COPYING.txt for license details. */ // jscs:disable jsDoc

define([
    'uiComponent',
    'jquery',
    'ko',
    'underscore',
    'mage/translate',
    'Magento_ConfigurableProduct/js/variations/steps/summary'
], function (Component, $, ko, _, $t, summary) {
    'use strict';

    return Component.extend({
        defaults: {
            modules: {
                variationsComponent: '${ $.variationsComponent }'
            },
            notificationMessage: {
                text: null,
                error: null
            },
            gridExisting: [],
            gridNew: [],
            gridDeleted: [],
            attributes: [],
            attributesName: [$.mage.__('Images'), $.mage.__('SKU'), $.mage.__('Quantity'), $.mage.__('Cost'), $.mage.__('Msrp'), $.mage.__('Price')],
            sections: [],
            gridTemplate: 'Magento_ConfigurableProduct/variations/steps/summary-grid'
        },
        initObservable: function () {
            this._super().observe('gridExisting gridNew gridDeleted attributes sections');
            this.gridExisting.columns = ko.observableArray();
            this.gridNew.columns = ko.observableArray();
            this.gridDeleted.columns = ko.observableArray();

            return this;
        },
        nextLabelText: $.mage.__('Generate Products'),
        variations: [],
        generateGrid: function (variations, getSectionValue) {
            var productSku = this.variationsComponent().getProductValue('sku'),
                productPrice = this.variationsComponent().getProductValue('price'),
                productWeight = this.variationsComponent().getProductValue('weight'),
                variationsKeys = [],
                gridExisting = [],
                gridNew = [],
                gridDeleted = [];
            this.variations = [];

            _.each(variations, function (options) {
                var product, images, sku, quantity, cost, msrp, price, variation,
                    productId = this.variationsComponent().getProductIdByOptions(options);

                if (productId) {
                    product = _.findWhere(this.variationsComponent().variations, {
                        productId: productId
                    });
                }
                images = getSectionValue('images', options);
                sku = productSku + _.reduce(options, function (memo, option) {
                    return memo + '-' + option.label;
                }, '');
                quantity = getSectionValue('quantity', options);

                if (!quantity && productId) {
                    quantity = product.quantity;
                }
                msrp = product.msrp;
                cost = product.cost;
                price = getSectionValue('price', options);

                if (!price) {
                    price = productId ? product.price : productPrice;
                }

                if (productId && !images.file) {
                    images = product.images;
                }
                variation = {
                    options: options,
                    images: images,
                    sku: sku,
                    quantity: quantity,
                    cost: cost,
                    msrp: msrp,
                    price: price,
                    productId: productId,
                    weight: productWeight,
                    editable: true
                };

                if (productId) {
                    variation.sku = product.sku;
                    variation.weight = product.weight;
                    gridExisting.push(this.prepareRowForGrid(variation));
                } else {
                    gridNew.push(this.prepareRowForGrid(variation));
                }
                this.variations.push(variation);
                variationsKeys.push(this.variationsComponent().getVariationKey(options));
            }, this);

            this.gridExisting(gridExisting);
            this.gridExisting.columns(this.getColumnsName(this.wizard.data.attributes));

            if (gridNew.length > 0) {
                this.gridNew(gridNew);
                this.gridNew.columns(this.getColumnsName(this.wizard.data.attributes));
            }

            _.each(_.omit(this.variationsComponent().productAttributesMap, variationsKeys), function (productId) {
                gridDeleted.push(this.prepareRowForGrid(
                    _.findWhere(this.variationsComponent().variations, {
                        productId: productId
                    })
                ));
            }.bind(this));

            if (gridDeleted.length > 0) {
                this.gridDeleted(gridDeleted);
                this.gridDeleted.columns(this.getColumnsName(this.variationsComponent().productAttributes));
            }
        },
        prepareRowForGrid: function (variation) {
            var row = [];
            row.push(_.extend({
                images: []
            }, variation.images));
            row.push(variation.sku);
            row.push(variation.quantity);
            row.push(variation.cost);
            row.push(variation.msrp);
            _.each(variation.options, function (option) {
                row.push(option.label);
            });
            row.push(this.variationsComponent().getCurrencySymbol() +  ' ' + variation.price);

            return row;
        },
        getGridTemplate: function () {
            return this.gridTemplate;
        },
        getGridId: function () {
            return _.uniqueId('grid_');
        },
        getColumnsName: function (attributes) {
            var columns = this.attributesName.slice(0);

            attributes.each(function (attribute, index) {
                columns.splice(5 + index, 0, attribute.label);
            }, this);

            return columns;
        },
        render: function (wizard) {
            this.wizard = wizard;
            this.sections(wizard.data.sections());
            this.attributes(wizard.data.attributes());
            this.gridNew([]);
            this.gridExisting([]);
            this.gridDeleted([]);
            this.generateGrid(wizard.data.variations, wizard.data.sectionHelper);
        },
        force: function () {
            this.variationsComponent().render(this.variations, this.attributes());
            $('[data-role=step-wizard-dialog]').trigger('closeModal');
        },
        back: function () {
        }
    });
});

我在这里需要的是在编辑变体时显示“Msrp”和“Cost”