Magento 2 – How to Add Text in Checkout Page via XML

checkoutmagento2.2xml

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?

Best Answer

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:

Related Solutions

Magento2 – Checkout Index XML Not Overriding

To override a layout XML file (rather than extend) you need to add it to a slightly different directory, more info can be found in the official docs

<theme_dir>
  |__/<Namespace_Module>
    |__/layout
      |__/override
         |__/theme
            |__/<Parent_Vendor>
               |__/<parent_theme>
                  |--<layout1>.xml
                  |--<layout2>.xml

So for your case where you need to override Magento\Blank it would be:

app\design\frontend\NAMESPACE\themename\Magento_Checkout\layout\override\theme\Magento\blank\checkout_index_index.xml

If overriding the theme doesn't work, make sure you don't need to override the layout coming from the module itself rather than the theme's XML. To do this read the 'Override base layouts' section in the docs linked above.

Magento 2 – How to Add Text Within Container via XML

You need to use the argument directly without the array.

Instead of

    <arguments>
      <argument name="data" xsi:type="array">
        <item name="text" xsi:type="string">About Us</item>
      </argument>
    </arguments>

You need:

    <arguments>
      <argument translate="true" name="text" xsi:type="string">About Us</argument>
    </arguments>

Alternative

You can also try with the <action> tag:

<action method="setText">
      <argument translate="true" name="text" xsi:type="string">About Us</argument>
</action>

Adding a div directly

You can also add a div directly in the text with the following:

<argument translate="true" name="text" xsi:type="string"><![CDATA[<div class="label">About Us</div>]]></argument>