9

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?

Improve this question
1
  • 1
    In which place you want to add your custom text ?
    – Keyur Shah
    Jan 9, 2018 at 12:34

1 Answer 1

Reset to default
10

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

Improve this answer
4
  • Really appreciate to the point answer!
    – Kapil Yadav
    Jan 9, 2018 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, 2018 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, 2018 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, 2019 at 9:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.