Php – Add Customer Custom Attribute to front store

Thank to Charmi Patel, I found the answer here. I'll summarize it:

1. Create customer attribute on below path VendorModuleSetupPatchDataAddCustomerMobileAttribute.php

<?php

namespace VendorModuleSetupPatchData;

use MagentoCustomerModelCustomer;
use MagentoCustomerModelResourceModelAttribute;
use MagentoEavModelConfig;
use MagentoEavSetupEavSetupFactory;
use MagentoFrameworkSetupModuleDataSetupInterface;
use MagentoFrameworkSetupPatchDataPatchInterface;
use MagentoFrameworkSetupPatchPatchRevertableInterface;
use PsrLogLoggerInterface;

/**
 * Create Customer Attribute
 */
class AddCustomerMobileAttribute implements DataPatchInterface, PatchRevertableInterface
{
    /**
     * @var ModuleDataSetupInterface
     */
    private $moduleDataSetup;

    /**
     * @var EavSetupFactory
     */
    private $eavSetupFactory;

    /**
     * @var LoggerInterface
     */
    private $logger;

    /**
     * @var Config
     */
    private $eavConfig;

    /**
     * @var Attribute
     */
    private $attributeResource;

    /**
     * CustomerAttribute Constructor
     *
     * @param EavSetupFactory $eavSetupFactory
     * @param Config $eavConfig
     * @param LoggerInterface $logger
     * @param Attribute $attributeResource
     * @param ModuleDataSetupInterface $moduleDataSetup
     */
    public function __construct(
        EavSetupFactory                                   $eavSetupFactory,
        Config                                            $eavConfig,
        LoggerInterface                                   $logger,
        Attribute                                         $attributeResource,
        ModuleDataSetupInterface                          $moduleDataSetup
    ) {
        $this->eavSetupFactory = $eavSetupFactory;
        $this->eavConfig = $eavConfig;
        $this->logger = $logger;
        $this->attributeResource = $attributeResource;
        $this->moduleDataSetup = $moduleDataSetup;
    }

    /**
     * @inheritdoc
     */
    public function apply()
    {
        $this->moduleDataSetup->getConnection()->startSetup();
        $this->addOnlineStoreAttribute();
        $this->moduleDataSetup->getConnection()->endSetup();
    }

    /**
     * @throws MagentoFrameworkExceptionAlreadyExistsException
     * @throws MagentoFrameworkExceptionLocalizedException
     * @throws Zend_Validate_Exception
     */
    public function addOnlineStoreAttribute()
    {
        $eavSetup = $this->eavSetupFactory->create();
        $eavSetup->addAttribute(
            Customer::ENTITY,
            'phone_number',
            [
                'type' => 'varchar',
                'label' => 'Online Stores',
                'input' => 'text',
                'required' => true,
                'visible' => true,
                'user_defined' => true,
                'system' => false,
                'is_visible_in_grid' => true,
                'is_used_in_grid' => true,
                'is_filterable_in_grid' => true,
                'is_searchable_in_grid' => true,
                'position' => 10,
                'nullable' => true
            ]
        );

        $attributeSetId = $eavSetup->getDefaultAttributeSetId(Customer::ENTITY);
        $attributeGroupId = $eavSetup->getDefaultAttributeGroupId(Customer::ENTITY);

        $attribute = $this->eavConfig->getAttribute(Customer::ENTITY, 'phone_number');
        $attribute->setData('attribute_set_id', $attributeSetId);
        $attribute->setData('attribute_group_id', $attributeGroupId);

        $attribute->setData('used_in_forms', [
            'adminhtml_customer',
            'adminhtml_customer_address',
            'customer_account_edit',
            'customer_address_edit',
            'customer_register_address',
            'customer_account_create'
        ]);

        $this->attributeResource->save($attribute);
    }

    /**
     * @inheritdoc
     */
    public static function getDependencies()
    {
        return [];
    }

    /**
     * @inheritdoc
     */
    public function revert()
    {
    }

    /**
     * @inheritdoc
     */
    public function getAliases()
    {
        return [];
    }
}

2. Create customer_account_edit.xml file on Vendor/Module/view/frontend/layout/customer_account_edit.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="form.additional.info">
            <block class="VendorModuleBlockIndex" name="phone_number"
                   template="Vendor_Module::index.phtml"/>
        </referenceBlock>
    </body>
</page>

3. Create block file for your logic on path VendorModuleBlockIndex.php

<?php
namespace VendorModuleBlock;

use MagentoFrameworkViewElementTemplate;
use MagentoCustomerModelSession;
use MagentoCustomerApiCustomerRepositoryInterface;

class Index extends Template
{
    protected $customerSession;
    protected $customerRepository;

    public function __construct(
        TemplateContext $context,
        Session $customerSession,
        CustomerRepositoryInterface $customerRepository,
        array $data = []
    ) {
        $this->customerSession = $customerSession;
        $this->customerRepository = $customerRepository;
        parent::__construct($context, $data);
    }

    public function getPhoneNumber()
    {
        $customerId = $this->customerSession->getCustomerId();
        $customer = $this->customerRepository->getById($customerId);
        return $customer->getCustomAttribute('phone_number') ? $customer->getCustomAttribute('phone_number')->getValue() : '';
    }
}

4. Create phtml file on path Vendor/Module/view/frontend/templates/index.phtml

<div class="field phone">
    <label class="label" for="phone_number"><span><?php echo __('Phone Number'); ?></span></label>
    <div class="control">
        <input type="text" name="phone_number" id="phone_number" value="<?php echo $block->escapeHtml($block->getPhoneNumber()); ?>" title="<?php echo __('Phone Number'); ?>" class="input-text"/>
    </div>
</div>