Skip to content

Magento Js Override another Js File (which is already overriding a Magento Core js)

I need to overwrite a third party module js with my own one. I read in many articles which map is the way to do it.

Foodentyco_Checkout/js/model/shipping-rate-service-override has to override Amasty_Checkout/js/model/shipping-rate-service-override.

map: 
{
    '*': 
    {
        'Amasty_Checkout/js/model/shipping-rate-service-override':'Foodentyco_Checkout/js/model/shipping-rate-service-override'
    }
}

However, this case is a little tricky, as the third party module js file is itself overriding a core magento js one.

So it would create a chain!
My Js File ovverides the Amasty Third party module one and the Amasty overrides the Magento Core one.

By doing so my script is being executed, so it seems to work.

However it is also still running the original one (Amasty).

As a result, my new js file has not overriden the original one, but is being executed after it.

config.map['*'] = {
    checkoutCollapsibleSteps: 'Amasty_Checkout/js/view/checkout/design/collapsible-steps',
    summaryWidget: 'Amasty_Checkout/js/view/summary/summary-widget',
    stickyWidget: 'Amasty_Checkout/js/view/summary/sticky-widget',
    'Magento_Checkout/template/payment-methods/list.html': 'Amasty_Checkout/template/payment-methods/list.html',
    'Magento_Checkout/template/billing-address/details.html':
        'Amasty_Checkout/template/onepage/billing-address/details.html',
    'Magento_Checkout/js/action/get-totals': 'Amasty_Checkout/js/action/get-totals',
    'Magento_Checkout/js/model/shipping-rate-service': 'Amasty_Checkout/js/model/shipping-rate-service-override'
};