1

How could I add a new JS Component, using required and following the Magento's pattern via an XML which I can determine a unique page (e.g. using a checkout_index_index.xml)

I don't want to create a PHTML just to add load a JS Component.

Improve this question

1 Answer 1

Reset to default
1

You can create a checkout_index_index.xml in your module or theme, then add it via an uiComponent, as you can see in this example below.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="content">
            <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">
                                            <item name="shipping-step" xsi:type="array">
                                                <item name="children" xsi:type="array">
                                                    <item name="shippingAddress" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="shippingAdditional" xsi:type="array">
                                                                <item name="component" xsi:type="string">uiComponent</item>
                                                                <item name="displayArea" xsi:type="string">shippingAdditional</item>
                                                                <item name="children" xsi:type="array">
                                                                    <item name="vendor-module-popup" xsi:type="array">
                                                                        <item name="component" xsi:type="string">
                                                                            Vendor_Module/js/popup-message
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </referenceBlock>
        </referenceBlock>
    </body>
</page>

Then in my JS extend the component.

define(
    ['jQuery', 'ko', 'uiComponent', 'Magento_Checkout/js/model/quote',
    function ($, ko, Component, quote, shipping) {
        'use strict';
        let self;
        return Component.extend({
            defaults: {
                template: 'Vendor_Module/notice'
            },
            showAlert: ko.observable(false),
            initialize: function () {
                self = this;
                this._super();
                )
            }
        })
    }
);
Improve this answer

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.