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/api/gql/products.fragment.gql

@@ -0,0 +1,19 @@
+fragment ProductsFields on Product {
+  id
+  title
+  uuid
+  bundle
+  body
+  path
+  variations{
+    id
+    uuid
+    title
+    description
+    sku
+    price{
+      value
+      currency
+    }
+  }
+}

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: {

web/themes/custom/materiotheme/vuejs/store/modules/pages.js

@@ -1,14 +1,17 @@
-// import { JSONAPI } from 'vuejs/api/json-axios'
 import { REST } from 'vuejs/api/rest-axios'
-// import { MA } from 'vuejs/api/ma-axios'
-// import qs from 'querystring-es3'
+
+import { MGQ } from 'vuejs/api/graphql-axios'
+import { print } from 'graphql/language/printer'
+import gql from 'graphql-tag'
+import productsGQL from 'vuejs/api/gql/products.fragment.gql'
 
 export default {
   namespaced: true,
 
   // initial state
   state: {
-    pricing: {}
+    products_ids: [],
+    products: []
   },
 
   // getters
@@ -16,23 +19,53 @@ export default {
 
   // mutations
   mutations: {
-    setPricing (state, page) {
-      state.pricing = page
+    setProductsIds (state, ids) {
+      state.products_ids = ids
+    },
+    setProducts (state, p) {
+      state.products = p
     }
   },
 
   // actions
   actions: {
-    getPricing ({ dispatch, commit, state }) {
+    getProducts({ dispatch, commit, state }) {
+      dispatch('loadProductsIds')
+    },
+    loadProductsIds({ dispatch, commit, state }) {
       REST.get('/pricing_rest?_format=json', {})
         .then(({ data }) => {
-          console.log('pricing REST: data', data)
-          commit('setPricing', data)
+          console.log('getProducts REST: data', data)
+          let ids = [];
+          for (var i = 0; i < data.length; i++) {
+            ids.push(data[i].product_id)
+          }
+          commit('setProductsIds', ids)
+          dispatch('loadProducts')
         })
         .catch((error) => {
           console.warn('Issue with pricing', error)
           Promise.reject(error)
         })
+    },
+    loadProducts({ dispatch, commit, state }) {
+      let ast = gql`{
+        products(ids: [${state.products_ids}]) {
+          ...ProductsFields
+        }
+      }
+      ${ productsGQL }
+      `
+      MGQ.post('', { query: print(ast) })
+        .then(( resp ) => {
+          console.log('loadProductsGQL resp', resp )
+          commit('setProducts', resp.data.data.products)
+        })
+        .catch(error => {
+          console.warn('Issue with loadProducts', error)
+          Promise.reject(error)
+        })
     }
+
   }
 }