How to move apply coupon to Tab in Magento 2 in Checkout?

magento.stackexchange https://magento.stackexchange.com/questions/319293

Question

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?

Was it helpful?

Solution

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top