08.04.2025・Allgemein
08.04.2025・Allgemein

Magento 2 UIComponent doesn’t show template

Fabian Blechschmidt

Small hint from our daily life as developers: If your default template for your ui component doesn’t show up, it might be, because you overwrote it in your template 😉

So you defined your default template like this:

;define([
    // ...
    'Magento_Ui/js/form/element/select',
    // ...
], function (/* ... */ select, /* ... */) {
    'use strict';

    let self;

    return select.extend({

        defaults: {
            elementTmpl: 'Customer_Plugin/shipping-option-select-element'
        }
        // ...
    });
});

But then you overwrite it in your layout xml, like view/frontend/layout/checkout_index_index.xml

I tried to cleanup the XML to make it easier readable but not remove the inheritance. Not an easy job.

<?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="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="children" xsi:type="array">
                                                                <item name="shipping-option-wrapper" xsi:type="array">
                                                                    <item name="children" xsi:type="array">
                                                                        <item name="shipping-option" xsi:type="array">
                                                                            <item name="children" xsi:type="array">
                                                                                <item name="select-date" xsi:type="array">
                                                                                    <item name="component" xsi:type="string"> Customer_Plugin/js/view/shipping-option-select</item>
                                                                                    <item name="config" xsi:type="array">
                                                                                        <!-- HERE THE TEMPLATE IS OVERWRITTEN -->
                                                                                        <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
                                                                                    </item>
                                                                                </item>
                                                                            </item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Other articles from this category