How to display form on Checkout Page after Discount Form.

Here we will learn, How to add custom form on checkout page in Magento 2

1. Create a layout file: Webkul\CustomForm\view\frontend\layout\checkout_index_index.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">
                                        <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="afterMethods" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="creditamount" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Webkul_CustomForm/js/view/payment/customform</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Now, need to create Js file Webkul\CustomForm\view\frontend\web\js\view\payment\customform.js

define(
    [
        'jquery',
        'ko',
        'uiComponent',
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/model/totals',
        'Magento_Checkout/js/model/cart/totals-processor/default',
        'Magento_Catalog/js/price-utils',
    ],
    function (
        $, 
        ko, 
        Component, 
        quote, 
        totals, 
        defaultTotal, 
        priceUtils
        ) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Webkul_CustomForm/checkout/customform' //template file location
            },
            initialize: function () {
                this.isApplied = ko.observableArray(false);
                this._super();
            },
            /**
             * apply action
             */
            apply: function(value) {
                if (this.validate()) {
                    /* Apply Button action */
                }
            },
            /**
             * Cancel action
             */
            cancel: function() {
                /* Cancel Button action */
            },
            /**
             * form validation
             *
             * @returns {boolean}
             */
            validate: function() {
                var form = '#my-form';
                return $(form).validation() && $(form).validation('isValid');
            },
        });
    }
);

3. Now lets create template file: Webkul/CustomForm/view/frontend/web/template/checkout/customform.html

<div class="payment-option _collapsible opc-payment-additional discount-code"
     data-bind="mageInit: {'collapsible':{'openedState': '_active'}}">
    <div class="payment-option-title field choice" data-role="title">
        <span class="action action-toggle" id="block-discount-heading" role="heading" aria-level="2">
        <!-- ko i18n: 'Custom Form'--><!-- /ko -->
        </span>
    </div>
    <div class="payment-option-content" data-role="content">
        <!-- ko foreach: getRegion('messages') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <form class="form form-discount" id="my-form">
            <div class="payment-option-inner">
                <div class="field">
                    <div class="control">
                            <input class="input-text"
                               type="text"
                               id="my_input"
                               name="my_input"
                               data-bind="attr:{placeholder: $t('Enter Account Number')}"
                               data-validate="{required:true,'validate-number-range':true,'validate-number':true}"
                                />
                    </div>
                </div>
            </div>
            <div class="actions-toolbar">
                <div class="primary">
                    <!-- ko ifnot: isApplied() -->
                        <button class="action action-apply" type="submit" data-bind="'value': $t('Apply'), click: apply">
                            <span><!-- ko i18n: 'Apply Discount'--><!-- /ko --></span>
                        </button>
                    <!-- /ko -->
                </div>
                <div class="primary">
                    <!-- ko if: isApplied() -->
                        <button class="action action-cancel" type="submit" data-bind="'value': $t('Cancel'), click: cancel">
                            <span><!-- ko i18n: 'Cancel'--><!-- /ko --></span>
                        </button>
                    <!-- /ko -->
                </div>
            </div>
            
        </form>
    </div>
</div>

4. Now run : php bin/magento setup:static-content:deploy

That’s it.

Categories: Magento2

Mahesh Singh 22-February-2024

View Comments (2) Comment or Ask a Question

Quick Links