d
Topic
Posts:
19
February 18, 2013
g
1
upvotes

Translate form errors This post is outdated

Hi everyone!

I'm setting up a French shop for my sister, and some of the very last items to translate are the form error messages, the contact form being the primary culprit.

No matter how much I trawl through code and shop/theme settings, I can't find where I can translate these messages, or in fact if it's at all possible.

I've even created a new French translation file just for this shop so we're in total control of the text, but the error messages aren't in there.

Anyone would have an idea?

Ideally, I'd rather avoid things like the replace filter all over the place. I've had to do this for days and months in dates, and that's rather tedious.

Thanks!

i
Replies
Posts:
5
February 23, 2013

The same problem

Posts:
5840
February 23, 2013

You'll need to use the replace filter, on the output of the error messages tag.

http://wiki.shopify.com/Replace

Example of translation done with replace filter: http://support.shopify.com/customer/portal/articles/155560-how-do-i-translate-the-words-previous-and-next-in-my-pagination-links.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
5
February 23, 2013

Thanx, Caroline, but there are some parts of messages are still untranslated.
here  – <div class="error feedback accent-text">

        <p>Упс, видимо вы допустили {{ form.errors | size | pluralize: 'ошибку', 'несколько ошибочек' }}. Пожалуйста, скорректируйте данные и попробуйте отправить снова.</p>

        {% for field in form.errors %}

          <p>Поле {{ field | capitalize | replace: 'Body', 'Сообщение' }} {{ form.errors.messages[field] }}.</p>

        {% endfor %}

      </div>

 

http://daniyar.com/temp/Screen%20Shot%202013-02-23%20at%2022.13.59-vsHP2nnjQd.png

 

Posts:
5840
Last edited February 23, 2013

Use the replace filter like so:

{{ form.errors.messages[field] | replace: "can't be blank", "YOUR TRANSLATION" }}
Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
5840
Last edited February 23, 2013

Or... looks like you could use:

<p>Поле {{ field | capitalize | replace: 'Body', 'Сообщение' }} YOUR TRANSLATION FOR "can't be blank" HERE.</p>
Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
5
February 23, 2013

Thanx, Caroline, it helped. I am dunce :)

Posts:
19
February 23, 2013

As I said in my original post, this is not what I wanted to do. I suspected this would be the "solution" but it really isn't pretty at all from a development and performance standpoint.

At the very least, do you know if there is a list of all possible error messages somewhere? Even though I don't like the replace filter which is essentially string manipulation, it seems the only solution so far, so let's go for it, hopefully the shopify platform can cope with the performance hit of applying plenty of regular expressions on generated code...

However, the main problem here is not knowing what to translate. That should really be done in the translations files available from the admin interface.

Shopify support? A hand on this please?

Posts:
5
February 23, 2013

It's a very good solution for worldwide users. When I didn't find one in admin pane I was very upset. Hope in the future there will be some kind of language template in the admin panel

 

Posts:
19
February 23, 2013
g
1
upvotes

I don't think it is, actually. While it is A solution, it's not an acceptable one as we don't know what to expect.

Publication of "new strings" is a general problem as far as I know. I created a new translation file for my website a couple of weekes back, but since then, new strings have been added and it doesn't seem there is any notification of it either. I noticed a few other posts around the topic, so we're not isolated cases.

Not knowing what to expect is not a great approach, even if there is a way to translate what is printed out.

As a developer, I want to know 100% what I can expect to be printed to my customers, and I want 100% of it to be translated when it reaches them. Anything less than this makes me look like a tool.

I'm happy to help on anything if I can, Shopify!

Posts:
5840
February 23, 2013

Hi Ekynoxe, excellent points. I feel the same.

I added a translation for can't be blank in the New Standard checkout translation. That translation page is accessible in your shop by going to this URL: http://www.shopify.com/admin/locales/new. Unfortunately, my translation does not get applied to the shop's contact form at http://the-new-standard-theme.myshopify.com/pages/leave-a-comment (you will need to test in a browser that does not support the HTML5 required attribute like Safari). It only gets applied to the checkout pages, see image below.

I'll ask our developers if this can be changed, despite the fact that that this is called a checkout translation. 

To be clear, we don't have a 'storefront' translation file to edit, no, alas.

PS. Having said that, I'd be for having all translations in one single file, storefront and checkout.

The new standard   checkout 2013 02 23 16 56 34 thumb
Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
19
February 23, 2013

Thanks Caroline, I did create a new translation for my shop, but I'm puzzled as to how things are referenced. Is it so that anyone add anything in there in the hope it will cover bits of the text present in what I'd call the store front "master templates". Templates that developers don't have access to as they are used by all stores, I guess.

I mean: the error messages do come from somewhere, and if I can't edit them directly or with a locale file as per your example, there must be a way to know what text is translatable. All of it. So we can at least set up "replace" filters for what's known to exist at the time.

for example, the pagination is easy: either "next" or "previous". Dates are easy too: days and months names, either in full or abbreviated.

"Can't be blank" is one of the error messages, but what else can be displayed to the user? That's what I'm after at least.

