Magento 2 - Cara menimpa file javascript frontend

Question

Saya perlu menimpa file javascript dari modul khusus di:

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

karena saya perlu mengganti baris kode di dalamnya untuk mengganti template dengan modul saya sendiri:

// 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;
        },

     ...

Bagaimana cara mengganti baris itu dari template saya sendiri?

Saya membuat file app / code / Company / Shipping / view / frontend / requirejs-config.js file ini:

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

Kemudian saya menyalin file one-step-layout.js ke app \ code \ Company \ Shipping \ view \ frontend \ web \ js \ model \ one-step-layout.js .

Ini harus mencampurkan skrip saya ke skrip asli.

Kode apa yang diperlukan dalam file one-step-layout.js saya untuk menggantikan template untuk memuat template saya sendiri?

Answer 1

Magento menyediakan 2 cara untuk menimpa file js.

1. peta
2. mixin

Mixin cukup rumit dan peta sangat mudah dipahami.

Untuk menimpa file js terlebih dahulu Anda harus membuat modul. Untuk membuat modul kustom, Anda memerlukan file berikut di app / code / Company / Shipping /. Saya harap Anda menciptakannya.

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

maka Anda harus membuat file requirejs-config.js di sini app / code / Company / Shipping / view / frontend / requirejs-config.js saat Anda membuat tetapi konten akan berubah di sini.

Konten file itu harus sama seperti di bawah ini.

var config = {
map: {
    '*': {
        'Amasty_Checkout/js/model/one-step-layout':'Company_Shipping/js/model/one-step-layout'
        }
    }
};

dan kemudian salin kode file js asli ke app / code / Company / Shipping / view / frontend / web / js / model / one-step-layout.js

dan buat perubahanmu di sini.

maka Anda harus menjalankan perintah magento.

pengaturan php bin / magento: perbarui pengaturan
php bin / magento: konten-statis: terapkan

Jika ini membantu Anda kemudian tekan suka dan terima sebagai jawaban.

Terima kasih
Hiren Patel