Additional info after the checkout coupon code
In this blog, we are going to add an additional info after the checkout coupon code. First of all, we need to create a custom module. you can create a module using this blog Click Here.
This topic contains basic information about how you can add an extra field after the checkout coupon code in checkout page. In Magento , checkout is implemented using UI components. Let’s check it out how we can add an extra field after Apply discount code .You can customize each step by changing the JavaScript implementation or template for a component.
Step 1 : – Firstly create a module using this blog Click Here.
Step 2 :- After Creating the module , You need to create the following new file: <your_module_dir>/view/frontend/layout/checkout_index_index.xml.
Step 3 : – In this file Add the below code:
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. 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">
<head>
<script src="https://challenges.cloudflare.com/custom/v0/api.js" defer="defer" async="async" src_type="url"/>
</head>
<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="children" xsi:type="array">
<item name="couponcode-order-discount" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="children" xsi:type="array">
<item name="couponcode-order-custom" xsi:type="array">
<item name="component" xsi:type="string">Webkul_Custom/js/coupon/custom</item>
<item name="displayArea" xsi:type="string">captcha</item>
<item name="formId" xsi:type="string">couponcode-order-custom-request</item>
<item name="configSource" xsi:type="string">checkoutConfig</item>
<item name="customId" xsi:type="string">trunstile-checkout-coupon-apply</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Note : – the <Magento_Checkout_module_dir>/view/frontend/layout/
checkout_index_index.xml file, find the component that you want to customize. Copy that corresponding node and all parent nodes up to <argument>. There is no need to leave all the attributes and values of parent nodes, as you are not going to change them.
Step 4:- Change the js file, template or any other property as per your need
Step 5: – After this we need to create the following new file: <your_module_dir>/view/frontend/web/js/coupon/custom.js
Step 6: – Add the following code in this file
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
/* global grecaptcha */
define(
[
'uiComponent',
'jquery'
], function (Component, $) {
'use strict';
//add validation using additional valiator
return Component.extend({
defaults: {
template: 'Webkul_Custom/coupon/custom'
},
initialize: function () {
this._super();
},
});
});
Step 7: – In this above code, we define the template where you need to add your custom code as per your need.
Step 8 :- After this, we need to create the following new file: <your_module_dir>/view/frontend/web/template/coupon/custom.html and add the following code in this file
<b>You can apply coupon from here</b>
After completing all the steps it will look like this.
If you want to add Additional info on the Checkout Payment Page you can checkout our this blog click here
You can check it out the magento blog how you can Customize the view of a checkout step Click Here