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.

  • Could this be implemented to move the estimated total field that is at the top of the page to just above the place order button? – user3313215 Nov 18 at 13:58
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.