0

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());
},


});
});

2 Answers 2

1

Go to below file where you can find class field-name-firstname and field-name-lastname comment code.

vendor\magento\module-customer\view\frontend\templates\widget\name.phtml

After you override your theme.

And second way is hide using css.

THANKS.

2

app/code/VendorName/ModuleName/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="VendorName_ModuleName" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Checkout" />
        </sequence>
    </module>
</config>

app/code/VendorName/ModuleName/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="vendorname_checkout_layout_processor" type="VendorName\ModuleName\Plugin\Magento\Checkout\Block\Checkout\LayoutProcessor" sortOrder="10"/>
    </type>
</config>

app/code/VendorModule/ModuleName/Magento/Checkout/Block/Checkout/LayoutProcessor.php

<?php
namespace VendorName\ModuleName\Plugin\Magento\Checkout\Block\Checkout;

class LayoutProcessor
{
    /**
     * Process js Layout of block
     *
     * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
     * @param array $jsLayout
     * @return array
     */
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array $jsLayout
    ) {
        $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;

        return $jsLayout;
    }
}
6
  • This should work, but not working for me
    – GenZ Dev
    Aug 21, 2020 at 6:38
  • Are you facing any error?
    – Pratik Oza
    Aug 21, 2020 at 6:43
  • No, but the fields are not hiding. I already have a LayoutProcessor and I added your code in it. I have edited the answer
    – GenZ Dev
    Aug 21, 2020 at 6:46
  • Run these command: 1) php bin/magento setup:static-content:deploy -f 2)php bin/magento cache:flush and check again OR create separate module with above code because as I've checked, it is working in default Magento setup.
    – Pratik Oza
    Aug 21, 2020 at 6:55
  • Temporarily disable your module & revert JS changes. Create a new module with above code and check again.
    – Pratik Oza
    Aug 21, 2020 at 7:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.