Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Phone Mask To Checkout Page Rate Topic   - - - - -

 
  • thelight
  • Junior Member
  • Members
  • Join Date: 31-Mar 10
  • 58 posts

Posted 23 October 2015 - 10:36 AM #1

Hello,

 

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

 

Thanks.



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 20055 posts

Posted 23 October 2015 - 11:01 AM #2

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


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    Multi-Vendor PLUS           USD 3100 (2775)
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      Multi-Vendor Ultimate       USD 7500 (6000)

 
  • thelight
  • Junior Member
  • Members
  • Join Date: 31-Mar 10
  • 58 posts

Posted 23 October 2015 - 08:01 PM #3

Thank you, but it's not working.

 

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

 

{hook name="profiles:profile_fields"}
<div class="ty-control-group ty-profile-field__item ty-{$field.class}">
    {if $pref_field_name != $field.description || $field.required == "Y"}
        <label for="{$id_prefix}elm_{$field.field_id}" class="ty-control-group__title cm-profile-field {if $field.required == "Y"}cm-required{/if}{if $field.field_type == "P"} cm-phone{/if}{if $field.field_type == "Z"} cm-zipcode{/if}{if $field.field_type == "E"} cm-email{/if} {if $field.field_type == "Z"}{if $section == "S"}cm-location-shipping{else}cm-location-billing{/if}{/if}">{$field.description}</label>
    {/if}


 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 20055 posts

Posted 26 October 2015 - 08:51 AM #4

Works for me:

 

http://prntscr.com/8vfpu5

 

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


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    Multi-Vendor PLUS           USD 3100 (2775)
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      Multi-Vendor Ultimate       USD 7500 (6000)

 
  • thelight
  • Junior Member
  • Members
  • Join Date: 31-Mar 10
  • 58 posts

Posted 29 October 2015 - 04:34 AM #5

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.



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 20055 posts

Posted 29 October 2015 - 09:20 AM #6

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


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    Multi-Vendor PLUS           USD 3100 (2775)
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      Multi-Vendor Ultimate       USD 7500 (6000)

 
  • thelight
  • Junior Member
  • Members
  • Join Date: 31-Mar 10
  • 58 posts

Posted 29 October 2015 - 10:07 AM #7

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



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 20055 posts

Posted 29 October 2015 - 11:40 AM #8

Replace:

<input {if $field.autocomplete_type}x-autocompletetype="{$field.autocomplete_type}"{/if} type="text" id="{$id_prefix}elm_{$field.field_id}" name="{$data_name}[{$data_id}]" size="32" value="{$value}" class="ty-input-text {if !$skip_field}{$_class}{else}cm-skip-avail-switch{/if} {if $smarty.foreach.profile_fields.index == 0} cm-focus{/if}" {if !$skip_field}{$disabled_param nofilter}{/if} 

with

<input {if $field.autocomplete_type}x-autocompletetype="{$field.autocomplete_type}"{/if} type="text" id="{$id_prefix}elm_{$field.field_id}" name="{$data_name}[{$data_id}]" size="32" value="{$value}" class="ty-input-text {if !$skip_field}{$_class}{else}cm-skip-avail-switch{/if} {if $smarty.foreach.profile_fields.index == 0} cm-focus{/if}{if $field.field_type == "P"} cm-cr-mask-phone{/if}" {if !$skip_field}{$disabled_param nofilter}{/if} 

GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    Multi-Vendor PLUS           USD 3100 (2775)
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      Multi-Vendor Ultimate       USD 7500 (6000)

 
  • thelight
  • Junior Member
  • Members
  • Join Date: 31-Mar 10
  • 58 posts

Posted 30 October 2015 - 05:15 AM #9

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



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 20055 posts

Posted 30 October 2015 - 08:42 AM #10

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


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    Multi-Vendor PLUS           USD 3100 (2775)
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      Multi-Vendor Ultimate       USD 7500 (6000)

 
  • thelight
  • Junior Member
  • Members
  • Join Date: 31-Mar 10
  • 58 posts

Posted 30 October 2015 - 09:28 AM #11

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

<input x-autocompletetype="phone-full" type="text" id="elm_30" name="user_data[b_phone]" size="32" value="" class="ty-input-text  ">

No class cm-cr-mask-phone added. 

 

I will send you a PM.



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 20055 posts

Posted 30 October 2015 - 11:30 AM #12

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.


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    Multi-Vendor PLUS           USD 3100 (2775)
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      Multi-Vendor Ultimate       USD 7500 (6000)

 
  • thelight
  • Junior Member
  • Members
  • Join Date: 31-Mar 10
  • 58 posts

Posted 30 October 2015 - 12:52 PM #13

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



 
  • thelight
  • Junior Member
  • Members
  • Join Date: 31-Mar 10
  • 58 posts

Posted 30 October 2015 - 01:58 PM #14

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:

 

Attached File  Screen1.png   61.39KB   0 downloads

 

 

and the checkout page looks like this after entering data.

 

Attached File  Screen1.png   61.39KB   0 downloads

 

 

Thank you.

Attached Files



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 20055 posts

Posted 30 October 2015 - 02:14 PM #15

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


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    Multi-Vendor PLUS           USD 3100 (2775)
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      Multi-Vendor Ultimate       USD 7500 (6000)

 
  • thelight
  • Junior Member
  • Members
  • Join Date: 31-Mar 10
  • 58 posts

Posted 31 October 2015 - 03:29 AM #16

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



 
  • thelight
  • Junior Member
  • Members
  • Join Date: 31-Mar 10
  • 58 posts

Posted 31 October 2015 - 04:49 AM #17

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

<input type="text" id="{$id_prefix}elm_{$field.field_id}" name="{$data_name}[{$data_id}]" size="32" value="{$value}" class="input-large {if $field.field_type == "P"} cm-cr-mask-phone{/if}" {$disabled_param nofilter} />

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?

<input type="text" id="elm_30" name="user_data[b_phone]" size="32" value="" class="input-large  cm-cr-mask-phone">


 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 20055 posts

Posted 03 November 2015 - 09:59 AM #18

 

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

<input type="text" id="{$id_prefix}elm_{$field.field_id}" name="{$data_name}[{$data_id}]" size="32" value="{$value}" class="input-large {if $field.field_type == "P"} cm-cr-mask-phone{/if}" {$disabled_param nofilter} />

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?

<input type="text" id="elm_30" name="user_data[b_phone]" size="32" value="" class="input-large  cm-cr-mask-phone">

 

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


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    Multi-Vendor PLUS           USD 3100 (2775)
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      Multi-Vendor Ultimate       USD 7500 (6000)

 
  • thelight
  • Junior Member
  • Members
  • Join Date: 31-Mar 10
  • 58 posts

Posted 03 November 2015 - 12:34 PM #19

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



 
  • eComLabs
  • CS-Cart Expert
  • Authorized Reseller
  • Join Date: 27-Jan 14
  • 20055 posts

Posted 03 November 2015 - 03:53 PM #20

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


GET A FREE QUOTE | CS-Cart Add-ons | CS-Cart Licenses | CS-Cart Development | CS-Cart Design | Server Configuration | UniTheme and YOUPI
CS-Cart                USD 345     Multi-Vendor              USD 1250    Multi-Vendor PLUS           USD 3100 (2775)
CS-Cart Ultimate  USD 775     CS-Cart + YOUPI      USD 545      Multi-Vendor Ultimate       USD 7500 (6000)