materio-d8/web/themes/custom/materiotheme/vuejs/components/Content/Product.vue

<template>
  <article class="product">
    <header>
      <h1 v-html="product.title"/>
    </header>
    <section class="content">
      <div class="description" v-html="product.body"/>
    </section>
    <aside v-if="!isAdherent">
      <div
        class="variation"
        v-for="variation in product.variations"
        :key="variation.id"
      >
        <div class="variation-description" v-html="variation.description"/>
        <div class="actions">
          <button
            type="button"
            name="addtocart"
            @click.stop="checkaddtocart($event, variation.id)"
          >
            {{ $t('default.'+variation_btn_txt[variation.id]) }}
          </button>
        </div>
      </div>
      <div v-if="product.id == 4">
        <a href="/pricing/multijoueur" class="btn">
          {{ $t("default.Ask for a quote") }}
        </a>
      </div>
    </aside>

  </article>
</template>

<script>

import router from 'vuejs/route'
import productsMixins from 'vuejs/components/productsMixins'

export default {
  name: "Product",
  router,
  props: ['product'],
  mixins: [productsMixins],
  data(){
    return {
      quantity: 1,
      // showLoginModal:false
      variation_btn_txt: {
        3: 'Yeees!',
        4: 'Yay!',
        5: 'Great!',
        6: 'OKAY!'
      }
    }
  },
  created(){
    console.log('this.product', this.product)
  }
}
</script>

<style lang="scss" scoped>
</style>