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>