Translate buttons action

[pulsardev]

Translate buttons action

[Outpox]

Hi,

You can already do this by customizing the steps. Take a look at the example in our doc.
If you're still having trouble after that do not hesitate to re-open the issue.

[joffreyBerrier]

Hi,

when i put this, in my code :

<v-tour name="myTour" :steps="steps">
  <template slot-scope="tour">
    <transition name="fade">
      <v-step
        v-if="tour.currentStep === index"
        v-for="(step, index) of tour.steps"
        :key="index"
        :step="step"
        :previous-step="tour.previousStep"
        :next-step="tour.nextStep"
        :stop="tour.stop"
        :isFirst="tour.isFirst"
        :isLast="tour.isLast"
      >
        <template v-if="tour.currentStep === 2">
          <div slot="actions">
            <button @click="tour.previousStep" class="btn btn-primary">Previous step</button>
            <button @click="tour.nextStep" class="btn btn-primary">Next step</button>
          </div>
        </template>
      </v-step>
    </transition>
  </template>
</v-tour>

i have many errors, like : Property or method "tour" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

if i want to change just the wording i don't understand why i should change all the component, it's possible to make variables like for content.

It's possible to explain how i can change the wording ?

thx

[Outpox]

We thought of integrating i18n but we had no time yet.
We also didn't want to add a setting in the tour configuration as we don't see this as a configuration.

If you've already added the tour to your app (by following the README), you may just have the default import:

<template>
  <div>
    <div id="v-step-0">A DOM element on your page. The first step will pop on this element because its ID is 'v-step-0'.</div>
    <div class="v-step-1">A DOM element on your page. The second step will pop on this element because its ID is 'v-step-1'.</div>
    <div data-v-step="2">A DOM element on your page. The third and final step will pop on this element because its ID is 'v-step-2'.</div>

    <v-tour name="myTour" :steps="steps"></v-tour>
  </div>
</template>

To change all the steps buttons content you need to re-define their template and add you own values.
I believe you want to translate it to French so it would be as follow:

<v-tour name="myTour" :steps="steps">
  <template slot-scope="tour">
    <transition name="fade">
      <v-step
        v-if="tour.currentStep === index"
        v-for="(step, index) of tour.steps"
        :key="index"
        :step="step"
        :previous-step="tour.previousStep"
        :next-step="tour.nextStep"
        :stop="tour.stop"
        :isFirst="tour.isFirst"
        :isLast="tour.isLast"
      >
        <template>
          <div class="v-step__buttons">
            <button @click="stop" v-if="!isLast" class="v-step__button">Passer le tour</button>
            <button @click="previousStep" v-if="!isFirst" class="v-step__button">Précédent</button>
            <button @click="nextStep" v-if="!isLast" class="v-step__button">Suivant</button>
            <button @click="stop" v-if="isLast" class="v-step__button">Terminer</button>
          </div>
        </template>
      </v-step>
    </transition>
  </template>
</v-tour>

I've just copied and re-declared the VStep source and translated the button content. Let me know if that's good for you.

[joffreyBerrier]

i called vue tour like this :

on my html file :

<div class="v-tour-0"></div>
<v-tour name=".." :steps="steps"></v-tour>

on my js file :

import VueTour from 'vue-tour'
Vue.use(VueTour)
data : {
steps: [
      {
        target: '.v-step-0',
        content: `...`,          
        params: {
          placement: 'top'
        }
      },
]
}

It's works perfectly i just want to change the language of buttons but when i put your code by replacing the line :

<v-tour name="product_index" :steps="steps"></v-tour>

i have this error :

[Vue warn]: Property or method "tour" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
[Vue warn]: Error in render function: "TypeError: Cannot read property 'steps' of undefined"
TypeError: Cannot read property 'steps' of undefined
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'start' of undefined"
TypeError: Cannot read property 'start' of undefined

i don't understand how i change simply the template ...

[Outpox]

Right now I can't help you, the JS you provided isn't valid.
Please take a look at the provided demo code in the repo and especially this part : https://github.com/pulsardev/vue-tour/blob/master/demo/src/components/MyTour.vue
In our example the idea is that a tour is created in a custom component and is being redefined. Then the component is re-used as you would normally do in Vue wherever it's needed.

[AlyssonSouza]

Hi guys,

You can set inside options variable:

<v-tour name="myTour" :steps="steps" :options="options"></v-tour>

options: {
labels:{
buttonSkip: "Pular",
buttonPrevious: "Anterior",
buttonNext: "Próximo",
buttonStop: "Parar"
}
}