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>