i18n example about hopscotch HOT 16 CLOSED

Ok, I found it out. Should be nice to include in the docs 😸

tourLocales = {
      nextBtn: "Proximo",
      prevBtn: "Voltar",
      doneBtn: "Feito",
      skipBtn: "<%= t('tutorials.user.creation.skip') %>",
      closeTooltip: "<%= t('tutorials.user.creation.close') %>"
    };
var tour = {
      id: "tour",
      i18n: tourLocales,
      steps: [ (the array) ]
}

from hopscotch.

This is invalid javascript:

var retour = {
    ...
  i18n.nextBtn: "Próximo"
}

Using a tool like JSHint or JSLint will help you catch syntax errors like this

from hopscotch.

@kate2753, what would be the best solution to use i18n? the way bsides did?

from hopscotch.

This is a simple (and kind of dumb) syntax error, @guizero. In the end, you have to give a json to i18n parameter, so it could be done in some ways: or by using a variable to be used in other tutorials like I did above or directly into the the parameter:

var tour = {
  id: "tour_id",
  i18n: {
    nextBtn: "Next",
    prevBtn: "Previous"
  },
  steps: [( the json )]

from hopscotch.

+1 on what @bsides said. You need to populate i18n object of your tour config with translated strings.

from hopscotch.

I think the documentation for i18n could be made a little more clear to help people who aren't as familiar with Javascript.

from hopscotch.

Thank you @bsides (valeu cara!) Eu tinha conseguido fazer do seu jeito, mas não fazia sentido pra mim, eu achei que não fosse parte do objeto. Thanks @kate2753 . And I agree with you @gkoo.

from hopscotch.

I'm sorry for keep posting here in such an old post but wouldn't be nice to have a few of those strings already translated in a different folder, like some other projects do? I could do the localization into brazilian portuguese (I already have it) if you want.

from hopscotch.

Docs updated http://linkedin.github.io/hopscotch/#i18n-example

Let me know if any additional updates are necessary.

from hopscotch.

Also, I like the idea of providing translated strings. @bsides, do you mind creating a separate issue for this? We can discuss the best way to incorporate that into hopscotch repo on the new issue.

from hopscotch.

Very nice doc update @kate2753

I am using hopscotch in my web app and I am very happy with the results so far. I have a bootstrap "help" modal that lists every tour that a page has. I have now more than 40 created tours, with lots of multipage experience!. My dashboard page has already 17 tours working together. The only problem is that I am having to add the translated i18n object to every tour. Besides that, love it.

from hopscotch.

Good point @guizero. We should probably add support to set default i18n object for hopscotch globally. something like

 hopscotch.setI18n({...});
 hopscotch.startTour({...});

We would want to keep current per tour i18n config as a way to override the default i18n. This would be backward compatible, but will also allow to reduce redundancy where necessary.

This should be filed as a separate issue (feature request), since this has deviated far enough from original topic of this issue.

from hopscotch.

You should be able to use hopscotch.configure(opts) to set your i18n keys globally...

hopscotch.configure({
  i18n:{
    nextBtn: 'Next Step',
    prevBtn: 'Go Back',
    closeTooltip: 'End Tour'
  }
});

From what I can tell, most configuration options get reset at the end of a tour (side note: this seems odd... shouldn't it revert back to your personal configuration options at the end of the tour?) but i18n is a special case that persists between tours. Might be good to add a more specific method, as designated above, for i18n, especially if we're looking to add some sort of language pack support.

from hopscotch.

Will try your idea @zimmi88 ! Doing that in a fuction prior to starting the tours.

Besides that, off topic, could anyone help me here?
http://stackoverflow.com/questions/22328678/hopscotch-tour-step-on-dynamically-generated-content

from hopscotch.

@kate2753 I'd be honored to help with this. What do you need me for exactly? The translation for portuguese or a new issue just to keep this in track?

from hopscotch.

@bsides potentially both :). Let's start by filing a new issue and once we agree on the best way to incorporate translations into this project, you are welcome to contribute portuguese translation.

from hopscotch.