Magento2 覆盖现有的 js 组件答案

【问题标题】：Magento2 Override existing js componentMagento2 覆盖现有的 js 组件
【发布时间】：2016-03-04 11:39:14
【问题描述】：

我想在我的主题中覆盖现有的 magento2 JS 组件以进行更多自定义。

Magento_Checkout/js/view/minicart.js

我想覆盖上面的 JS 组件，我想在删除按钮事件上添加更多操作。

【问题讨论】：

【解决方案1】：

你可以试试require js的“map”。我使用它并为我工作。以下是我主题中的 requirejs-config.js。

var config = {
    map: {
        '*': {
            'Magento_Checkout/js/view/minicart':'js/custom/minicart'
        }
    }
};

修改后的 minicart.js 文件放在我的主题内的 "web/js/custom" 文件夹中。

【讨论】：

这不会替换核心 js 文件，它只是添加您的自定义文件
这将包括您的自定义文件而不是本机 magento 文件。这不会替换核心文件，但在这种情况下不会包含核心文件。

【解决方案2】：

只需转到您的主题 Override Magento_Checkout 那里，然后在 web 文件夹下使路径与核心模块相同，然后添加您的 js 文件并进行所需的更改。它将反映在前端。

【讨论】：

【解决方案3】：

您还可以扩展现有的 Magento JS 而无需覆盖模块中的整个文件添加 require-config.js

app/code/MyVendor/MyModule/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/minicart': {
                'MyVendor_MyModule/js/minicart': true
            }
        }
    }
};

然后添加 minicart.js

app/code/MyVendor/MyModule/view/frontend/web/js/minicart.js

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

    return function (Component) {
        return Component.extend({

            /**
             * @override
             */
            initialize: function () {
                var self = this;

                return this._super();
            },
            MyCustomFunction: function () {
                return "my function";
            }
        });
    }
});

【讨论】：

【解决方案4】：

    define(['jquery'],function ($) {
    'use strict';
    var mixin = {
        /**
         *
         * @param {Column} elem
         */
        initSidebar: function () {
            var sidebarInitialized = false, miniCart;
                miniCart = $('[data-block=\'minicart\']');

            if (miniCart.data('mageSidebar')) {
                miniCart.sidebar('update');
            }

            if (!$('[data-role=product-item]').length) {
                return false;
            }
            miniCart.trigger('contentUpdated');

            if (sidebarInitialized) {
                return false;
            }
            sidebarInitialized = true;
            miniCart.sidebar({
                'targetElement': 'div.block.block-minicart',
                'url': {
                    'checkout': window.checkout.checkoutUrl,
                    'update': window.checkout.updateItemQtyUrl,
                    'remove': window.checkout.removeItemUrl,
                    'loginUrl': window.checkout.customerLoginUrl,
                    'isRedirectRequired': window.checkout.isRedirectRequired
                },
                'button': {
                    'checkout': '#top-cart-btn-checkout',
                    'remove': '#mini-cart a.action.delete',
                    'increacseqty':'#mini-cart a.action.increase-qty',
                    'decreaseqty':'#mini-cart a.action.decrease-qty',
                    'close': '#btn-minicart-close'
                },
                'showcart': {
                    'parent': 'span.counter',
                    'qty': 'span.counter-number',
                    'label': 'span.counter-label'
                },
                'minicart': {
                    'list': '#mini-cart',
                    'content': '#minicart-content-wrapper',
                    'qty': 'div.items-total',
                    'subtotal': 'div.subtotal span.price',
                    'maxItemsVisible': window.checkout.minicartMaxItemsVisible
                },
                'item': {
                    'qty': ':input.cart-item-qty',
                    'button': ':button.update-cart-item'
                },
                'confirmMessage': $.mage.__('Are you sure you would like to remove this item from the shopping cart??')
            });
            return this._super();
        }
    };
    return function (minicart) { // target == Result that Magento_Ui/.../columns returns.
        return minicart.extend(mixin); // new result that all other modules receive
    };
});

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助、质量更好，并且更有可能吸引投票