Customize the view of a checkout step
What's in this topic
Change the component’s .js implementation and template
To change the
.js implementation and template used for components rendering, you need to declare the new files in the checkout page layout. To do this, take the following steps:
- In your custom module directory, create the following new file:
<your_module_dir>/view/frontend/layout/checkout_index_index.xml. (For your checkout customization to be applied correctly, your custom module should depend on the Magento_Checkout module.)
- In this file, add the following:
<Magento_Checkout_module_dir>/view/frontend/layout/checkout_index_index.xmlfile, find the component that you need to customize. Copy the corresponding node and all parent nodes up to
<argument>. There is no need to leave all the attributes and values of parente nodes, as you are not going to change them.
Change the path to the component’s
.jsfile, template or any other property.
The Magento_Shipping module adds a component rendered as a link to the Shipping Policy info to the Shipping step:
<Magento_Shipping_module_dir>/view/frontend/layout/checkout_index_index.xml looks like following:
Add the new component to the checkout page layout
Any UI component is added in the
checkout_index_index.xml similar to the way a checkout step component is added.
Make sure that you declare a component so that it is rendered correctly by the parent component. If a parent component is a general UI component (referenced by the
uiComponent alias), its child components are rendered without any conditions. But if a parent component is a an extension of a general UI components, then children rendering might be restricted in certain way. For example a component can render only children from a certain
Disable a component
To disable the component in your
checkout_index_index.xml use the following instructions:
Remove a component
To remove a component from layout rendering, you need to create a plugin for the
\Magento\Checkout\Block\Checkout\LayoutProcessor::process method. In your plugin, implement the around method removing the corresponding layout nodes at run-time.
The following sample is an example of the around method removing a component:
(If you want to use this sample in your code, replace the
%path_to_target_node% placeholder with real value.)
Disable vs remove a component
If you disable a component, it is loaded but not rendered. If you remove a component, it is not loaded.