How to hide First Name and Last Name fields on checkout page. I only want to hide the fields and not disable them as I am filling those fields via custom js from a different field. I am not able to find those fields on checkout_index_index.xml
I tried using LayoutProcessor but not working:
class LayoutProcessor{
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'];
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['shipping-address-fieldset']['children']['firstname']['visible'] = 0;
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['shipping-address-fieldset']['children']['lastname']['visible'] = 0;
$shippingConfiguration = $this->setFullName($shippingConfiguration);
return $jsLayout;
}
/**
* Set "Full Name"
* @param array $shippingConfiguration
* @return array
*/
private function setFullName(array $shippingConfiguration){
$shippingConfiguration['full_name'] = [
'component' => 'MonotaroIndonesia_CheckoutFullName/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;
}
private function makeTrackableFirstLastName(array $shippingConfiguration){
$shippingConfiguration['firstname']['tracks']['value'] = true;
$shippingConfiguration['lastname']['tracks']['value'] = true;
return $shippingConfiguration;
}
}
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 the 'First' and 'Last' Name from the 'Full Name'
*/
setFirstLastNameFromFullName : function(){
var fullValue = this.value().trim();
var firstSpacePos = fullValue.indexOf(' ');
if(firstSpacePos!=-1){
//this means user has entered a space
var first_name = fullValue.substring(0, firstSpacePos).trim();
var last_name = fullValue.substring(firstSpacePos).trim();
this.firstname().value(first_name);
this.lastname().value(last_name);
}
else{
//this means user has entered a single word
this.firstname().value(fullValue);
this.lastname().value(fullValue);
}
console.log('firstname: '+this.firstname().value());
console.log('lastname: '+this.lastname().value());
},
});
});
