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?
-
Maybe hello in module name should be uppercaseBartosz Herba– Bartosz Herba2017年12月07日 15:49:00 +00:00Commented Dec 7, 2017 at 15:49
-
1Possible duplicate of Add custom js in head in magento2?Bartosz Herba– Bartosz Herba2017年12月07日 15:52:41 +00:00Commented Dec 7, 2017 at 15:52
1 Answer 1
!!!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!
Mohamed El Mrabet
1,56214 silver badges24 bronze badges
Explore related questions
See similar questions with these tags.
default