Submit a request

Phone numbers with spacing

Comments

6 comments

  • Avatar
    Joshua Artman

    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.

  • Avatar
    Shelley Neemeyer

    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

  • Avatar
    Joshua Artman

    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

  • Avatar
    Joshua Artman

    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.

  • Avatar
    Joshua Artman

    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 1234

    Disclaimer:

    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.5/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.5/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.

  • Avatar
    Joshua Artman

    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.

Please sign in to leave a comment.

We're Here To Help


Standard Support Hours: Monday-Friday 8AM-6PM CST
Looking for Premium Support? Just ask!

Speak to a live person
1 (800) 936-9006
Submit A Support Ticket
Submit Your Ticket Here