1. Create or Edit di.xml
/app/code/CustomVendor/CustomModule/etc/frontend/di.xml
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\Checkout\Block\Checkout\LayoutProcessor"> <plugin name="checkout_custom_fields" type="CustomVendor\CustomModule\Plugin\Checkout\Model\LayoutProcessor" sortOrder="1"/> </type> </config>
2. Add the LayoutProcessor.php app/code/CustomVendor/CustomModule/Plugin/Checkout/Model/LayoutProcessor.php
/** * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject * @param array $jsLayout * @return array */ public function afterProcess( \Magento\Checkout\Block\Checkout\LayoutProcessor $subject, array $jsLayout ) { $shippingConfiguration = &$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step'] ['children']['shippingAddress']['children']['shipping-address-fieldset']['children']; $shippingConfiguration = $this->setFullName($shippingConfiguration); return $jsLayout; } /** * Set "Full Name" * @param array $shippingConfiguration * @return array */ private function setFullName(array $shippingConfiguration){ $shippingConfiguration['full_name'] = [ 'component' => 'AdditionalProducts_AdditionalProductsModule/js/checkout/abstract', 'config' => [ 'customScope' => 'shippingAddress', 'template' => 'ui/form/field', 'elementTmpl' => 'ui/form/element/input', 'options' => [], 'id' => 'full-name' ], 'dataScope' => 'shippingAddress.full_name', 'label' => __('Full Name'), 'provider' => 'checkoutProvider', 'visible' => true, 'validation' => [ 'required-entry' => true ], 'sortOrder' => 0, 'id' => 'full-name', ]; $shippingConfiguration = $this->makeTrackableFirstLastName($shippingConfiguration); return $shippingConfiguration; } /** * Track firstName and lastName * @param array $shippingConfiguration * @return array */ private function makeTrackableFirstLastName(array $shippingConfiguration){ $shippingConfiguration['firstname']['tracks']['value'] = true; $shippingConfiguration['lastname']['tracks']['value'] = true; return $shippingConfiguration; }
3. Add abastract.js
app/code/CustomVendor/CustomModule//view/frontend/web/js/checkout/abstract.js
define([ 'Magento_Ui/js/form/element/abstract', 'mage/translate' ], function (AbstractField, $t) { 'use strict'; return AbstractField.extend({ defaults: { modules: { firstname: '${ $.parentName }.firstname', lastname: '${ $.parentName }.lastname', } }, hasChanged: function () { this._super(); this.setFirstLastNameFromFullName(); }, /** * Extract from the 'Full Name' the 'First' and 'Last' Name */ setFirstLastNameFromFullName : function(){ var fullValue = this.value(); var lastSpacePos = fullValue.lastIndexOf(" "); var nameLimit = 10; var lastNameLimit = 10; if (lastSpacePos > 0) { // Ignore values with no space character if(fullValue.substring(0, lastSpacePos).length < nameLimit){ // Update "firstName" this.firstname().value(fullValue.substring(0, lastSpacePos)); } if(fullValue.substring(lastSpacePos + 1).length < lastNameLimit){ // Update "lastName" this.lastname().value(fullValue.substring(lastSpacePos + 1)); } }else{ if(fullValue.length < nameLimit){ // Update "firstName" this.firstname().value(fullValue); } } }, }); });
More Info see in here.