add to cart links for products in home

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

@@ -25,7 +25,7 @@
 
     </aside>
 
-    <Modal
+    <!-- <Modal
       v-if="showLoginModal"
       @close="closeModal"
       :styles="{width:'500px', height:'350px'}"
@@ -38,132 +38,44 @@
           @onRegistered="onRegistered"
         />
       </section>
-    </Modal>
+    </Modal> -->
 
   </article>
 </template>
 
 <script>
 
-import { REST } from 'vuejs/api/rest-axios'
+// import { REST } from 'vuejs/api/rest-axios'
 import router from 'vuejs/route'
-import { mapState, mapActions } from 'vuex'
-import Modal from 'vuejs/components/Helper/Modal'
-import LoginRegister from 'vuejs/components/Helper/LoginRegister'
+// import { mapState, mapActions } from 'vuex'
+import productsMixins from 'vuejs/components/productsMixins'
+// import Modal from 'vuejs/components/Helper/Modal'
+// import LoginRegister from 'vuejs/components/Helper/LoginRegister'
 
-let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
+// let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
 
 export default {
   name: "Product",
   router,
   props: ['product'],
+  mixins: [productsMixins],
   data(){
     return {
       quantity: 1,
-      showLoginModal:false
+      // showLoginModal:false
     }
-  },
-  computed: {
-    ...mapState({
-      isloggedin: state => state.User.isloggedin,
-      isAdherent: state => state.User.isAdherent,
-      csrftoken: state => state.User.csrftoken
-    })
-  },
-  methods:{
-    // ...mapActions({
-    //   userLogin: 'User/userLogin'
-    // }),
-    closeModal () {
-      this.showLoginModal = false;
-    },
-    checkaddtocart(e, variation_id) {
-      console.log('checkaddtocart')
-
-      if (!this.isloggedin) {
-        // show popup for login or register
-        // login or register event will be catched by onLogedin or onRegistered
-        this.showLoginModal = variation_id
-      } else {
-        // if already logedin directly goes to cart operations
-        this.addtocart(variation_id)
-      }
-    },
-    // event bubbled from modal login form
-    onLogedIn (variation_id) {
-      console.log('Product: onLogedIn. variation_id', variation_id)
-      this.addtocart(variation_id)
-    },
-    // event bubbled from modal register form
-    onRegistered (variation_id) {
-      console.log('Product: onRegistered. variation_id', variation_id)
-      this.addtocart(variation_id)
-    },
-    getCarts () {
-      // this is bugging on stage
-      return REST.get(`/cart?_format=json`, {}, {'X-CSRF-Token':this.csrftoken})
-        // .then(({ data }) => {
-        //   console.log('current user carts: data', data)
-        // })
-        .catch((error) => {
-            console.warn('Issue with get cart', error)
-            Promise.reject(error)
-        })
-    },
-    deleteCart (order_id) {
-      console.log('deleting cart ', order_id)
-      return REST.delete(`/cart/${order_id}/items?_format=json`)
-        .then(({ data }) => {
-          console.log(`product cart ${order_id} deleted: data`, data)
-        })
-        .catch((error) => {
-            console.warn(`Issue with cart ${order_id} deleting`, error)
-            Promise.reject(error)
-        })
-    },
-    clearCarts (data) {
-      let promises = [];
-      // clear each cart as a promise
-      for (let i = 0; i < data.length; i++) {
-        promises.push(this.deleteCart(data[i].order_id))
-      }
-      // return all the promises as one
-      return Promise.all(promises)
-    },
-    addtocart (variation_id) {
-      console.log('addtocart')
-      this.getCarts()
-        .then(({data}) => {
-          console.log('current user carts: data', data)
-          this.clearCarts(data)
-            .then(() => {
-              console.log('all carts cleared')
-              // fill the cart with new product
-              REST.post(`/cart/add?_format=json`, [{
-                "purchased_entity_type": "commerce_product_variation",
-                "purchased_entity_id": variation_id,
-                "quantity": this.quantity
-              }])
-                .then(({ data }) => {
-                  console.log('product added to cart: data', data)
-                  this.closeModal()
-                  // redirect to /cart
-                  // window.location.href = "/cart"
-                  // TODO: redirect to checkout instead of cart
-                  window.location.href = `/checkout/${data[0].order_id}/order_information`
-                })
-                .catch((error) => {
-                    console.warn('Issue with product add to cart', error)
-                    Promise.reject(error)
-                })
-            })
-        })
-    }
-  },
-  components: {
-    Modal,
-    LoginRegister
   }
+  // ,
+  // methods:{
+  //   // ...mapActions({
+  //   //   userLogin: 'User/userLogin'
+  //   // })
+  // }
+  // ,
+  // components: {
+  //   Modal,
+  //   LoginRegister
+  // }
 }
 </script>
 