thanks a lot for the follow up! I love the speed at which I've done that store for my sister, but it's these little things that contribute to the "not finished" feel I've got of the platform. Hence my offer to help. I'm not in Canada, but hey!

Posts:
5840
February 23, 2013

Thank you so much for offering your assistance, Ekynoxe!

Is it so that anyone add anything in there in the hope it will cover bits of the text present in what I'd call the store front "master templates".

No one can add phrases to the checkout translation, if you mean phrases to translate. Those phrases are added on our end, whenever we add new text to the checkout pages. Within that “file”, you are able to translate your checkout pages only. Not your store front “pre-checkout”

The English you'll find elsewhere can either be translated in the theme's files, or, if that's some error message returned by us, you'll need to use the replace filter, for now.

There's not a list of all possible error messages one can get on the store front pre-checkout that we are able to share with our customers for now.

Publication of "new strings" is a general problem as far as I know.

It is, and that's one you'll encounter with any software.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
19
February 24, 2013

Thanks a lot for the precisions Caroline! I'll do my best to catch as many error messages as I can with the replace filter then. Now I need to find an "old" browser without html5 validation, time to get out the old virtual machines and dig an outdated IE!

Thanks again

Posts:
9
August 14, 2013

Another form error to translating while registering: "Email has already been taken and The email address you have entered is already assigned to a store account. If this is your account, you can set up or change your password here."

Posts:
1
December 26, 2013

Thanks for the tips. Indeed translation of errors is pain in the butt. This is the "solution" I have used, though not very pleasant:

{% if form.errors %}
  <div class="errors">
    <ul>
      {% for field in form.errors %}
        {% if form.errors.messages[field] contains "Email is invalid." %}
          <li>Неверный адрес электронной почты.</li>
        {% endif %}
        {% if form.errors.messages[field] contains "The email address you have entered is already assigned to a store" %}
          <li>Адрес электронной почты неверный или уже используется.</li>
        {% endif %}
        {% if form.errors.messages[field] contains "be blank" %}
          <li>
          {% if field == "email" %}
            Необходим адрес электронной почты.
          {% elsif field == "password" %}
            Необходим пароль.
          {% endif %}
          </li>
        {% endif %}
        {% if form.errors.messages[field] contains "is too short" %}
          <li>
          {% if field == "password" %}
            Пароль слишком короткий (минимум 5 символов).
          {% endif %}
          </li>
        {% endif %}
      {% endfor %}
    </ul>
  </div>
{% endif %}


Are there any other errors I need to handle? 

Cheers.

Posts:
110
January 10, 2014

If you try to register a new user using an email REGISTERED below and writing another password it gives this error:

Email has already been taken and The email address you have entered is already assigned to a store account. If this is your account, you can set up or change your password here.

You can't replace this message because ''set up or change your password here.'' is a password recovery link. You can only translate the part before this and it does not help...

Anyone have an idea please??

Javier Member
Posts:
1
Last edited January 21, 2014

I've been looking into this and figured out the solution. To change the ''set up or change your password here'' link, just add this string to the replace function. It will automatically convert your text to the #recovery link.

So it will look like this:

{{ form.errors | replace: "Email has already been taken and The email address you have entered is already assigned to a store account. If this is your account, you can ", "YOUR TEXT." | replace: "set up or change your password here","YOUR LINK TEXT."}}

Hope this helps!

J.

Posts:
10
January 21, 2014

hi,

i have the same problem of Erkan, i can only translate a part of form.error,  in the login area if I put in an email address that is already registered, I get an error that I can not figure out how to translate.

this is the message i need tro translate:  Email has already been taken and The email address you have entered is already assigned to a store account. If this is your account, you can set up or change your password here.

my code:

 {{ form.errors | default_errors | replace: "Invalid login credentials.", "Credenziali errate." | replace: "Email has already been taken and The email address you have entered is already assigned to a store account. If this is your account, you can set up or change your password here..", "my translation for example."}}

The first part of the translation work properly, while the other message that follows is not translated.

i have the same problem with the error message: Password is too short (minimum is 5 characters).

you have any suggestion? thanks so much and sorry for my bad english ;)

Posts:
110
January 21, 2014

Hi Samuel, here is the fix: (to make this work make form.errors comment)

<!-- Re-write all the error messages here -->
        {% if form.errors %}
  <div class="errors">
    <ul>
      {% for field in form.errors %}
        {% if form.errors.messages[field] contains "Email is invalid." %}
          <li>Girdiğiniz e-mail adresi hatalı!</li>
        {% endif %}
        {% if form.errors.messages[field] contains "The email address you have entered is already assigned to a store" %}
          <li>Girdiğiniz e-mail adresi hatalı ya da kayıtlı bir kullanıcıya ait! Parolanızı unuttuysanız lütfen <b><a href="/account/login#recover">buraya</a></b> tıklayın.</li>
        {% endif %}
        {% if form.errors.messages[field] contains "be blank" %}
          <li>
          {% if field == "email" %}
            Lütfen geçerli bir E-mail adresi giriniz.
          {% elsif field == "password" %}
            Lütfen geçerli bir Parola giriniz.
          {% endif %}
          </li>
        {% endif %}
        {% if form.errors.messages[field] contains "is too short" %}
          <li>
          {% if field == "password" %}
            Parolanız en az 5 karakter olmalıdır!
          {% endif %}
          </li>
        {% endif %}
      {% endfor %}
    </ul>
  </div>
{% endif %}

 

