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
Zaylril
All 16 comments
The GitHub issue tracker is intended for technical issues only. Please refer to the Community Forums or Magento Stack Exchange site for technical questions. In your case, the programming questions forum is likely the most appropriate. Feel free to reopen this issue if you think you have encountered a bug in Magento 2.
benmarks
on 11 Feb 2016
Ok, let me rephrase the question. It is not possible to extend or remove a checkout component.
Zaylril
on 11 Feb 2016
I've also encountered this issue. We've been resigned to overriding checkout scripts instead of properly extending them. This has been a major pain for upgrades.
Documentation for extending other scripts is so clear - can we get some instruction or a fix to allow extension of checkout scripts?
chicgeek
on 15 Feb 2016
@Zaylril @chicgeek Thank you for reporting this issue, we have created an internal ticket MAGETWO-49971 to improve Checkout components extensibility and to provide clear documentation on this topic.
@Zaylril Meanwhile you may try to disable the component you wish to remove by adding the following configuration item :
<item name="config" xsi:type="array">
<item name="componentDisabled" xsi:type="boolean">true</item>
</item>
I guess this would not solve the issue completely but may be helpful.
ishakhsuvarov
on 1 Mar 2016
@ishakhsuvarov I tried to disable the "company" field from checkout using the code you provided but does not work. I added that code to /mytheme/Magento_checkout/layout/checkout_index_index.xml
lgarridoj
on 18 May 2016
@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 That code works. My code was not working because of some item name line missing in the nesting.
lgarridoj
on 19 May 2016
@lgarridoj Great. Especially with this godawful nesting, I thought the entire context would be helpful.
Glad I could help!
chicgeek
on 20 May 2016
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 20 May 2016
The main question was about extending a component.
Removing a component was merely collateral.
chicgeek
on 20 May 2016
My question here: it works ok for shipping address, but how can the same be done for billing address, in the next step? In the payment step, when you uncheck the checkbox 'billing address is the same as shipping address' and add a new address, the company field is still available! Any suggestions?
sinharitu
on 9 Jan 2017
@sinharitu : Should be the same method, but with shippingAddress and shipping-step updated appropriately. Check the core XML to make sure you have the correct ids for this.
chicgeek
on 9 Jan 2017
Tried but did not work. So, was wondering if there is anything specific about this!
sinharitu
on 9 Jan 2017
@sinharitu @chicgeek did anyone got to remove company field from billing address, this method is only working for shipping. Thanks in advance.
dazuaz
on 20 Feb 2017
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:
`
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 21 Feb 2017
@chicgeek componentDisabled is not working. In your case, you just remove the component.
I have used this, But it,s not working:
<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">
<!-- The name of the form the field belongs to -->
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<!--Remove fields-->
<item name="city" 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>
digvijay2017
on 20 Jun 2018
Related issues
algostore
路
3Comments
BenSpace48
路
3Comments
spyrule
路
3Comments
fvillata
路
3Comments
punkstar
路
3Comments
Most helpful comment
@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