1

I want to add some custom JavaScript in the header of the checkout page. I tried to follow the layout structure..

I created a module and places my custom JS file is in app/code/Roman/hello/view/frontend/web/js/view

and my checkout_index_index.xml file is:

    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="head.additional">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="my-new-step" xsi:type="array">
                        <item name="component" xsi:type="string">
                            Roman_hello/js/view/hello-init.js
                        </item>
                        <item name="sortOrder" xsi:type="string">2</item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
        <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="steps" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <!-- The new step you add -->
                                            <item name="my-new-step" xsi:type="array">
                                                <item name="component" xsi:type="string">Roman_hello/js/view/js_helloworld</item>
                                                <item name="sortOrder" xsi:type="string">2</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
        </referenceBlock>
    </body>
</page>

That's what I was able to pickup from different places on the web I found, but nothing seems to work..

How should I write it?

Improve this question
2

1 Answer 1

Reset to default
2

!!!SOLVED!!!

The checkout_index_index.xml file needs to have the following code: 

<head>
       <script src="Roman_hello::js/view/hello-init.js"/> 
</head>

but you also need a require-config.js file in <Vendor_Name>/<Module_Name>/view/frontend

and it needs to have the following code:

var config = {
    map: {
        '*': {
            lazyloadScript:'Roman_hello::js/view/hello-init'
        }
    }
};

Hope this helps anyone!

Improve this answer
0

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.