display product list, rest addtocart

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

@@ -0,0 +1,74 @@
+<template>
+  <article class="product">
+    <header>
+      <h1 v-html="product.title" />
+    </header>
+    <section class="content">
+      <div class="description" v-html="product.field_description" />
+      <span class="price">{{ product.price__number }}</span>
+    </section>
+    <aside class="">
+      <input
+        v-if="product.field_multiple"
+        v-model="quantity"
+        placeholder="quantity"
+        type="text"
+        name="quantity"
+        value="1"
+      />
+      <button
+        type="button"
+        name="addtocart"
+        @click.stop="addtocart"
+      >
+        Commander
+      </button>
+    </aside>
+
+  </article>
+</template>
+
+<script>
+
+import { REST } from 'vuejs/api/rest-axios'
+import router from 'vuejs/route'
+
+let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
+
+export default {
+  name: "Product",
+  router,
+  props: ['product'],
+  data(){
+    return {
+      quantity: 1
+    }
+  },
+  methods:{
+    addtocart () {
+      console.log("addtocart clicked");
+      // curl -X POST \
+      //   'http://localhost:32775/cart/add?_format=json' \
+      //   -H 'Content-Type: application/json' \
+      //   -d '[{ "purchased_entity_type": "commerce_product_variation", "purchased_entity_id": "6", "quantity": "1"}]'
+
+      REST.post(`/cart/add?_format=json`, [{
+        "purchased_entity_type": "commerce_product_variation",
+        "purchased_entity_id": this.product.variation_id,
+        "quantity": this.quantity
+      }])
+        .then(({ data }) => {
+          console.log('product add to cart REST: data', data)
+        })
+        .catch(( error ) => {
+            console.warn('Issue with pricing', error)
+            Promise.reject(error)
+        })
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,45 @@
+<template>
+  <div id="cart">
+    <div class="loading" v-if="!false">
+      <span>Loading ...</span>
+    </div>
+    <div class="">
+      This the cart
+    </div>
+  </div>
+</template>
+
+<script>
+
+// import Showroom from 'vuejs/components/Content/Showroom'
+// import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: "cart",
+  // data() {
+  //   return {
+  //     items:[],
+  //     page:0
+  //   }
+  // },
+  // computed: {
+  //   ...mapState({
+  //     items: state => state.Showrooms.items
+  //   })
+  // },
+  created(){
+    // if(!this.items.length)
+    //   this.getItems()
+  },
+  methods: {
+    // ...mapActions({
+    //   getItems: 'Showrooms/getItems'
+    // })
+  },
+  // components: {
+  //   Showroom
+  // }
+}
+</script>
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,48 @@
+<template>
+  <div id="pricing">
+    <div class="loading" v-if="!pricing.length">
+      <span>Loading ...</span>
+    </div>
+    <Product
+      v-else
+      v-for="product in pricing"
+      v-bind:key="product.uuid"
+      :product="product"
+    />
+  </div>
+</template>
+
+<script>
+
+import Product from 'vuejs/components/Content/Product'
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: "Pricing",
+  // data() {
+  //   return {
+  //     items:[],
+  //     page:0
+  //   }
+  // },
+  computed: {
+    ...mapState({
+      pricing: state => state.Pages.pricing
+    })
+  },
+  created(){
+    if(!this.pricing.length)
+      this.getPricing()
+  },
+  methods: {
+    ...mapActions({
+      getPricing: 'Pages/getPricing'
+    })
+  },
+  components: {
+    Product
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

web/themes/custom/materiotheme/vuejs/route/index.js

@@ -6,6 +6,8 @@ import Base from 'vuejs/components/Pages/Base'
 import Blabla from 'vuejs/components/Pages/Blabla'
 import Article from 'vuejs/components/Pages/Article'
 import Showrooms from 'vuejs/components/Pages/Showrooms'
+import Pricing from 'vuejs/components/Pages/Pricing'
+import Cart from 'vuejs/components/Pages/Cart'
 
 Vue.use(VueRouter)
 
@@ -66,14 +68,24 @@ const routes = [
     path: `${basePath}showrooms`,
     component: Showrooms,
     // meta: { uuid:null }
-  }
+  },
   // {
   //   path: '*',
   //   name: 'notfound',
   //   components: {
   //     'notfound': NotFound
   //   }
-  // }
+  // },
+  {
+    name:'pricing',
+    path: `${basePath}pricing`,
+    component: Pricing
+  },
+  {
+    name:'cart',
+    path: `${basePath}cart`,
+    component: Cart
+  }
 ]
 
 export default new VueRouter({

web/themes/custom/materiotheme/vuejs/store/index.js

@@ -5,6 +5,7 @@ import User from './modules/user'
 import Search from './modules/search'
 import Blabla from './modules/blabla'
 import Showrooms from './modules/showrooms'
+import Pages from './modules/pages'
 
 // https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
 
@@ -15,6 +16,7 @@ export default new Vuex.Store({
     User,
     Search,
     Blabla,
-    Showrooms
+    Showrooms,
+    Pages
   }
 })

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

@@ -0,0 +1,38 @@
+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'
+
+export default {
+  namespaced: true,
+
+  // initial state
+  state : {
+    pricing: {},
+  },
+
+  // getters
+  getters : {},
+
+  // mutations
+  mutations : {
+    setPricing (state, page) {
+      state.pricing = page
+    }
+  },
+
+  // actions
+  actions : {
+    getPricing({ dispatch, commit, state }){
+      REST.get(`/pricing_rest?_format=json`, {})
+        .then(({ data }) => {
+          console.log('pricing REST: data', data)
+          commit('setPricing',data)
+        })
+        .catch(( error ) => {
+            console.warn('Issue with pricing', error)
+            Promise.reject(error)
+        })
+    }
+  }
+}