Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this community
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?
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 ;)
// app/code/Vendor/Module/path/to/the/file.php or something like that
Jun 16, 2022 at 6:27
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>
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
}" />
