Additional info on the Checkout Payment Page
In this blog, we are going to add an additional info to the checkout payment page. 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 to customize the view of an existing checkout payment page. In the Magento [...]
BlackHat
In this blog, we are going to add an additional info to the checkout payment page. 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 to customize the view of an existing checkout payment page. In the Magento application, checkout is implemented using UI components. You can customize each step by changing the JavaScript implementation or template for a component
Step 1:- After the module creation In your custom module directory, create the following new file:Â
Step 2:- In this file, add the following:
- uiComponent
- beforeMethods
- Webkul_Custom/js/custom
- place-order-custom
- checkoutConfig
In the checkout page, we added a component Webkul_Custom/js/custom, add a displayArea, and the configSource.
Change the path to the component’s .js file, template, or any other property as per your need.
Make sure that you declare a component so that it is rendered correctly by the parent component. If a parent component is a general UI component (referenced by the uiComponent alias), its child components are rendered without any conditions. But if a parent component is an extension of a general UI components, then children rendering might be restricted in certain way. For example a component can render only children from a certain displayArea.
Step 3:- After this we need to create the following new file:Â
Step 4:- In this file, add the following:
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define(
[
'uiComponent',
'jquery',
], function (Component, $) {
'use strict';
return Component.extend({
defaults: {
template: 'Webkul_Custom/custom',
},
initialize: function () {
this._super();
},
});
});
In this above code, we define the template where you need to add your custom code as per your need.
this is custom text
It will look like this.
