1

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.

I am looking for a solution for the Billing Address, not the Shipping Address. I have successfully been able to modify the Shipping Address.

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="Magento\Checkout\Block\Checkout\LayoutProcessor">
    <plugin name="update_billing_telephone" type="Vendor\Module\Plugin\Block\Checkout\LayoutProcessor"/>
</type>
</config>

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

namespace Vendor\Module\Plugin\Block\Checkout;

class LayoutProcessor
{
/**
 * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
 * @param array $jsLayout
 * @return array
 */
public function afterProcess(\Magento\Checkout\Block\Checkout\LayoutProcessor $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
}" />
2
  • For telephone input type as a number, you can use validation also Feb 2, 2023 at 6:25
  • We want to change the input type to tel, so that when a user is on their phone the number pad will display. How does using validation open up the number pad on a phone?
    – cjochum
    Feb 2, 2023 at 13:42

2 Answers 2

1

You can change the input type of telephone input field using XML.

Firstly, please create a template file to change field type.

app/design///Magento_Ui/web/template/form/element/number.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
    }" />

Now, Assign this template file to the telephone field.

To assign a template file to the field, need to change in the checkout_index_index.xml file.

app/design///Magento_Checkout/layout/checkout_index_index.xml

<referenceBlock name="checkout.root">
    <arguments>
        <argument name="jsLayout" xsi:type="array">
            <item name="components" xsi:type="array">
                <item name="checkout" xsi:type="array">
                    <item name="children" xsi:type="array">
                        <item name="steps" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="shipping-step" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shippingAddress" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shipping-address-fieldset" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="telephone" xsi:type="array">
                                                            <item name="config" xsi:type="array">
                                                                <item name="elementTmpl" xsi:type="string">Magento_Ui/form/element/number</item>
                                                                <item name="tooltip" xsi:type="array">
                                                                    <item name="description" xsi:type="string" translate="true">For delivery questions.</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
    </arguments>
</referenceBlock>

Now, Please run below commands:

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
php bin/magento cache:flush

Hope it will help you.

tel

1
  • That is for the Shipping Address not the Billing Address. I was looking for a solution for the Billing Address. I have already been able to update the Shipping Address.
    – cjochum
    Feb 8, 2023 at 17:55
0

Instead of trying to build a new extension for this, I ended up just using jQuery to change the input type from 'text' to 'tel'.

app/design/frontend/Vendor/default/Magento_Checkout/templates/onepage.phtml

<script type="text/javascript">

require(['jquery','Magento_Checkout/js/view/payment/default'],function($, paymentview){
    jQuery(document).ready(function() {
        $(document).on('click','input[name="billing-address-same-as-shipping"]', function() {
             $('input[name$="telephone"]').attr('type','tel');
        });
    });
});

</script>

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.