How to Add A custom Field to Checkout and Saving it to Backend in Magento2?
Nidhi Arora
- 4 years
- 232 views

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 [email protected], and don’t forget to share this “How to” blog with your fellow Magento 2 users!