web/themes/custom/materiotheme/vuejs/components/Form/LoginForm.vue

@@ -25,7 +25,7 @@ export default {
       // vuejs attributes a inserted by form alter in same module
       MA.get(`/materio_user/login_form`)
         .then(({data}) => {
-          console.log('getLoginForm data', data)
+          // console.log('getLoginForm data', data)
           this.form = Vue.compile(data.rendered)
           this.$options.staticRenderFns = [];
           this._staticTrees = [];

web/themes/custom/materiotheme/vuejs/components/Form/RegisterForm.vue

@@ -38,7 +38,7 @@ export default {
       // vuejs attributes a inserted by form alter in same module
       MA.get(`/materio_user/register_form`)
         .then(({data}) => {
-          console.log("getRegisterForm data", data)
+          // console.log("getRegisterForm data", data)
           this.form = Vue.compile(data.rendered)
           this.$options.staticRenderFns = [];
           this._staticTrees = [];

web/themes/custom/materiotheme/vuejs/components/Helper/LoginRegister.vue

@@ -1,13 +1,16 @@
 <template>
   <div id="login-register">
-    <section class="login">
-      <h3>{{ $t("default.Login") }} </h3>
-      <LoginForm @onLogedIn="onLogedIn" />
-    </section>
-    <section class="register">
-      <h3>{{ $t("default.Register a new account") }}</h3>
-      <RegisterForm @onRegistered="onRegistered" />
-    </section>
+    <h2>{{ $t("materio.Please login or create a new account") }}</h2>
+    <div class="wrapper">
+      <section class="login">
+        <h3>{{ $t("default.Login") }} </h3>
+        <LoginForm @onLogedIn="onLogedIn" />
+      </section>
+      <section class="register">
+        <h3>{{ $t("default.Register a new account") }}</h3>
+        <RegisterForm @onRegistered="onRegistered" />
+      </section>
+    </div>
   </div>
 </template>
 
@@ -24,17 +27,19 @@ export default {
     password:null,
     registerEmail:null
   }),
-  props:['callbackargs'],
+  props:['callbackargs', 'onLogedInBack', 'onRegisteredBack'],
   methods: {
     ...mapActions({
       userLogin: 'User/userLogin',
       userRegister: 'User/userRegister'
     }),
     onLogedIn () {
-      this.$emit('onLogedIn', this.callbackargs)
+      // this.$emit('onLogedIn', this.callbackargs)
+      this.onLogedInBack(this.callbackargs)
     },
     onRegistered () {
-      this.$emit('onRegistered', this.callbackargs)
+      // this.$emit('onRegistered', this.callbackargs)
+      this.onRegisteredBack(this.callbackargs)
     }
   },
   components: {

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

@@ -80,7 +80,7 @@
           ></div>
         </div>
         <aside class="linked-materials">
-          <h3 class="field__label">{{$t("materio.Linked Materials")}}</h3>
+          <h3 class="field__label">{{ $t('materio.Linked Materials') }}</h3>
           <div class="cards-list">
             <ul class="">
               <li v-for="node in article.linked_materials" v-bind:key="node.id">

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

@@ -1,9 +1,11 @@
 <script>
 
 import Vue from 'vue'
+import productsMixins from 'vuejs/components/productsMixins'
 
 export default {
   props: ['html', 'full'], // get the html from parent with props
+  mixins: [productsMixins],
   data() {
     return {
       template: null, // compiled template from html used in render
@@ -151,7 +153,7 @@ export default {
   },
   watch: {
     html: function(val) {
-      console.log('html prop changed', val)
+      // console.log('html prop changed', val)
       this.compileTemplate()
     }
   }

web/themes/custom/materiotheme/vuejs/components/productsMixins.js

@@ -0,0 +1,138 @@
+// https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266/5
+
+import { REST } from 'vuejs/api/rest-axios'
+import Modal from 'vuejs/components/Helper/Modal'
+import LoginRegister from 'vuejs/components/Helper/LoginRegister'
+import { mapState } from 'vuex'
+
+export default {
+  components: {
+    Modal,
+    LoginRegister
+  },
+  computed: {
+    ...mapState({
+      isloggedin: state => state.User.isloggedin,
+      isAdherent: state => state.User.isAdherent,
+      csrftoken: state => state.User.csrftoken
+    })
+  },
+  methods: {
+    closeModal () {
+      this.showLoginModal = false
+    },
+    checkaddtocart (e, variation_id) {
+      console.log('checkaddtocart', e, variation_id, this.isloggedin)
+
+      if (!this.isloggedin) {
+        // show popup for login or register
+        // login or register event will be catched by onLogedin or onRegistered
+        // this.showLoginModal = variation_id
+        this.showLoginModal(variation_id)
+      } else {
+        // if already logedin directly goes to cart operations
+        this.addtocart(variation_id)
+      }
+    },
+    showLoginModal (variation_id) {
+      this.$modal.show(
+        LoginRegister,
+        // props
+        {
+          // item: this.item,
+          callbackargs: { variation_id: variation_id },
+          // close: (variation_id) => { this.closeModal(variation_id) },
+          onLogedInBack: (cba) => { this.onLogedIn(cba.variation_id) },
+          onRegisteredBack: (cba) => { this.onRegistered(cba.variation_id) }
+          // // not really an event
+          // // more a callback function passed as prop to the component
+          // addNoteId: (id) => {
+          //   // no needs to refresh the entire item via searchresults
+          //   // plus if we are in article, there is not searchresults
+          //   // this.refreshItem({id: this.item.id})
+          //   // instead create the note id directly
+          //   this.item.note = { id: id }
+          // }
+        },
+        // settings
+        {
+          // name: `modal-${this.item.id}`,
+          draggable: false,
+          classes: 'vm--modale-loginregister',
+          width: '500px',
+          height: '350px'
+        }
+      )
+    },
+    // event bubbled from modal login form
+    onLogedIn (variation_id) {
+      console.log('Product: onLogedIn. variation_id', variation_id)
+      this.addtocart(variation_id)
+    },
+    // event bubbled from modal register form
+    onRegistered (variation_id) {
+      console.log('Product: onRegistered. variation_id', variation_id)
+      this.addtocart(variation_id)
+    },
+    getCarts () {
+      // this is bugging on stage
+      return REST.get('/cart?_format=json', {}, { 'X-CSRF-Token': this.csrftoken })
+        // .then(({ data }) => {
+        //   console.log('current user carts: data', data)
+        // })
+        .catch((error) => {
+          console.warn('Issue with get cart', error)
+          Promise.reject(error)
+        })
+    },
+    deleteCart (order_id) {
+      console.log('deleting cart ', order_id)
+      return REST.delete(`/cart/${order_id}/items?_format=json`)
+        .then(({ data }) => {
+          console.log(`product cart ${order_id} deleted: data`, data)
+        })
+        .catch((error) => {
+          console.warn(`Issue with cart ${order_id} deleting`, error)
+          Promise.reject(error)
+        })
+    },
+    clearCarts (data) {
+      const promises = []
+      // clear each cart as a promise
+      for (let i = 0; i < data.length; i++) {
+        promises.push(this.deleteCart(data[i].order_id))
+      }
+      // return all the promises as one
+      return Promise.all(promises)
+    },
+    addtocart (variation_id) {
+      console.log('addtocart')
+      this.getCarts()
+        .then(({ data }) => {
+          console.log('current user carts: data', data)
+          this.clearCarts(data)
+            .then(() => {
+              console.log('all carts cleared')
+              // fill the cart with new product
+              REST.post('/cart/add?_format=json', [{
+                purchased_entity_type: 'commerce_product_variation',
+                purchased_entity_id: variation_id,
+                quantity: this.quantity
+              }])
+                .then(({ data }) => {
+                  console.log('product added to cart: data', data)
+                  this.closeModal()
+                  // redirect to /cart
+                  // window.location.href = "/cart"
+                  // TODO: redirect to checkout instead of cart
+                  window.location.href = `/checkout/${data[0].order_id}/order_information`
+                })
+                .catch((error) => {
+                  console.warn('Issue with product add to cart', error)
+                  Promise.reject(error)
+                })
+            })
+        })
+    }
+  }
+}