4

I want to change the input for the telephone field in the checkout from text to number.

I looked into it 2 years ago and created this topic on the Magento community forum. There were some answers there, but none worked. Now, two years later, another of our customers has asked for this, but I still can't seem to find a fix. Does anyone have a clue?

4
  • is it solved or not? Jan 17, 2020 at 5:27
  • It is but i can't select my own answer till the problem is 2 days old ^^'
    – Sanne
    Jan 17, 2020 at 16:00
  • ok so can you share me URL? Jan 19, 2020 at 8:40
  • in which for you want to set that number format? Jan 20, 2020 at 4:36

3 Answers 3

3

I found that the best way to change the input type is to add a different template to the LayoutProcessor and change the input type in there.

// Vendor/Module/Plugin/Magento/Checkout/Block/Checkout/LayoutProcessor.php

protected function updateElementTmpls(&$jsLayoutResult)
{
    $shippingAddress = &$jsLayoutResult['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children'];
    $billingAddress = &$jsLayoutResult['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['billing-address']['children']['form-fields']['children'];

    $inputPathPhone = 'YourCompany_YourModule/ui/form/element/phone-overwrite';
        

    $shippingAddress['telephone']['config']['elementTmpl'] = $inputPathPhone;
    $billingAddress['telephone']['config']['elementTmpl'] = $inputPathPhone;

}
<!-- vendor/module/view/base/web/template/ui/form/element/phone-overwrite.html -->

<input class="input-text" type="number" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    css: {focused: value() != '' && value() != ' '},
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': noticeId,
        id: uid,
        disabled: disabled
    }
"/>

I don't have the complete code because my LayoutProcessor is editted a lot because we used this for our checkout extension: https://www.bigbridge.nl/magento-2-enhanced-checkout/ (input types will be in the next version).

Update: At the end I found out that the 'tel' format is nicer for phone numbers so I would recommend replacing number with tel ;)

2
  • 1
    Great Job mate. Jan 20, 2020 at 4:37
  • 1
    @sanne It would have been nice if you had started the code fragments with the filenames, like // app/code/Vendor/Module/path/to/the/file.php or something like that Jun 16, 2022 at 6:27
3

You can try this module

<!-- app/code/Sanne/Js/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="Sanne_Js" setup_version="1.0.0">
        <sequence> <module name="Magento_Checkout" /></sequence>
    </module>
</config>
// app/code/Sanne/Js/registration.php

<?php
    
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Sanne_Js',
    __DIR__
);
<!-- app/code/Sanne/Js/view/frontend/layout/checkout_index_index.xml -->

<?xml version="1.0"?>
    
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="phonejs" template="Sanne_Js::js.phtml" />
        </referenceContainer>
    </body>
</page>
<!-- app/code/Sanne/Js/view/frontend/templates/js.phtml -->

<?php ?>
    
<script type="text/x-magento-init">
{
    "*": {
        "Elgentos_AddTelephoneInputType/js/phonevalidation":
            {
                "phoneinput":"input[name=telephone]"
            }
    }
}
</script>
// app/code/Sanne/Js/view/frontend/web/js/phonevalidation.js

define([
    "jquery",
    "jquery/ui"
], function($) {
    "use strict";
    
    //creating jquery widget checking phone numbers to remove character, allowed only numbers
    $.widget('phonevalidation.js', {
        _create: function() {
            var widget = this;
            var templateoptions = widget.options;
            $('body').on('input', templateoptions.phoneinput, function() {
                var number = $(this).val().replace(/[^\d]/g, '');
                $(this).val(number)
            });
        }
    });
    
    return $.phonevalidation.js;
});
// app/code/Sanne/Js/view/frontend/web/requirejs-config.js

var config = {
    map: {
        '*': {
            phonevalidationjs:      'Sanne_Js/js/phonevalidation'
        }
    }
};
<!-- app/code/Sanne/Js/view/frontend/layout/customer_address_form.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>
        <referenceContainer name="content">
             <block class="Magento\Framework\View\Element\Template" name="phonejs" template="Sanne_Js::js.phtml" />
        </referenceContainer>
    </body>
</page>
3
  • This does prevent the telephone field from having letters but I need the input type to change so that if people enter their telephone number on mobile they get the number keyboard. I actually just found a solution and will post it under this question now.
    – Sanne
    Jan 16, 2020 at 8:55
  • Glad you found a solution. Jan 16, 2020 at 9:11
  • @Sanne please share the solution, I shall be thankful to you :) Jun 5, 2021 at 7:13
0

Similar to what @Sanne proposed, I've implemented a Plugin (instead of overriding the whole thing)...

In my case, just wanted to convert the type="text" to tel on the telephone field (billing).

So..

<!-- /app/code/vendor/module/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="layoutprocessor_streetlines"
                type="Vendor\Module\Plugin\Block\Checkout\LayoutProcessor"/>
    </type>
</config>
// /app/code/Vendor/Module/Plugin/Block/Checkout/LayoutProcessor.php

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/telephone';

        return $result;

}
<!-- src/app/code/Vendor/Module/view/base/web/template/form/element/telephone.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
    }" />

Your Answer

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

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