Request Quote

Remove layout added by js layout in magento2

In magento2, layout on some pages are added by js layout by using ui-components.

So, if you want to remove an component added by js layout then you can use given process:

you need to add these lines in your layout file:

<item name="config" xsi:type="array">
    <item name="componentDisabled" xsi:type="boolean">true</item>
</item>

This code is written under the component which you want to remove and at the same nesting level.

for example: Given example is to remove discount block from checkout page.

firstly, i have created checkout_index_index.xml file at path:
Webkul\Test\view\frontend\layout\checkout_index_index.xml

Now add the following code:

<?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="billing-step" xsi:type="array">
                                            <item name="component" xsi:type="string">uiComponent</item>
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="afterMethods" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="discount" xsi:type="array">
                                                                <item name="config" xsi:type="array">
    <item name="componentDisabled" xsi:type="boolean">true</item>
</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Here, componentDisabled with true value disables the respective component.

After this code, discount code component get disabled from checkout page.

Hope, this blog will helps you in implementation.

Thank you 🙂

. . .

Comment

Add Your Comment

Be the first to comment.

css.php
Hire Us!
Brief us about your requirements and we'll get back to you.
Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again
Close