1

Magento-2 is displaying terms and condition on payment step. but I want to move it from payment step to my custom review step.

How can I display it on custom step?

See my reference screen shots.

Currently showing on payment step

I want to display like this on my custom step

Custom step checkout_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="checkout_cart_item_renderers"/>
    <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">ThinkIdeas_Checkoutsteps/js/view/my-step-view</item>
                                            <!--To display step content before shipping step "sortOrder" value should be < 1-->
                                            <!--To display step content between shipping step and payment step  1 < "sortOrder" < 2 -->
                                            <!--To display step content after payment step "sortOrder" > 2 -->
                                            <item name="sortOrder" xsi:type="string">3</item>
                                            <item name="children" xsi:type="array">
                                                <!--add here child component declaration for your step-->
                                                <item name="review-payment-method" xsi:type="array">
                                                    <item name="component" xsi:type="string">ThinkIdeas_Checkoutsteps/js/view/payment-information</item>
                                                    <item name="displayArea" xsi:type="string">review-payment-method</item>
                                                </item>

                                                <item name="review-shipping-address" xsi:type="array">
                                                    <item name="component" xsi:type="string">ThinkIdeas_Checkoutsteps/js/view/shipping-information</item>
                                                    <item name="displayArea" xsi:type="string">review-shipping-address</item>
                                                    <item name="children" xsi:type="array">
                                                        <item name="ship-to" xsi:type="array">
                                                            <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-information/list</item>
                                                            <item name="displayArea" xsi:type="string">ship-to</item>
                                                        </item>
                                                    </item>
                                                </item>

                                                <item name="review-billing-address" xsi:type="array">
                                                    <item name="component" xsi:type="string">ThinkIdeas_Checkoutsteps/js/view/billing-information</item>
                                                    <item name="displayArea" xsi:type="string">review-billing-address</item>
                                                    <item name="children" xsi:type="array">
                                                        <item name="bill-to" xsi:type="array">
                                                            <item name="component" xsi:type="string">ThinkIdeas_Checkoutsteps/js/view/billing-information/list</item>
                                                            <item name="displayArea" xsi:type="string">bill-to</item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Default file :

vendor/magento/module-checkout-agreements/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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="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="agreements" xsi:type="array">
                                                                            <item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/checkout-agreements</item>
                                                                            <item name="sortOrder" xsi:type="string">100</item>
                                                                            <item name="displayArea" xsi:type="string">before-place-order</item>
                                                                            <item name="dataScope" xsi:type="string">checkoutAgreements</item>
                                                                            <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                        <item name="additional-payment-validators" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="agreements-validator" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/agreement-validation</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Used by this code terms and condition is display but validation not working.

  • Hey, I am trying the same, did you find a solution to it? – Twinkal Aug 4 '17 at 5:14
  • Not getting any solution so I skipped this. You can apply below answer solution may be it will help you. – Suresh Chikani Aug 4 '17 at 5:16
1

You need to override this layout file:

vendor/magento/module-checkout-agreements/view/frontend/layout/checkout_index_index.xml

and change before-place-order node to your custom step node.

<item name="before-place-order" xsi:type="array">
    <item name="children" xsi:type="array">
        <item name="agreements" xsi:type="array">
            <item name="component" xsi:type="string">Magento_CheckoutAgreements/js/view/checkout-agreements</item>
            <item name="sortOrder" xsi:type="string">0</item>
            <item name="displayArea" xsi:type="string">before-place-order</item>
            <item name="dataScope" xsi:type="string">checkoutAgreements</item>
            <item name="provider" xsi:type="string">checkoutProvider</item>
        </item>
    </item>
</item>

You will also need to make changes in the html file where this code is written:

<!-- ko foreach: $parent.getRegion('before-place-order') -->
   <!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->

and change before-place-order to your custom step node.

  • I know that but how can I display in my custom step? – Suresh Chikani May 17 '17 at 11:57
  • see my updated answer – Sejal Shah May 17 '17 at 11:59
  • @SHPatel change <item name="displayArea">Your Cstom Step Area</item> – Prince Patel May 17 '17 at 12:24
  • @SejalShah see my updated question. – Suresh Chikani May 17 '17 at 13:04
  • I dont see the "Magento_CheckoutAgreements/js/view/checkout-agreements" node in your layout file. – Sejal Shah May 17 '17 at 13:38

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.