Question

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

Magento_Checkout/js/view/minicart.js

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

Answer 1

您可以尝试使用require js的“地图”。我用这个并为我工作。以下是我主题中的requirejs-config.js。

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

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

Answer 2

转到你的主题覆盖那里的Magento_Checkout，然后在web文件夹下创建路径与核心模块相同然后添加你的js文件＆amp;做必要的改变。它将反映在前端。

Answer 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";
            }
        });
    }
});

Answer 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
    };
});

Magento2覆盖现有的js组件

4 个答案: