[ADD] fake data to design cart

src/components/Cart.vue

@@ -1,22 +1,25 @@
 <template lang="pug">
     .cart
-        <cart-total />
-        <cart-list />
-        <cart-options />
+        cart-total
+        cart-list(data: "items")
+        cart-options
 </template>
 
 <script>
     import CartTotal from '@/components/CartTotal'
     import CartList from '@/components/CartList'
     import CartOptions from '@/components/CartOptions'
+    import { mapGetters } from 'vuex'
 
     export default {
         components: {
             'cart-total': CartTotal,
             'cart-list': CartList,
             'cart-options': CartOptions
-        }
-    
+        },
+        computed: mapGetters({
+            items: 'getCartItems'
+        })
     }
 </script>
 
@@ -24,7 +27,5 @@
     .cart
         width: 100%
         height: 100%
-        display: flex
-        flex-direction: column
 </style>
 

src/components/CartItem.vue

@@ -1,10 +1,21 @@
 <template lang="pug">
     .cart-item
+        h3 {{ data.name }}
 </template>
 
 <script>
     export default {
-    
+        props: {
+            data: {
+                type: Object,
+                default: () => {
+                    return {}
+                }
+            }
+        },
+        mounted() {
+            console.log(this)
+        }
     }
 </script>
 
@@ -12,6 +23,6 @@
     .cart-item
         width: 100%
         height: 65px
-        margin-top: 5px
+        margin-bottom: 5px
         border: 1px solid #d3d3d3
 </style>

src/components/CartList.vue

@@ -1,18 +1,25 @@
 <template lang="pug">
     .cart-list
-        <cart-item />
-        <cart-item />
-        <cart-item />
-        <cart-item />
-        <cart-item />
+        template(v-for="item in items")
+            cart-item(:data="item")
 </template>
 
 <script>
     import CartItem from '@/components/CartItem'
+    import { mapGetters, mapActions } from 'vuex'
 
     export default {
         components: {
             'cart-item': CartItem
+        },
+        computed: mapGetters({
+            items: 'getCartItems'
+        }),
+        methods: {
+            ...mapActions([
+                'addToCart',
+                'removeFromCart'
+            ])
         }
     }
 </script>
@@ -22,6 +29,7 @@
     .cart-list
         width: 100%
         height: calc(100% - 100px)
+        padding: 10px 0
         overflow-y: auto
 </style>
 

src/store/modules/cart.js

@@ -1,10 +1,49 @@
 const state = {
-    cart: [],
+    cart: [
+        {
+            id: 1,
+            name: "Product 001",
+            price: 3500,
+            qty: 2,
+            subtotal: 7000
+        },
+        {
+            id: 2,
+            name: "Product 002",
+            price: 4000,
+            qty: 1,
+            subtotal: 4000
+        },
+        {
+            id: 3,
+            name: "Product 003",
+            price: 3500,
+            qty: 1,
+            subtotal: 3500
+        },
+        {
+            id: 4,
+            name: "Product 004",
+            price: 3800,
+            qty: 2,
+            subtotal: 7600
+        },
+        {
+            id: 5,
+            name: "Product 005",
+            price: 1000,
+            qty: 3,
+            subtotal: 3000
+        }
+    ],
     selectedCart: []
 }
 
 const getters = {
-    isEmpty (state) {
+    getCartItems(state) {
+        return state.cart
+    },
+    isEmpty(state) {
         return state.cart.legth !== 0
     }
 }
@@ -14,7 +53,12 @@ const mutations = {
 }
 
 const actions = {
+    addToCart(state) {
 
+    },
+    removeFromCart(state) {
+
+    }
 }
 
 export default {

src/store/modules/products.js

@@ -39,6 +39,4 @@ export default {
     getters,
     mutations,
     actions
-}
-
-console.log(openerp)
+}