5

I'm trying to add custom text in checkout page via XML. I have my custom checkout_index_index.xml file with this inside:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" 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="sidebar" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="summary" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="totals" xsi:type="array">
                                                <item name="text" xsi:type="string" translate="true">Custom text here</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>
</page>

The text is not added. I've tried with a block but an error is displayed. How can I display a custom text or a CMS Block?

  • In which place you want to add your custom text ? – Keyur Shah Jan 9 '18 at 12:34
6

You can use uiComponent with a custom template:

app/code/Vendor/Module/view/frontend/layout/checkout_index_index.xml

<?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="sidebar" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="summary" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="totals" xsi:type="array">
                                                    <item name="children" xsi:type="array">

                                                        <item name="some_text" xsi:type="array">
                                                            <item name="sortOrder" xsi:type="string">35</item>
                                                            <item name="component"  xsi:type="string">uiComponent</item>
                                                            <item name="config" xsi:type="array">
                                                                <item name="template" xsi:type="string">Vendor_Module/some_text</item>
                                                            </item>
                                                        </item>

                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

app/code/Vendor/Module/view/frontend/web/template/some_text.html

<h3>Some text</h3>

The result looks like this:

Result

  • Really appreciate to the point answer! – Kapil Yadav Jan 9 '18 at 12:57
  • @SiarheyUchukhlebau It's working. And a new question... If I want to use a CMS block, is there any way to call the block directly from XML? I've seen that the custom file must be HTML. If I use PHTML it doesn't work. – mlavela Jan 9 '18 at 14:49
  • @mlavela In this case you should create this block in the layout and pass it trough .phtml template as a param of your custom UI component, then add this html in your template (.html) – Siarhey Uchukhlebau Jan 10 '18 at 13:03
  • Great answer! I can confirm this works on Magento 2.1.18. Just wondering, is the template required? What if I just want to add a plain word that can be translated? – Jacques Sep 24 at 9:15

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.