0

I am trying to add another block to the checkout. The uiComponent that I try to add is by default shown in the login popup that opens when you click on Log In on top of the page. So I know the uiComponent works.
This is how it's added there by default.

<?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="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="authentication" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="social-fields" xsi:type="array">
                                            <item name="sortOrder" xsi:type="string">0</item>
                                            <item name="component" xsi:type="string">Aheadworks_SocialLogin/js/authentication/social</item>
                                            <item name="template" xsi:type="string">Aheadworks_SocialLogin/authentication/social</item>
                                            <item name="displayArea" xsi:type="string">additional-login-form-fields</item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Now I try to add the same uiComponent tot the checkout page, without having to open the popup.

I tried this in my theme's checkout_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header.panel" remove="true"/>
        <referenceContainer name="header-wrapper-left" remove="true"/>
        <referenceContainer name="header-wrapper-right" remove="true"/>

        <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="social-login-fields" xsi:type="array">
                                    <item name="sortOrder" xsi:type="string">0</item>
                                    <item name="component" xsi:type="string">Aheadworks_SocialLogin/js/authentication/social</item>
                                    <item name="template" xsi:type="string">Aheadworks_SocialLogin/authentication/social</item>
                                    <item name="displayArea" xsi:type="string">authentication</item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>

        <referenceContainer name="content">
            <container name="login">
                <block name="login.button" template="Magento_Checkout::login.phtml" class="Magento\Framework\View\Element\Template" />
            </container>
        </referenceContainer>
    </body>
</page>

The rest of the layout updates work, so I guess the xml is fine but the component doesn't show.

What else am I missing?

Your Answer

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

Browse other questions tagged or ask your own question.