not launching vue on commerce pages

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -24,7 +24,7 @@ import { mapState } from 'vuex'
 // require('theme/assets/styles/main.scss');
 import 'theme/assets/styles/main.scss'
 
-(function(Drupal, drupalSettings) {
+(function(Drupal, drupalSettings, drupalDecoupled) {
 
   var MaterioTheme = function(){
 
@@ -33,6 +33,7 @@ import 'theme/assets/styles/main.scss'
       , _v_main_content;
     var _is_front = drupalSettings.path.isFront;
 
+
     console.log('drupalSettings', drupalSettings);
 
     //  ___      _ _
@@ -44,14 +45,22 @@ import 'theme/assets/styles/main.scss'
       initVues()
     }
 
+    function checkNoVuePages(){
+      return drupalDecoupled.sys_path != '/cart'
+      && drupalDecoupled.sys_path.indexOf('checkout') != 1;
+    }
+
     function initVues(){
-      initVRouter();
-      initVSiteBrandingBlock()
-      initVPagetitleBlock()
-      initVUserBlock()
-      initVHeaderMenu()
-      initVMainContent()
-      initVSearchBlock()
+      // only launch views if we are not in commerce pages
+      if(checkNoVuePages()){
+        initVRouter();
+        initVSiteBrandingBlock()
+        initVPagetitleBlock()
+        initVUserBlock()
+        initVHeaderMenu()
+        initVMainContent()
+        initVSearchBlock()
+      }
     }
 
     function initVRouter(){
@@ -252,4 +261,4 @@ import 'theme/assets/styles/main.scss'
 
   var materiotheme = new MaterioTheme();
 
-})(Drupal, drupalSettings);
+})(Drupal, drupalSettings, drupalDecoupled);

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

@@ -31,7 +31,7 @@
       :styles="{width:'500px', height:'100%'}"
     >
       <h2>Please login or register before continue.</h2>
-      <LoginRegister @onLogedIn="logedIn" />
+      <LoginRegister @onLogedIn="logedIn" @onRegistered="registered" />
     </Modal>
 
   </article>
@@ -85,7 +85,11 @@ export default {
     },
     logedIn () {
       console.log('Product: logedIn');
-      this.closeModal()
+      this.addtocart()
+    },
+    registered () {
+      console.log('Product: registered');
+      this.addtocart()
     },
     addtocart () {
       console.log("addtocart")
@@ -97,9 +101,11 @@ export default {
       }])
         .then(({ data }) => {
           console.log('product add to cart REST: data', data)
+          this.closeModal()
+          // TODO: redirect to /cart
         })
         .catch(( error ) => {
-            console.warn('Issue with pricing', error)
+            console.warn('Issue with product add to cart', error)
             Promise.reject(error)
         })
 

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

@@ -1,45 +0,0 @@
-<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/_Cart.vue

@@ -0,0 +1,35 @@
+<script>
+
+import Vue from 'vue'
+
+export default {
+  props: ['html'], // get the html from parent with props
+  data() {
+    return {
+      template: null // compiled template from html used in render
+    }
+  },
+  beforeMount() {
+    // console.log('Home beforeMount');
+    // compile the html src (coming from parent with props or from ajax call)
+    if(this.html){
+      console.log('html', this.html);
+      this.template = Vue.compile(this.html)
+      this.$options.staticRenderFns = []
+      this._staticTrees = []
+      this.template.staticRenderFns.map(fn => (this.$options.staticRenderFns.push(fn)))
+    }
+  },
+  render(h) {
+    if(!this.template){
+      return h('span', 'Loading ...')
+    }else{
+      return this.template.render.call(this)
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -7,7 +7,7 @@ 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'
+// import Cart from 'vuejs/components/Pages/Cart'
 
 Vue.use(VueRouter)
 
@@ -80,12 +80,12 @@ const routes = [
     name:'pricing',
     path: `${basePath}pricing`,
     component: Pricing
-  },
-  {
-    name:'cart',
-    path: `${basePath}cart`,
-    component: Cart
   }
+  // {
+  //   name:'cart',
+  //   path: `${basePath}cart`,
+  //   component: Cart
+  // }
 ]
 
 export default new VueRouter({