Magento 2 - How to override frontend javascript file

Question

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

vendor\amasty\module-single-step-checkout\view\frontend\web\js\model\one-step-layout.js

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

// Checkout layout options model
define([
    'ko',
    'uiRegistry',
    'Amasty_Checkout/js/view/utils'
], 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';
                    }

                    break;

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

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


                    }

                    break;

                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?

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: {
    '*': {
        'Amasty_Checkout/js/model/one-step-layout':'Company_Shipping/js/model/one-step-layout'
        }
    }
};

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