Phone Mask To Checkout Page

Hello,

How to add phone mask to phone field on checkout page, like on the Buy now with 1-click pop-up?

Thanks.

Try to add the cm-cr-mask-phone class to the phone input field

design/themes/responsive/templates/views/profiles/components/profile_fields.tpl

(!) Not tested

Thank you, but it's not working.

The only place where the "phone" field appear is on line 68.

{hook name="profiles:profile_fields"}
{if $pref_field_name != $field.description || $field.required == "Y"}
{/if}

Works for me:

http://prntscr.com/8vfpu5

You can use the same condition for the class parameter of the input text field

Hi,

The addon Call Requests must be active?

I did it like this but its not working:

class="cm-cr-mask-phone {if $field.field_type == "P"} cm-phone {/if}"   

Could you please show me the changes that you've made? Maybe I did it in other place...

Thank you.

Hi,

The addon Call Requests must be active?

I did it like this but its not working:

class="cm-cr-mask-phone {if $field.field_type == "P"} cm-phone {/if}"   

Could you please show me the changes that you've made? Maybe I did it in other place...

Thank you.

Yes, the addon should be active. Note: the class should be added to the input element, not to its label

Could you please show me the line where should to add the class?

Replace:


with


        

I did exact as you instruct but no luck. First of all I make a fresh install for CS-Cart 4.3.4, then I make settings on addon Call Requests: +9 (999) 999 99 99 then I check If the addon is working on page http://localhost/cscart/electronics/computers/tablets/apple-ipad-with-retina-display-wi-fi-32gb-white/ and it does, but not working on Quick product viewer in Category page. After that I made the changes you mention in design/themes/responsive/templates/views/profiles/components/profile_fields.tpl and check on checkout page on Phone profile fields, but also not working.

Did you clear the cache? Did you see the new class in the browser inspector?

I clear the cache (to be sure I delete folder var/cache) and with browser Inspect on that input I have:


No class cm-cr-mask-phone added.

I will send you a PM.

The main issue is that the Phone profile field on your website has the "Input field" type and not the "Phone" one.

Please create a new profile field for the phone.

Thank you, thanks to you now it's working! Great job. :)

Everything worked ok until I hit the submit button and this error appear

The phone number in the Phone field is invalid. The correct format is (555) 555-55-55 or 55 55 555 5555.

My settings in Call Requests addon are the following:

[attachment=10303:Screen1.png]

and the checkout page looks like this after entering data.

[attachment=10303:Screen1.png]

Thank you.

Screen2.png

Screen1.png

Please also remove the cm_phone class from the label in this case. Looks like two different validators cannot work together

Good job! Now it's working. Thank you! :grin:

I've tried to do the same on backend in admin.php?dispatch=profiles.update&user_id=3&user_type=C and I edit design/backend/templates/views/profiles/components/profile_fields.tpl and change line 138 to this


I have check in browser inspector and I can see the class there but it's not showing the mask. Maybe the javascript it's not loaded?


        

I've tried to do the same on backend in admin.php?dispatch=profiles.update&user_id=3&user_type=C and I edit design/backend/templates/views/profiles/components/profile_fields.tpl and change line 138 to this


I have check in browser inspector and I can see the class there but it's not showing the mask. Maybe the javascript it's not loaded?


You are right. This microformat will work only in the store-front and only if the Call requests module is enabled.

Ok, thanks. There is a workaround to make this class to work also in backend?

At first try to add javascript which is included in the store-front. Hope it will be enough