I need to overwrite a javascript file from a custom module at:


because I need to replace a code line in it to replace a template with my own module:

// Checkout layout options model
], function (ko, registry, viewUtils) {
    'use strict';

    const MAPPING_BLOCK_NAME = {
        CLASS_NAMES = {
            classic: {
            modern: {
        BLOCK_ATTRS = {

    return {
        containerClassNames: ko.observable(''),
        selectedLayout: [],
        checkoutDesign: '',
        checkoutLayout: '',
        checkoutBlocks: {},
        mainAdditionalClasses: '',

         * Getting checkout block by name
         * @param {String} blockName
         * @returns {observable}
        getCheckoutBlock: function (blockName) {
            var requestComponent = this.checkoutBlocks[blockName]
                || this.requestComponent(MAPPING_BLOCK_NAME[blockName]);

            switch (blockName) {
                case 'shipping_address':
                    if (requestComponent()) {
                        requestComponent().template = 'Amasty_Checkout/onepage/shipping/address';


                case 'shipping_method':
                    if (requestComponent()) {

                        // ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
                        // I need to replace this line with `Company_Shipping/onepage/shipping/methods`
                        requestComponent().template = 'Amasty_Checkout/onepage/shipping/methods'; 



                default: break;

            return requestComponent;


How can I override that line from my own template?

I created this file app/code/Company/Shipping/view/frontend/requirejs-config.js file:

var config = { 
    config: {
        mixins: {
            'Amasty_Checkout/js/model/one-step-layout': {
                'Company_Shipping/js/model/one-step-layout': true

Then I copied the file one-step-layout.js to app\code\Company\Shipping\view\frontend\web\js\model\one-step-layout.js.

This should mixin my script to the original script.

What code is required in my one-step-layout.js file to replace the template to load my own template?

1 Answer 1


Magento provide 2 way of override js file.

  1. map
  2. mixin

Mixin is quite complicate and map is really easy to understand.

For override js file first you have to create module. To create custom module you need following files in app/code/Company/Shipping/. I hope you created that.

  1. registration.php
  2. etc/module.xml

then you have to create requirejs-config.js file here app/code/Company/Shipping/view/frontend/requirejs-config.js as you created but content will change here.

Content of that file should be same as below.

var config = {
map: {
    '*': {

and then copy original js file code to app/code/Company/Shipping/view/frontend/web/js/model/one-step-layout.js

and make yo changes here.

then you have to run command of magento.

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

If this help you then hit like and accept as answer.

Thank you
Hiren Patel

  • I tried your map solution, and it works. Thx!
    – Black
    Commented Oct 12, 2020 at 8:41
  • It doesn't work on 2.4.5-p2
    – Deeps
    Commented Jun 28, 2023 at 10:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.