[ADD] cart items partially implemented

src/components/CartItem.vue

@@ -6,9 +6,18 @@
             span.item-price {{ getPrice() }}
             span.item-equals =
             span.item-subtotal {{ getSubtotal() }}
+
+            .cart-item-options-wrapper
+                .cart-item-options
+                    .cart-item-option(class="fa fa-plus" @click="add(item)")
+                    .cart-item-option(class="fa fa-minus" @click="subtract(item)")
+                    .cart-item-option(class="fa fa-money")
+                    .cart-item-option(class="fa fa-trash" @click="remove(item)")
 </template>
 
 <script>
+    import { mapActions } from 'vuex'
+
     export default {
         props: {
             item: {
@@ -33,6 +42,15 @@
             }
         },
         methods: {
+            add(item) {
+                this.addToCart(item)
+            },
+            subtract(item) {
+                this.subtractFromCart(item)
+            },
+            remove(item) {
+                this.removeFromCart(item)
+            },
             getSymbol() {
                 return this.symbol
             },
@@ -41,7 +59,12 @@
             },
             getSubtotal() {
                 return accounting.formatMoney(this.item.list_price * this.item.qty, this.symbol, 0, this.separator, ',')
-            }
+            },
+            ...mapActions([
+                'addToCart',
+                'subtractFromCart',
+                'removeFromCart'
+            ])
         },
         mounted() {
             this.$set(this.item, 'qty', 1)
@@ -56,11 +79,11 @@
         list-style: none outside none
         border-bottom: 1px solid #d3d3d3
         box-sizing: border-box
+        position: relative
 
         &:hover
             background: #f5f5f5
             transition-duration: 1s
-            cursor: pointer
 
         .item-name
             width: 100%
@@ -72,7 +95,7 @@
 
         .item-quantity
             width: 50px
-            height: 30px
+            height: 28px
             margin-top: 6px
             text-align: right
             float: left
@@ -106,4 +129,45 @@
             text-align: right
             float: right
             font-weight: bold
+
+        .cart-item-options-wrapper
+            width: 100%
+            height: 20px
+            position: absolute
+            bottom: 0
+            display: flex
+            justify-content: center
+
+            .cart-item-options
+                width: 100px
+                height: 20px
+                border: 1px solid #d3d3d3
+                border-bottom: none
+                display: flex
+                justify-content: center
+
+                .cart-item-option
+                    width: 18px
+                    height: 18px
+                    margin: 0 5px
+                    color: #666
+
+                    &:hover
+                        cursor: pointer
+
+                    &.fa
+                        padding-left: 2px
+                        line-height: 20px
+
+                        &.fa-plus:hover
+                            color: #2196f3
+
+                        &.fa-minus:hover
+                            color: #ffc107
+
+                        &.fa-money:hover
+                            color: #4caf50
+
+                        &.fa-trash:hover
+                            color: #f44336
 </style>

src/components/ProductCard.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-    .product-card(@click="selectProduct({ item })")
+    .product-card(@click="selectProduct(item)")
         h2.product-title {{ item.name }}
         img.product-image(:src="this.item.image_medium ? 'data:image/png;base64,' + this.item.image_medium : '/web/static/src/img/placeholder.png'")
         .product-price

src/store/modules/cart.js

@@ -25,6 +25,14 @@ const mutations = {
             state.cart = [payload.product, ...state.cart]
         }
     },
+    subtractFromCart(state, payload) {
+        let finded = state.cart.find(item => item.id == payload.product.id)
+        finded.qty = finded.qty - 1
+    },
+    removeFromCart(state, payload) {
+        let findedIndex = state.cart.findIndex(item => item.id == payload.product.id)
+        state.cart.splice(findedIndex, 1)
+    },
     calculateTotal(state) {
         let sum = 0
 
@@ -38,12 +46,35 @@ const mutations = {
 
 const actions = {
     addToCart({ commit, dispatch }, payload) {
-        commit('addToCart', payload)
+        commit('addToCart', {
+            product: payload
+        })
+        
         commit('calculateTotal')
 
         // dispatch('setSelectedProduct', {
         //     product: null
         // })
+    },
+    subtractFromCart({ commit, dispatch}, payload) {
+        if (payload.qty > 1) {
+            commit('subtractFromCart', {
+                product: payload
+            })
+        } else {
+            commit('removeFromCart', {
+                product: payload
+            })     
+        }
+        
+        commit('calculateTotal')
+    },
+    removeFromCart({ commit, dispatch }, payload) {
+        commit('removeFromCart', {
+            product: payload
+        })
+        
+        commit('calculateTotal')
     }
 }
 

src/store/modules/products.js

@@ -58,14 +58,12 @@ const actions = {
         })
     },
     selectProduct({ commit, dispatch }, payload) {
-        if (payload.item.variant_count > 1) {
+        if (payload.variant_count > 1) {
             commit('setSelectedProduct', {
-                product: payload.item
+                product: payload
             })
         } else {
-            dispatch('addToCart', {
-                product: payload.item.variants[0]
-            })
+            dispatch('addToCart', payload.variants[0])
         }
     },
     selectVariant({ commit, dispatch }, payload) {
@@ -76,9 +74,7 @@ const actions = {
         if (!payload)
             return
         
-        dispatch('addToCart', {
-            product: payload
-        })
+        dispatch('addToCart', payload)
     },
     filterProducts({ commit }, payload) {
         commit('applyProductsFilter', payload)