[FIX] product cart reactivity solved

controllers/main.py

@@ -133,7 +133,10 @@ class Sales(http.Controller):
                 'displayName': variant.display_name,
                 'ean13': variant.ean13,
                 'imageMedium': variant.image_medium,
-                'listPrice': variant.list_price
+                'listPrice': variant.list_price,
+                'quantity': 1,
+                'price': variant.list_price,
+                'discount': 0,
             } for variant in product.product_variant_ids if variant.active]
         } for product in request.env['product.template'].search([('sale_ok', '=', True), ('list_price', '>', 0), ('active', '=', True)])]
 
@@ -255,6 +258,9 @@ class Sales(http.Controller):
                 'displayName': variant.display_name,
                 'ean13': variant.ean13,
                 'imageMedium': variant.image_medium,
-                'listPrice': variant.list_price
+                'listPrice': variant.list_price,
+                'quantity': 1,
+                'price': variant.list_price,
+                'discount': 0,
             } for variant in product.product_variant_ids if variant.active]
         }

src/components/common/Cart.vue

@@ -4,7 +4,7 @@
             h2.currency-cart-total {{ totalInCurrencyFormat() }}
         .cart-items-wrapper
             transition-group(name='list' tag='ul' class='cart-items')
-                cart-item(v-for='(item, index) in items' :key='index' :index='index' :item='item')
+                cart-item(v-for='(item, index) in items' :key='index' :index='index' :item='item' @onChange='onItemChanged')
 </template>
 
 <script>
@@ -55,11 +55,22 @@
         },
         methods: {
             totalInCurrencyFormat() {
-                return this.total.toFixed(this.decimalPlaces).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,')
+                return this.total.toFixed(this.decimalPlaces).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1.')
             },
             computeTotal() {
+                let sum = 0
+
+                for (let item of this.items) {
+                    sum = sum + ((item.price || 1) * (item.quantity || 1))
+                }
+
+                this.total = sum
+
                 this.$emit('onTotalComputed', this.total)
             },
+            onItemChanged(item) {
+                this.computeTotal();
+            }
         },
         data() {
             return {

src/components/common/CartItem.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
     li.cart-item
-        h3.item-name
-        input.item-quantity(type='number' min='1')
+        h3.item-name {{ item.name || 'Sin Nombre' }}
+        input.item-quantity(type='number' min='1' :value='item.quantity')
         span.item-x x
-        span.item-price
+        span.item-price {{ item.price || 1 }}
         span.item-equals =
-        span.item-subtotal
+        span.item-subtotal {{ (item.price || 1) * (item.quantity || 1) }}
         .cart-item-options-wrapper
             .cart-item-options
                 .cart-item-option(class='fa fa-plus')
@@ -28,10 +28,16 @@
         },
         watch: {
             item: {
-                handler() {
-                    console.log('change item')
+                handler(value) {
+                    this.onChange(value)
                 },
-                deep: true
+                deep: true,
+                immediate: true
+            }
+        },
+        methods: {
+            onChange(item) {
+                this.$emit('onChange', item)
             }
         }
     }

src/store/modules/cart.js

@@ -37,8 +37,6 @@ const mutations = {
     [PUSH_TO_CART] (state, payload) {
         let productFound = state.cartItems.find(item => item.id === payload.id)
 
-        console.log(payload)
-
         if (productFound) {
             productFound.quantity = productFound.quantity + 1
             return
@@ -71,7 +69,7 @@ const actions = {
      * @param {*} payload 
      */
     [CHANGE_CART_TOTAL] ({ commit }, payload) {
-        commit(SET_CART_TOTAL, payload)   
+        commit(SET_CART_TOTAL, payload)
     }
 }