Posts:
10
January 21, 2014

hi Erkan, thanks so much for your reply, This code must be entered in the customers/login.liquid ?

can you paste the entire code of your page if is possible?

I am not very practical with the code and do not understand what you mean by add it as a comment.

thank you so much!

Best regards!

Posts:
110
January 25, 2014

Hi Samuel,

Yes, inside the login.liquid or register.liquid (depends on where you want to see this error messages)

{% layout settings.customer_layout %}

<div id="template" class="customer customer__register">
  <div id="customer">
	  <!-- Create Customer -->
	  <div id="create-customer">
	    <div class="template_header">
	      <h2 class="page_title">Hesap Oluştur</h2>
	    </div>

	    <div class="template_content">
          <div style="padding:10px; margin-bottom:20px; text-align:center; background-color: #efefef;">Daha önceden kayıt olduysanız, lütfen Giriş yapın.</div>
      <div class="form-horizontal">    
              {% form 'create_customer' %}
		  		<!-- {{ form.errors | default_errors | replace: 'Password is too short (minimum is 5 characters).' , 'Parolanız en az 5 karakter olmalıdır!' | replace: 'Email is invalid. and The email address you have entered is already assigned to a store account. If this is your account, you can' , 'Girdiğiniz e-mail adresi hatalı!' | replace: 'Password can&#39;t be blank.' , 'Lütfen geçerli bir parola giriniz.' | replace: 'Email can&#39;t be blank.' , 'Lütfen geçerli bir E-mail giriniz.' | replace:'Email has already been taken and The email address you have entered is already assigned to a store account. If this is your account, you can &lt;a href=&quot;/account/login#recover&quot;&gt;set up or change your password here&lt;/a&gt;.','Girdiğiniz E-mail adresi sistemimizde kayıtlı. Parolanızı unuttuysanız lütfen parolamı unuttum linkine tıklayın.' | replace:'set up or change your password here.','siktir'}}
                
        
        
        
<!-- Re-write all the error messages here -->
        {% if form.errors %}
  <div class="errors">
    <ul>
      {% for field in form.errors %}
        {% if form.errors.messages[field] contains "Email is invalid." %}
          <li>Girdiğiniz e-mail adresi hatalı!</li>
        {% endif %}
        {% if form.errors.messages[field] contains "The email address you have entered is already assigned to a store" %}
          <li>Girdiğiniz e-mail adresi hatalı ya da kayıtlı bir kullanıcıya ait! Parolanızı unuttuysanız lütfen <b><a href="/account/login#recover">buraya</a></b> tıklayın.</li>
        {% endif %}
        {% if form.errors.messages[field] contains "be blank" %}
          <li>
          {% if field == "email" %}
            Lütfen geçerli bir E-mail adresi giriniz.
          {% elsif field == "password" %}
            Lütfen geçerli bir Parola giriniz.
          {% endif %}
          </li>
        {% endif %}
        {% if form.errors.messages[field] contains "is too short" %}
          <li>
          {% if field == "password" %}
            Parolanız en az 5 karakter olmalıdır!
          {% endif %}
          </li>
        {% endif %}
      {% endfor %}
    </ul>
  </div>
{% endif %}
<!-- Burası error'ları baştan yazan özel kısım BİTTİ-->        
        
        
        
        
        
        		<div id="first_name" class="clearfix large_form control-group">
                  <label for="first_name" class="login control-label">Ad:</label>
                  <div class="controls"><input type="text" value="" name="customer[first_name]" id="first_name" class="large" size="30" /></div>
                </div>
        
                <div id="last_name" class="clearfix large_form control-group">
                  <label for="last_name" class="login control-label">Soyad:</label>
                  <div class="controls"><input type="text" value="" name="customer[last_name]" id="last_name" class="large" size="30" /></div>
                </div>
        
                <div id="email" class="clearfix large_form control-group">
                  <label for="email" class="login control-label">E-mail adresi:</label>
                  <div class="controls"><input type="email" value="" name="customer[email]" id="email" class="large" size="30" /></div>
                </div>
                      	     
                <div id="password" class="clearfix large_form control-group">
                  <label for="password" class="login control-label">Parola:</label>
                  <div class="controls"><input type="password" value="" name="customer[password]" id="password" class="large password" size="30" /></div>
                </div>
        
                <div class="action_bottom">
                  <input class="btn btn-primary" style="margin-right: 5px;" type="submit" value="Oluştur" />
                  <span class="note">ya da <a href="{{ shop.url }}">Mağazaya geri dön</a></span>
                </div>
              {% endform %}
      </div>
  	  </div>
	  </div><!-- /#create-customer -->
  </div>
</div>