1

I want to move apply coupon to Custom created Tab in Magento 2 in Checkout.

I want to add " apply coupon " on Summery Page.

I have added this code in my checkout_index_index.xml

<item name="children" xsi:type="array">
  <item name="summary" xsi:type="array">
    <item name="children" xsi:type="array">
      <item name="discount" xsi:type="array">
         <item name="component" 
xsi:type="string">Magento_SalesRule/js/view/payment/discount</item>
         <item name="children" xsi:type="array">
         <item name="errors" xsi:type="array">
         <item name="sortOrder" xsi:type="string">0</item>
         <item name="component" 
xsi:type="string">Magento_SalesRule/js/view/payment/discount-messages</item>
         <item name="displayArea" xsi:type="string">messages</item>
        </item>
       </item>
      </item>
     </item>
   </item>
</item>

As, you can see discount code is in between Summary code but it doesn't show me the coupon code. Is there I am missing something?

0
1

You need to add displayArea for the child component. Like:

<item name="displayArea" xsi:type="string">summary</item>

Here is the sample XML:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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">
                                        <!-- The new step you add -->
                                        <item name="my-new-step" xsi:type="array">
                                            <item name="component" xsi:type="string">SR_MagentoCommunity/js/view/custom-step</item>
                                            <item name="sortOrder" xsi:type="string">2</item>
                                            <item name="children" xsi:type="array">
                                                <item name="discount" xsi:type="array">
                                                    <item name="component"
                                                          xsi:type="string">Magento_SalesRule/js/view/payment/discount</item>
                                                    <item name="displayArea" xsi:type="string">summary</item>
                                                    <item name="children" xsi:type="array">
                                                        <item name="errors" xsi:type="array">
                                                            <item name="sortOrder" xsi:type="string">0</item>
                                                            <item name="component"
                                                                  xsi:type="string">Magento_SalesRule/js/view/payment/discount-messages</item>
                                                            <item name="displayArea" xsi:type="string">messages</item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Now you need to add following code in your HTML:

<each args="getRegion('summary')" render="" />

Sample step HTML code:

<li id="custom_step" data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: 'Custom Step Title'" data-role="title"></div>
    <div id="checkout-step-title"
         class="step-content"
         data-role="content">

        <form data-bind="submit: navigateToNextStep" id="custom-step-form">
            <each args="getRegion('summary')" render="" />
            <input type="checkbox" name="usercheckbox" id="usercheckbox" data-validate="{required:true}"><!-- ko i18n: 'Accept Terms and Condition'--><!-- /ko -->
            <div class="actions-toolbar">
                <div class="primary">
                    <button data-role="opc-continue" type="submit" class="button action continue primary">
                        <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>
1
  • You saved me man i have been searching for this for a week but didn't find any solution. It works very well. Will you please tell me the meaning of <each args="getRegion('summary')" render="" /> and Thanks for the help @Sohel – Prits Aug 7 '20 at 7:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.