Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Commit bbf80a0

Browse files
jeff-matthewsjeff-matthews
authored
Merge pull request #5225 from eduard13/patch-customize-checkout-view
Adding and additional section of how to move a checkout component
2 parents f9abc7b + d10c349 commit bbf80a0

File tree

2 files changed

+52
-1
lines changed

2 files changed

+52
-1
lines changed

‎common/images/ui_comps/discount_component.png

28.9 KB
Loading

‎guides/v2.2/howdoi/checkout/checkout_customize.md

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,57 @@ Any [UI component](https://glossary.magento.com/ui-component) is added in the `c
8989

9090
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 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 `displayArea`.
9191

92+
## Move a component
93+
94+
To move any component on your checkout page, find the component (parent) where it needs to be placed, and paste your component as a child of the parent.
95+
96+
The following example shows how to move the discount component to the order summary block, which will display on both shipping and billing steps.
97+
98+
```xml
99+
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
100+
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
101+
<body>
102+
<referenceBlock name="checkout.root">
103+
<arguments>
104+
<argument name="jsLayout" xsi:type="array">
105+
<item name="components" xsi:type="array">
106+
<item name="checkout" xsi:type="array">
107+
<item name="children" xsi:type="array">
108+
<item name="sidebar" xsi:type="array">
109+
<item name="children" xsi:type="array">
110+
<item name="summary" xsi:type="array">
111+
<item name="children" xsi:type="array">
112+
<item name="summary-discount" xsi:type="array">
113+
<item name="component" xsi:type="string">Magento_SalesRule/js/view/payment/discount</item>
114+
<item name="children" xsi:type="array">
115+
<item name="errors" xsi:type="array">
116+
<item name="sortOrder" xsi:type="string">0</item>
117+
<item name="component" xsi:type="string">Magento_SalesRule/js/view/payment/discount-messages</item>
118+
<item name="displayArea" xsi:type="string">messages</item>
119+
</item>
120+
</item>
121+
</item>
122+
</item>
123+
</item>
124+
</item>
125+
</item>
126+
</item>
127+
</item>
128+
</item>
129+
</argument>
130+
</arguments>
131+
</referenceBlock>
132+
</body>
133+
</page>
134+
```
135+
136+
{:.bs-callout-info}
137+
Remember to [disable](#disable) or [remove](#remove) the component from its original location, or they will conflict with each other.
138+
139+
### Order Summary Result
140+
141+
![Discount Component]({{ site.baseurl }}/common/images/ui_comps/discount_component.png)
142+
92143
## Disable a component {#disable}
93144

94145
To disable the component in your `checkout_index_index.xml` use the following instructions:
@@ -114,5 +165,5 @@ return $jsLayout;
114165

115166
If you want to use this sample in your code, replace the `%path_to_target_node%` placeholder with real value.
116167

117-
{: .bs-callout .bs-callout-info" }
168+
{:.bs-callout .bs-callout-info}
118169
Disable vs remove a component: If you disable a component, it is loaded but not rendered. If you remove a component, it is removed and not loaded.

0 commit comments

Comments
 (0)