Phone numbers with spacing
Would it be possible that when a customer enters their phone number it is automatically divided into the 3 sections. Other websites that I visit do this but Americommerce doesn't. It would make looking at all those numbers easier if they were divided when I go to call a customer.
Thanks,
Shelley
-
If you are just working with US/Canadian phone numbers, it is pretty simple for a web developer to add auto formatting of the phone number to your checkout page just by adding some JavaScript to the page. You can see a working example here: https://jsfiddle.net/rafj3md0/ (just type a phone number into the "Phone Number" box in the lower right portion of the page to see it in action). How you want it to be formatted can be adjusted by the web developer. The example shows it formatted as (123) 456-7890, but it could auto format to be 123-456-7890 or 123 456 7890 just as easily.
Dealing with international phone numbers gets a bit trickier. The example I linked to will not work for many international numbers as it is designed to specifically format to the US/Canada phone number format. If AmeriCommerce were to use 3 separate phone number boxes for customers to type the numbers into, many international phone numbers would be difficult to enter. In our case almost 50% of our customers are international customers, so three separate boxes to enter a phone number becomes an issue for us.
0 -
Joshua, thank you very much for the information. Our customer base is all US and a few Canadian. I don't have a web developer so I might try to figure out the java script and where exactly to do this myself and hope I don't make a big mess LOL
Blessings,
Shelley
0 -
Hi Shelley,
Glad I could help.
If I get a chance I might try to modify the code I linked to and paste it here, so it can just by copy/pasted into the footer of a theme to make it work so if others want this feature it will be easy to add.
FYI: you can not just copy the code I linked to and paste it into the theme, because the id of the phone number field in the example does not match the id in our checkout pages. The id in that script on the line "const inputElement = document.getElementById('phoneNumber');" needs to be changed to match the id of the phone number box in the checkout page.
Let me know if you need any pointers and I will be happy to help if I can.
Joshua
0 -
Hi Shelley,
I am not sure if you tried to use the script I linked to, but I realized that there was an issue with that script I had not considered. That scripts will not allow customers to enter a number with an extension. For example, if someone enters 123-456-7890 ext 456, it would format it as (123) 456-7890 without the extension.
0 -
I was able to modify the code I linked to previously and create a self contained javascript file that can be included in the footer of any AmeriCommerce store that should enable the phone number to be auto formatted on the checkout page. The example I linked to previously modified the phone number when any new key was hit, this one will not modify the phone number until at least 9 digits have been entered.
Phone Number Formats:
9 digit or fewer numbers: Not formatted
10 digit numbers: (123) 465 - 7890
11 digit numbers that start with a 1: 1 (123) 465 - 7890 [US/Canada]
11+ digit numbers that do not start with a 1: +66 (123) 465 - 7890 [International]Examples when extension is entered after the phone number:
(123) 465 - 7890 x 1234
1 (123) 465 - 7890 x 1234
+66 (123) 465 - 7890 x 1234Disclaimer:
Script provided AS IS, ABSOLUTELY NO WARRANTY expressed or implied. Use this script at your own risk.
I make no promises that it even remotely covers all possible phone number formats. It is simply intended to make phone numbers more easily read by US based staff of AmeriCommerce Store Owners and for the numbers to have a semblance of a consistent formatting.
I have uploaded this script to GitHub (https://github.com/JoshuaA-WCCC/AmeriCommerce/blob/1.0.4/js/FormatPhoneNumbers.js) and it can be accessed via the JsDelivery Content Delivery Network (CDN). In order to add it to your site, all you should need to do is add one of the following lines of code to the footer of your site theme (Theme > Footer > HTML Editor), just before the following code:
</ac:pagelayout>
If your site is using jquery:
<script>$.getScript('https://cdn.jsdelivr.net/gh/JoshuaA-WCCC/AmeriCommerce@1.0.6/js/FormatPhoneNumbers.min.js');</script>If your site is not using jquery (or you do not know):
<script src='https://cdn.jsdelivr.net/gh/JoshuaA-WCCC/AmeriCommerce@1.0.6/js/FormatPhoneNumbers.min.js' defer async></script>
The script is looking for any input fields that have the "AddressEditorPhoneTextbox" style class set. In all of the AmeriCommerce themes I could find the phone number fields have this style class set.
If anyone tries to use this and it will not work, make sure there are no line breaks in the code you pasted into the footer of your site. If it still will not work, send me a link to your site so I can look to see if your theme is using a different class.
Hopefully this will be useful.
UPDATE:
The original version of this code would only format the phone numbers if the phone number was typed into the checkout page or if it was modified. If the number was loaded from the customer account, it would not modify the phone number. I updated the links above to the code to now point to an updated version that should also format the phone numbers for phone numbers that are loaded from the customers account.
1 -
After using this on our site for most of a week, I realized that this is currently only formatting newly entered phone numbers on the checkout page, if the phone number is pre-filled because the customer is a registered user, the phone number is not formatted unless the customer tries to edit the phone number.
I intend to work on fixing it so that it will format pre-filled data as well, but I cannot promise when I can get to that at this point. I will post a comment on this thread when I have made the update, with a link to the updated script.
0 -
I vote for this enhancement! Whether spaces, dashes or periods, some sort of formatting of the ph #'s would be GREAT.
0 -
Joshua:
Anyway you could help me remove the () - and limit the field to just 10 characters
0 -
Nevermind figured it out!!! Awesome code thanks
0 -
Okay, how about limiting it to just 10 characters only
0 -
Hi Barbara,
It has been a bit since I wrote that code but after a quick review of it, I think in order to remove support for phone numbers with extensions and international phone numbers, you just need to comment out:
lines 90-92 (support for phone number extensions)
lines 94, 108, 109 - 119 (support for international phone number patterns)
The on line 105 remove the "1" from the phone number format.
I am not able to test this at the moment. Let me know if that does not work and I will see if I can find an opportunity to modify and test it.
0
Please sign in to leave a comment.
Comments
11 comments