2

I would like to move the afterMethods xml item which contains the Discount Code and Gift Card code under the billing-step in the module-checkout/view/frontend/web/checkout_index_index.xml, so that it is displayed before the Place Order Button on checkout page.

Basically I want to have the Place order Button as the last component on the page.

3

I have modified the above answer to make it more easy to learn.

app/design/frontend/Vendor/themename/Magento_Checkout/layout/checkout_index_index.xml

Use the below code

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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">
                                        <item name="billing-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="afterMethods" xsi:type="array">
                                                            <item name="config" xsi:type="array">
                                                                <item name="componentDisabled" xsi:type="boolean">true</item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>         
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

and for the second file

app/design/frontend/Vendor/themename/Magento_SalesRule/layout/checkout_index_index.xml

use the below code

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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">
                                        <item name="billing-step" xsi:type="array">
                                            <item name="component" xsi:type="string">uiComponent</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="sortOrder" xsi:type="string">0</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>
  • Worked for me too – Vivek Khandelwal Jun 13 '18 at 11:08
  • After doing this the sales rule discount code form is displaying on the shipping step. What's the best way to get rid of it there? – Cypher909 Mar 3 at 0:10
1

First of all I needed to disable the afterMethods component from billing step. To do so I added this code in app/design/frontend/Vendor/themename/Magento_Checkout/layout/checkout_index_index.xml under checkout > children node.

    <item name="steps" xsi:type="array">
        <item name="children" xsi:type="array">
            <item name="billing-step" xsi:type="array">
                <item name="children" xsi:type="array">
                    <item name="payment" xsi:type="array">
                        <item name="children" xsi:type="array">
                            <item name="afterMethods" xsi:type="array">
                                <item name="config" xsi:type="array">
                                    <item name="componentDisabled" xsi:type="boolean">true</item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
        </item>         
    </item>
</item>

Then in the app/design/frontend/Vendor/themename/Magento_SalesRule/layout/checkout_index_index.xml file update the code to set the discount node as child of before-place-order node.

<item name="billing-step" xsi:type="array">
    <item name="component" xsi:type="string">uiComponent</item>
    <item name="children" xsi:type="array">
        <item name="payment" xsi:type="array">
            <item name="children" xsi:type="array">
                <item name="payments-list" xsi:type="array">
                    <item name="children" xsi:type="array">
                        <item name="before-place-order" 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="sortOrder" xsi:type="string">0</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>
</item>

Same thing can be done for gift card.

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.