i18n example

[bsides]

Could we have an example of i18n working? I made this:

var retour = {
  id: "tutorial-user-creation",
  steps: [
                  {
                    title: "Tutorial is here",
                    content: "At any time you can press this button to restart the tutorial.",
                    target: '#restart_tutorial',
                    placement: "bottom",
                    xOffset: -15,
                    showNextButton: true,
                    showPrevButton: true
                  },
  ],
  i18n.nextBtn: "Próximo"
};
 hopscotch.startTour(retour);

...and it returns me the error "Uncaught SyntaxError: Unexpected identifier". In the documentation it says it accepts string. What is wrong with that?

Thank you.

[bsides]

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) ]
}

[kate2753]

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

[guizero]

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

[bsides]

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 )]

[kate2753]

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

[gkoo]

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

[guizero]

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.

[bsides]

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.

[kate2753]

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

Let me know if any additional updates are necessary.

[kate2753]

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.

[guizero]

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.

[kate2753]

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.

[timlindvall]

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.

[guizero]

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

[bsides]

@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?

[kate2753]

@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.