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.

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();
                )
            }
        })
    }
);

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.