I want to add validation to zip code in the checkout.
I’ve edited the code in design\themes\responsive\templates\views\profiles\components\profiles_scripts.tpl
<script>
(function(_, $) {
/* Do not put this code to document.ready, because it should be
initialized first
*/
$.ceRebuildStates('init', {
default_country: '{$settings.Checkout.default_country|escape:javascript}',
states: {$states|json_encode nofilter}
});
{literal}
$.ceFormValidator('setZipcode', {
US: {
regexp: /^(\d{5})(-\d{4})?$/,
format: '01342 (01342-5678)'
},
CA: {
regexp: /^(\w{3} ?\w{3})$/,
format: 'K1A OB1 (K1AOB1)'
},
RU: {
regexp: /^(\d{6})?$/,
format: '123456'
},
PL: {
regexp: /^(\d{2})(-\d{3})?$/,
format: '01342 (01342-5678)'
}
});
{/literal}
}(Tygh, Tygh.$));
</script>
And according to the docs (Microformats — CS-Cart 4.17.x documentation) I should add class to label cm-zipcode? Should I do this directly in the unitheme? If yes, then which file should I edit? I’m stuck with this one and would appreciate the help!
Thanks for the response. Following file doesn’t exist. I thought that it inherits files from responsive theme and I’ve made my changes design\themes\responsive\templates\views\profiles\components\profiles_scripts.tpl but in checkout the label tag is missing the cm-zipcode. The question is which file should I modify to add this class?
The modified script $.ceFormValidator(‘setZipcode’, { … is visible in the debugger in the source code.
The documentation sasy:
cm-zipcode - the element value must be a valid zip code (every country has its own zip code format, so the pattern is to be defined in the country table, but so far manually - the method $.ceFormValidator('setZipcode', {...})).
is not the only one in the above template that precedes the addition of this class. Could you please provide the step-by-step instruction how can the issue be reproduced in the demo? The dev demo could play the role of a suitable environment to reproduce this issue: https://dev.demo.mv.cs-cart.com/
The template design/themes/responsive/templates/views/profiles/components/profile_fields.tpl is not used by default at the checkout, so it won’t be triggered there. The only page I can currently remember, that uses this template is the Profile details, and the cm-zip class is present there for the zip code field.
You will need to add the form validator to the checkout page, and add the cm-zip value to the User-defined CSS class field of the required profile field.
cm-zip or cm-zipcode? The documentation says that it should be cm-zipcode. Moreover adding it to User-defined CSS class adds it in the input class not in the label for the input field. The documentation says that this class should be added to the label of the input.
Is the documentation wrong or the method you provided? Can you check it on dev.demo.cs-cart.ru and paste the url here?
Yes, you are correct, I’m sorry for mislead. It should be cm-zipcode and in the label element, not in the input, so adding it to the profile field class won’t work.
You may need to override the following template: design/themes/responsive/templates/views/checkout/components/profile_fields.tpl
and change this code:
You will also need to include the views/profiles/components/profiles_scripts.tpl template, which defines the regular expressions for this field to be applied:
