0

Having trouble trying to overwrite a JS component template at checkout. Here is my module structure and code for this specific task:

app/code/MY/MODULE/view/frontend/layout/checkout_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="sidebar" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="iosc-place-order-button" xsi:type="array">
                                            <item name="component" xsi:type="string">Onestepcheckout_Iosc/js/view/placeorder</item>
                                            <item name="displayArea" xsi:type="string">summary</item>
                                            <item name="sortOrder" xsi:type="string">900</item>
                                            <item name="config" xsi:type="array">
                                                <item name="template" xsi:type="string">MY_MODULE/view/place_order</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

app/code/MY/MODULE/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            'Onestepcheckout/Iosc/template/view/place_order.html': 'MY/MODULE/template/view/place_order.html'
        }
    }
};

app/code/MY/MODULE/view/frontend/web/template/view/place_order.html

<h1>HELLO!!</h1>

I've echoed the contents of $this->_request->getFullActionName() and it returns checkout_index_index

Is there anything that looks out of place here, I cannot see why it's not working! Any help would be greatly appreicated. Many thanks.

|improve this question
1

You'll kick yourself for this one. Needs to be Onestepcheckout_Iosc and MY_MODULE in requirejs-config.js.

app/code/MY/MODULE/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            'Onestepcheckout_Iosc/template/view/place_order.html': 'MY_MODULE/template/view/place_order.html'
        }
    }
};

I'm unable to verify as I do not have Onestepcheckout Iosc but that's the correct way of overriding a web template.

Update: I adapted your code slightly to work with Amasty OneStepCheckout and it's printing HELLO!! on the checkout so the rest of the code must be ok.

|improve this answer
  • 1
    Ouch! I hate those moments, but you are a saviour! – Chris Rogers Jan 22 at 22:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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