magento2: It is not possible to extend or remove a checkout component

Hi,

I have a current issue on a theme that I’m working on where I want to extend the message component:

<item name="component" xsi:type="string">Magento_Ui/js/view/messages</item>

To extend the file I created a new file in my own theme called ‘messages-new.js’ in the correct location, and then in my own Magento_Checkout module folder have the checkout_index_index.xml where I insert the following code

<item name="errors" xsi:type="array"> <item name="sortOrder" xsi:type="string">0</item> <item name="component" xsi:type="string">Magento_Ui/js/view/messages-new</item> <item name="displayArea" xsi:type="string">messages</item> </item>

However, although the new file i’ve created successfully extends the component how I want, and is added to the checkout, I cannot find a way to remove the original messages.js

My component is added to the “errors” array and loads both components.

How do i go about removing the original component so only my new one is loaded.

Thanks

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 16 (7 by maintainers)

Commits related to this issue

Merge pull request #3373 from magento-tsg/2.1.16-develop-pr59 [TSG] Backporting for 2.1 (pr59) (2.1.16) — committed to magento/magento2 by deleted user 6 years ago

Most upvoted comments

@lgarridoj This works fine for us. Here’s my version of the full file with that change, and some other fields removed. Gotta love the nesting. 😝

Also be sure to try clearing your static files and clearing caches after this change, in case your old XML is cached.

app/design/frontend/MyTheme/default/Magento_Checkout/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="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="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="company" xsi:type="array">
                                                                    <item name="visible" xsi:type="boolean">false</item>
                                                                </item>
                                                                <item name="fax" xsi:type="array">
                                                                    <item name="visible" xsi:type="boolean">false</item>
                                                                </item>
                                                                <item name="telephone" xsi:type="array">
                                                                    <item name="visible" xsi:type="boolean">false</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

chicgeek on May 19, 2016

I did it using the following code: in " <vendor>/<module>/etc/frontend/di.xml"

<type name="Magento\Checkout\Block\Onepage">
    <arguments>
        <argument name="layoutProcessors" xsi:type="array">
            <item name="<someUniqueName>" xsi:type="object"><vendor>/<module>\Block\Checkout\LayoutProcessor</item>
        </argument>
    </arguments>
</type>

and in LayoutProcessor:

`<?php

use Magento\Checkout\Block\Checkout\LayoutProcessorInterface;

class LayoutProcessor implements LayoutProcessorInterface { public function process($jsLayout) { $component = &$jsLayout[‘components’][‘checkout’][‘children’][‘steps’][‘children’]; $componentBilling = &$component[‘billing-step’][‘children’][‘payment’][‘children’][‘payments-list’][‘children’]; foreach ($componentBilling as $keyBilling => $value) { if (preg_match(‘/-form/’, $keyBilling)) { //I have my own check function here for ‘contains’ unset($componentBilling[$keyBilling][‘children’][‘form-fields’][‘children’][‘company’]); } } } }`

sinharitu on Feb 21, 2017

Closing issue as the specific question seems to have been answered and we have the internal ticket to track the improvement to checkout extensibility.

pboisvert on May 20, 2016

@chicgeek That code works. My code was not working because of some item name line missing in the nesting.

jibrandlr on May 19, 2016