Magento2 Override existing js component

Question

I want to override the existing magento2 JS Component in my theme for some more customization.

Magento_Checkout/js/view/minicart.js

Above JS component i want to override and i want to add some more operation on the remove button event.

score 1 · Answer 1 · answered May 06 '16 at 04:07

1

You can try "map" of require js. I used this and working for me. following is the requirejs-config.js inside my theme.

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

Modified minicart.js file is placed inside "web/js/custom" folder inside my theme.

answered May 06 '16 at 04:07

Anjith K P

2,158
27
35

This doesn't replace the core js file, it merely adds your custom file – tread Jan 16 '17 at 10:19
This will include your custom file instead of native magento file. This will not replace the core file, but core file will not be included in this case. – Anjith K P Jan 17 '17 at 09:26

score 0 · Answer 2 · answered Feb 03 '17 at 13:24

0

Just Go to your theme Override Magento_Checkout there, then under web folder make path as same as core module then add your js file & do required changes. It will reflect on frontend.

answered Feb 03 '17 at 13:24

Shubham Mathur

119
5

score 0 · Answer 3 · answered Feb 06 '19 at 08:39

You can also extend an existing Magento JS without overwriting the whole file in your module add the 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
            }
        }
    }
};

Then add the 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";
            }
        });
    }
});

score 0 · Answer 4 · answered Feb 23 '21 at 11:06

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

Please don't post only code as an answer, but also provide an explanation of what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes — Ran Marciano, Feb 23 '21 at 11:40

Magento2 Override existing js component

4 Answers4