Skip to content

Change Billing Address Telephone Input Type

I am trying to change the telephone input type from “text” to “tel”, so that on mobile devices a number pad will display. I have tried to implement the solution outlined https://magento.stackexchange.com/a/337363/56479, but I am not able to get it to work.

enter image description here

Am I missing something?

/app/code/Vendor/Module/etc/frontend/di.xml

I’ve tried putting the di.xml file in just the “etc” folder, but that also did not seem to make a difference.

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="MagentoCheckoutBlockCheckoutLayoutProcessor">
    <plugin name="update_billing_telephone" type="VendorModulePluginBlockCheckoutLayoutProcessor"/>
</type>
</config>

/app/code/Vendor/Module/Plugin/Block/Checkout/LayoutProcessor.php

namespace VendorModulePluginBlockCheckout;

class LayoutProcessor
{
/**
 * @param MagentoCheckoutBlockCheckoutLayoutProcessor $subject
 * @param array $jsLayout
 * @return array
 */
public function afterProcess(MagentoCheckoutBlockCheckoutLayoutProcessor $subject, $result, $jsLayout)
{

    $result["components"]["checkout"]["children"]["steps"]["children"]["billing-step"]["children"]["payment"]
        ["children"]["afterMethods"]["children"]["billing-address-form"]["children"]["form-fields"]["children"]
        ["telephone"]['config']['elementTmpl'] = 'Vendor_Module/form/element/tel-input';

        return $result;

}
}

I’ve tried putting the tel-input.html file in both base and frontend, but neither seem to make a difference.

/app/code/Vendor/Module/view/frontend/web/template/form/element/tel-input.html

<input class="input-text" type="tel" data-bind="
value: value,
valueUpdate: 'keyup',
hasFocus: focused,
attr: {
    name: inputName,
    placeholder: placeholder,
    'aria-describedby': getDescriptionId(),
    'aria-required': required,
    'aria-invalid': error() ? true : 'false',
    id: uid,
    disabled: disabled
}" />