Magento – Magento-2 : How to move terms and condition from payment to custom step checkout

checkoutmagento2terms and conditions

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.

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.

Best Answer

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.

Related Solutions

Terms and Conditions on Checkout Page – Magento Guide

If you're new to Magento, this answer likely will not make sense. So either get an experienced Magento developer on this or start brushing up. With that, here's what you can try.

Prerequisites

Ensure that you have defined terms in Magento under Sales > Terms and conditions Ensure that you have terms enabled in System Configuration > Sales > Checkout > Checkout Options > Enable Terms and Conditions

And please note, these instructions may vary greatly depending on your version of Magento/checkout extension in use, and where you actually want to display the agreements. This will show you how to work it out on a stock CE installation.

How Agreements are Rendered

See app/design/frontend/base/default/layout/checkout.xml:

...
<checkout_onepage_review translate="label">
    ...
    <block type="checkout/agreements" name="checkout.onepage.agreements" as="agreements" template="checkout/onepage/agreements.phtml"/>
    ...
</checkout_onepage_review>
...

The middle line tells Magento that the layout on the review step will contain a checkout/agreements block named checkout.onepage.agreements. It also sets up the template there.

So when the checkout reaches the review step, this file comes into play.

app/design/frontend/base/default/template/checkout/onepage/review/info.phtml:

...
<div id="checkout-review-submit">
    <?php echo $this->getChildHtml('agreements') ?>
    <div class="buttons-set" id="review-buttons-container">
...

And that 2nd line is asking to render the block we defined in the layout XML above.

How to Require Agreements at Checkout Step 1

If you've followed me so far, then you can infer to start by moving/copying the layout XML block node (checkout.onepage.agreements) into another area (called a 'layout handle') of the same file. Find the layout handle checkout_onepage_index, and get to its child block named checkout.onepage.billing or whatever block you want to display the agreements. Extend it by adding that agreements XML, so that it looks like this:

...
<checkout_onepage_index translate="label">
    ...
    <block type="checkout/onepage_billing" name="checkout.onepage.billing" as="billing" template="checkout/onepage/billing.phtml">
        <block type="checkout/agreements" name="checkout.onepage.agreements" as="agreements" template="checkout/onepage/agreements.phtml"/>
    </block>
    ...
</checkout_onepage_index>
...

Now we're ready to call and render that block from within the billing step's template. Open that up, get to the place where you want the agreements to appear, and add this line:

<?php echo $this->getChildHtml('agreements') ?>

If you clear your cache and get to the checkout, you should see the agreements appear. That handles rendering, now we have to tie that into validation.

How to Validate Agreements

Because this is normally done at the end of the checkout, we can figure out how it works by examing the checkout's main controller:

app/code/core/Mage/Checkout/controllers/OnepageController.php::saveOrderAction:

public function saveOrderAction()
{
    ...
    if ($requiredAgreements = Mage::helper('checkout')->getRequiredAgreementIds()) {
        $postedAgreements = array_keys($this->getRequest()->getPost('agreement', array()));
        if ($diff = array_diff($requiredAgreements, $postedAgreements)) {
            $result['success'] = false;
            $result['error'] = true;
            $result['error_messages'] = $this->__('Please agree to all the terms and conditions before placing the order.');
            $this->getResponse()->setBody(Mage::helper('core')->jsonEncode($result));
            return;
        }
    }
    ...

You will essentially copy this condition into the top of the saveBillingAction method, like so:

...
public function saveBillingAction()
{
    ...
    if ($this->getRequest()->isPost()) {

        if ($requiredAgreements = Mage::helper('checkout')->getRequiredAgreementIds()) {
            $postedAgreements = array_keys($this->getRequest()->getPost('agreement', array()));
            if ($diff = array_diff($requiredAgreements, $postedAgreements)) {
                $result['success'] = false;
                $result['error'] = true;
                $result['message'] = $this->__('Please agree to all the terms and conditions before placing the order.');
                $this->getResponse()->setBody(Mage::helper('core')->jsonEncode($result));
                return;
            }
        } 
    ...

Notice a key difference here. The $result['error_messages'] was changed to $result['message']. This is done because, unfortunately for the stock checkout, its JavaScript is inconsistent in implementation. So while the order review step will check for error_messages, the billing step looks for messages on the result.

Now that you've displayed your agreements, and wired them up to the controller, you should be able to test this step out. If you don't check the agreements, and continue to the next step, you would get an alert box that says, "Please agree to all the terms and conditions before placing the order."

A long-winded answer, but also very necessary if you have no idea where to begin. Hopefully this helps.

Magento 2 – How to Rewrite TierPrice Block

Suppose package:Learning and module: Custom

Module.xml looks like

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Learning_Custom" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>

And then create a layout xml following path -> app/code/Learning/Custom/view/frontend/layout/catalog_product_prices.xml

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/layout_generic.xsd">
    <referenceBlock name="render.product.prices">
        <arguments>
            <argument name="default" xsi:type="array">
                <item name="prices" xsi:type="array">
                    <item name="tier_price" xsi:type="array">
                        <item name="render_template" xsi:type="string">Learning_Custom::product/price/tier_prices.phtml
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</layout>

Create template inside your module or copy base template file inside your module path should be -> app/code/Learning/Custom/view/frontend/templates/product/price/tier_prices.phtml

Best Answer

Related Solutions

Terms and Conditions on Checkout Page – Magento Guide

Magento 2 – How to Rewrite TierPrice Block

Related Topic