better pricing->loggin->checkoutflow transition

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -2232,6 +2232,11 @@ article.card{
   display: flex;
   flex-flow: row nowrap;
 
+  &.loading{
+    transition: all 0.3s ease-in-out;
+    opacity: 0.5;
+  }
+
   article.product,
   .views-row{
     flex:0 0 33%;

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

@@ -56,7 +56,7 @@ export default {
         },
         // settings
         {
-          // name: `modal-${this.item.id}`,
+          name: 'modal-loginregister',
           draggable: false,
           classes: 'vm--modale-loginregister',
           width: '500px',
@@ -107,6 +107,12 @@ export default {
     },
     addtocart (variation_id) {
       console.log('addtocart')
+
+      // transition
+      this.$modal.hide('modal-loginregister')
+      document.getElementById('pricing').classList.add('loading')
+
+      // handle the cart then redirect to checkout flow
       this.getCarts()
         .then(({ data }) => {
           console.log('current user carts: data', data)