refactored front pricing to use graphql, refactored to add 2 products (web & web+showroom) each one with 2 variations (monthly, annual)

web/themes/custom/materiotheme/vuejs/components/Content/Product.vue

@@ -4,24 +4,16 @@
       <h1 v-html="product.title" />
     </header>
     <section class="content">
-      <div class="description" v-html="product.field_description" />
-      <span class="price">{{ product.price__number }}</span>
+      <div class="description" v-html="product.body" />
     </section>
     <aside v-if="!isAdherent">
-      <input
-        v-if="product.field_multiple"
-        v-model="quantity"
-        placeholder="quantity"
-        type="text"
-        name="quantity"
-        value="1"
-      />
       <button
+        v-for="variation in product.variations"
         type="button"
         name="addtocart"
         @click.stop="checkaddtocart"
       >
-        Commander
+        Commander {{ variation.price.value }}
       </button>
     </aside>
 

web/themes/custom/materiotheme/vuejs/components/Pages/Pricing.vue

@@ -1,11 +1,11 @@
 <template>
   <div id="pricing">
-    <div class="loading" v-if="!pricing.length">
+    <div class="loading" v-if="!products.length">
       <span>Loading ...</span>
     </div>
     <Product
       v-else
-      v-for="product in pricing"
+      v-for="product in products"
       v-bind:key="product.uuid"
       :product="product"
     />
@@ -27,16 +27,16 @@ export default {
   // },
   computed: {
     ...mapState({
-      pricing: state => state.Pages.pricing
+      products: state => state.Pages.products
     })
   },
   created(){
-    if(!this.pricing.length)
-      this.getPricing()
+    if(!this.products.length)
+      this.getProducts()
   },
   methods: {
     ...mapActions({
-      getPricing: 'Pages/getPricing'
+      getProducts: 'Pages/getProducts'
     })
   },
   components: {