How to Add A custom Field to Checkout and Saving it to Backend in Magento2?

  • author-img Nidhi Arora
  • 6 years
Add A custom Field to Checkout and Saving it to Backend in Magento2

PHP code that inserts additional field in LayoutProcessor >>

$customAttributeCode = ‘custom_field’;
$customField = [
‘component’ => ‘Magento_Ui/js/form/element/abstract’,
‘config’ => [
// customScope is used to group elements within a single form (e.g. they can be validated separately)
‘customScope’ => ‘shippingAddress.custom_attributes’,
‘customEntry’ => null,
‘template’ => ‘ui/form/field’,
‘elementTmpl’ => ‘ui/form/element/input’,
‘tooltip’ => [
‘description’ => ‘Yes, this works. I tested it. Sacrificed my lunch break but verified this approach.’,
],
],
‘dataScope’ => ‘shippingAddress.custom_attributes’ . ‘.’ . $customAttributeCode,
‘label’ => ‘Custom Attribute’,
‘provider’ => ‘checkoutProvider’,
‘sortOrder’ => 0,
‘validation’ => [
‘required-entry’ => true
],
‘options’ => [],
‘filterBy’ => null,
‘customEntry’ => null,
‘visible’ => true,
];
$jsLayout[‘components’][‘checkout’][‘children’][‘steps’][‘children’][‘shipping-step’][‘children’][‘shippingAddress’][‘children’]
[‘shipping-address-fieldset’][‘children’][$customAttributeCode] = $customField;

Add mixin to change the behavior of ‘Magento_Checkout/js/action/set-shipping-information’ which is responsible for data submission between shipping and billing checkout steps

Step 1. Create your_module_name/view/frontend/requirejs-config.js

var config = {
config: {
mixins: {
‘Magento_Checkout/js/action/set-shipping-information’: {
‘/js/action/set-shipping-information-mixin’: true
}
}
}
};

Step 2. Create your_module_name/js/action/set-shipping-information-mixin.js

/**
* @author aakimov
*/
define([
‘jquery’,
‘mage/utils/wrapper’,
‘Magento_Checkout/js/model/quote’
], function ($, wrapper, quote) {
‘use strict’;
return function (setShippingInformationAction) {
return wrapper.wrap(setShippingInformationAction, function (originalAction) {
var shippingAddress = quote.shippingAddress();
if (shippingAddress[‘extension_attributes’] === undefined) {
shippingAddress[‘extension_attributes’] = {};
}
shippingAddress[‘extension_attributes’][‘custom_field’] = shippingAddress.customAttributes[‘custom_field’];
// pass functionality to original action (‘Magento_Checkout/js/action/set-shipping-information’)
return originalAction();
});
};
});

Step 3. Create your_module_name/etc/extension_attributes.xml

To access your data on backend you can use:

$value = $address->getExtensionAttributes()->getCustomField();

If you still have any query regarding this “How to” or would like to add some suggestions to this solution, let us know your feedback or query at sales@envisionecommerce.com, and don’t forget to share this “How to” blog with your fellow Magento 2 users!

Download Blog

ENQUIRY

Ready to Get Started

Communication is the key for us to understand each other. Allow us to understand
your requirements or queries. Present us with an opportunity to serve you.

Fill out the form and out team will get back to you
within 24 hours

    Head Office

    815 Brazos St STE 500, Austin,
    TX 78701, USA