diff --git a/common/images/ui_comps/discount_component.png b/common/images/ui_comps/discount_component.png new file mode 100644 index 00000000000..34cc185ccde Binary files /dev/null and b/common/images/ui_comps/discount_component.png differ diff --git a/guides/v2.2/howdoi/checkout/checkout_customize.md b/guides/v2.2/howdoi/checkout/checkout_customize.md index 8c6769af6e3..8eb72bf88f5 100755 --- a/guides/v2.2/howdoi/checkout/checkout_customize.md +++ b/guides/v2.2/howdoi/checkout/checkout_customize.md @@ -89,6 +89,57 @@ Any [UI component](https://glossary.magento.com/ui-component) is added in the `c 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`. +## Move a component + +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. + +The following example shows how to move the discount component to the order summary block, which will display on both shipping and billing steps. + +```xml + + + + + + + + + + + + + + Magento_SalesRule/js/view/payment/discount + + + 0 + Magento_SalesRule/js/view/payment/discount-messages + messages + + + + + + + + + + + + + + + +``` + +{:.bs-callout-info} +Remember to [disable](#disable) or [remove](#remove) the component from its original location, or they will conflict with each other. + +### Order Summary Result + +![Discount Component]({{ site.baseurl }}/common/images/ui_comps/discount_component.png) + ## Disable a component {#disable} To disable the component in your `checkout_index_index.xml` use the following instructions: @@ -114,5 +165,5 @@ return $jsLayout; If you want to use this sample in your code, replace the `%path_to_target_node%` placeholder with real value. -{: .bs-callout .bs-callout-info" } +{:.bs-callout .bs-callout-info} 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. \ No newline at end of file