Reading list Switch to dark mode

    Remove Layout added by JS Layout in Magento 2

    Updated 30 December 2022

    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.

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    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.

    I hope this blog will help you with Remove Layout added by JS layout in your Magento 2. You can also explore headless eCommerce development to develop high-quality interactive websites with the help of JavaScript frameworks.

    Please reach out to our team via a support ticket if you have any queries.

    Try this and if you have any queries then just comment below 🙂

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home