Magento 2 - So überschreiben Sie die Frontend-Javascript-Datei

Question

Ich muss eine Javascript-Datei aus einem benutzerdefinierten Modul unter folgender Adresse überschreiben:

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

weil ich eine Codezeile darin ersetzen muss, um eine Vorlage durch mein eigenes Modul zu ersetzen:

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

     ...

Wie kann ich diese Zeile aus meiner eigenen Vorlage überschreiben?

Ich habe diese Datei app / code / Company / Shipping / view / frontend / requirejs-config.js Datei erstellt:

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

Dann habe ich die Datei one-step-layout.js nach app \ code \ Company \ Shipping \ view \ frontend \ web \ js \ model \ one-step-layout.js kopiert .

Dies sollte mein Skript mit dem ursprünglichen Skript mischen.

Welcher Code ist in meiner Datei one-step-layout.js erforderlich , um die Vorlage zum Laden meiner eigenen Vorlage zu ersetzen?

Answer 1

Magento bietet zwei Möglichkeiten, js-Datei zu überschreiben.

1. Karte
2. mischen

Mixin ist ziemlich kompliziert und die Karte ist wirklich leicht zu verstehen.

Um die js-Datei zu überschreiben, müssen Sie zuerst ein Modul erstellen. Um ein benutzerdefiniertes Modul zu erstellen, benötigen Sie die folgenden Dateien in app / code / Company / Shipping /. Ich hoffe du hast das geschaffen.

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

Dann müssen Sie die Datei requirejs-config.js hier erstellen. app / code / Company / Shipping / view / frontend / requirejs-config.js wie Sie erstellt haben, aber der Inhalt wird sich hier ändern.

Der Inhalt dieser Datei sollte der folgende sein.

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

und kopieren Sie dann den ursprünglichen js-Dateicode in app / code / Company / Shipping / view / frontend / web / js / model / one-step-layout.js

und nehmen Sie hier Ihre Änderungen vor.

dann müssen Sie das Kommando über Magento ausführen.

PHP Bin / Magento Setup: Upgrade
PHP Bin / Magento Setup: Statischer Inhalt: Bereitstellen

Wenn dies Ihnen hilft, klicken Sie auf "Gefällt mir" und akzeptieren Sie als Antwort.

Vielen Dank,
Hiren Patel