Today, we will see how we can add custom data at checkout .
We will also save this data in orders using extension attribute.
To begin with, we will first have to create a text area or text field at checkout page from where we will take input from customer who is placing the order. For this we will have to override this file checkout_index_index.xml.
<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="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAdditional" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="displayArea" xsi:type="string">shippingAdditional</item>
<item name="children" xsi:type="array">
<item name="additional_block" xsi:type="array">
<item name="component" xsi:type="string">Webkul_CheckoutCustomization/js/view/checkout/shipping-instruction</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>Now, we will have to add the js component file which will load our custom js at checkout page.
define(
[
"uiComponent",
'ko'
],
function(
Component,
ko
) {
'use strict';
return Component.extend({
defaults: {
template: 'Webkul_CheckoutCustomization/optioninstruction'
},
initialize: function () {
this._super();
},
isDisplayOption: function () {
return true;
}
});
}
);In this file we have initialized the html template.
Here we can add the input field where user will enter the optional data.
<!-- ko if: isDisplayOption() -->
<div class="wk-ship-ins">
<label data-bind="i18n: 'Order Instructions (Optional)'"></label>
<textarea name="wk_shipping_ins" style="margin-top:2%" placeholder="Enter your requirement here..."></textarea>
</div>
<!-- /ko -->To view changes we need to flush cache and the option will be visible in the checkout page.
Once the text area has been added at shipping page, we also need to save this value in database for which we will add new field in database using db_schema file.
You need to add this file in directory Vendor_ModuleName/etc/
<?xml version="1.0"?>
<!--
/**
* Webkul Software.
*
* @category Webkul
* @package Webkul_CheckoutCustomization
* @author Webkul
* @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/
-->
<schema xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Setup/Declaration/Schema/etc/schema.xsd">
<table name="quote" resource="sales" comment="quote table">
<column xsi:type="varchar" name="wk_shipping_ins" length="255" comment="shipping instruction"/>
</table>
<table name="sales_order" resource="sales" comment="sales order table">
<column xsi:type="varchar" name="wk_shipping_ins" length="255" comment="shipping instruction"/>
</table>
</schema>
Execute command php bin/magento setup:up for updating the database. I have added fields in quote and order table as per my requirement .
Next you need to create extension attribute file, if yyou want to learn more about extension attribute you can check it in devdocs https://devdocs.magento.com/guides/v2.4/extension-dev-guide/attributes.html
For extension attribute I have added file in Module/etc/extension_attributes.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Api/etc/extension_attributes.xsd">
<extension_attributes for="Magento\Checkout\Api\Data\ShippingInformationInterface">
<attribute code="wk_shipping_ins" type="string"/>
</extension_attributes>
</config>Now you need to add the extension attribute within payload for which we will create a mixin.
We will create requirejs-config.js file in Vendor_Module/view/frontend/requirejs-config.js
/**
* Webkul Software
*
* @category Webkul
* @package Webkul_CheckoutCustomization
* @author Webkul
* @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/
var config = {
map: {
'*': {
showIns: 'Webkul_CheckoutCustomization/js/showins.js',
}
},
config: {
mixins: {
'Magento_Checkout/js/model/shipping-save-processor/payload-extender': {
'Webkul_CheckoutCustomization/js/model/shipping-save-processor/payload-extender-mixin': true
}
}
}
};
Finally, we will add the payload-extender file to add value to extension attribute.
/**
* Webkul Software
*
* @category Webkul
* @package Webkul_CheckoutCustomization
* @author Webkul
* @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/
define(['jquery', 'underscore', 'mage/utils/wrapper'], function ($, _, wrapper) {
'use strict';
return function (payloadExtender) {
return wrapper.wrap(payloadExtender, function (originalPayloadExtender, payload) {
originalPayloadExtender(payload);
_.extend(payload.addressInformation.extension_attributes,
{
'wk_shipping_ins': $('[name="wk_shipping_ins"]').val()
}
);
});
};
});
That’s it. Now all you need to do is execute deploy command.