[FIX] names and functions in products card code

src/components/CartItems.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
     transition-group(name="list" tag="ul" class="cart-items")
-        cart-item(v-for="item in items" v-bind:key="item" :item="item" :symbol="symbol")
+        cart-item(v-for="item in items" :key="item" :item="item" :symbol="symbol")
 </template>
 
 <script>

src/components/ProductCard.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
-    .product-card(@click="selectProduct({ data })")
-        h2.product-title {{ data.name }}
-        img.product-image(:src="this.data.image_medium ? 'data:image/png;base64,' + this.data.image_medium : '/web/static/src/img/placeholder.png'")
+    .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
             span {{ getPrice() }}
         .product-qty
@@ -12,7 +12,7 @@
 
     export default {
         props: {
-            data: {
+            item: {
                 type: Object,
                 default: () => {
                     return {}
@@ -42,16 +42,7 @@
         },
         methods: {
             getPrice() {
-                return accounting.formatMoney(this.data.list_price, this.symbol, this.decimals, this.separator, ',')
-            },
-            drawImage() {
-                let ctx = this.$el.querySelector('.product-image').getContext('2d')
-                let img = new Image()
-                img.onload = () => {
-                    ctx.drawImage(img, 0, 0, 80, 80)
-                }
-                console.log(this.data.image_medium)
-                img.src = this.data.image_medium ? 'data:image/png;base64,' + this.data.image_medium : '/web/static/src/img/placeholder.png'
+                return accounting.formatMoney(this.item.list_price, this.symbol, this.decimals, this.separator, ',')
             },
             selectVariant() {
                 this.$modal.show('variant-selector')
@@ -59,10 +50,6 @@
             ...mapActions([
                 'selectProduct'
             ])
-        },
-        mounted() {
-            // this.drawImage()
-            // console.log(this)
         }
     }
 </script>

src/components/ProductsGrid.vue

@@ -1,7 +1,6 @@
 <template lang="pug">
     .products-grid
-        template(v-for="product in products")
-            product-card(:data="product" :symbol="symbol")
+        product-card(v-for="product in products" :key="product" :item="product" :symbol="symbol")
         product-selector
 
 </template>

src/store/modules/products.js

@@ -36,13 +36,13 @@ const actions = {
         })
     },
     selectProduct({ commit, dispatch }, payload) {
-        if (payload.data.variant_count > 1) {
+        if (payload.item.variant_count > 1) {
             commit('setSelectedProduct', {
-                product: payload.data
+                product: payload.item
             })
         } else {
             dispatch('addToCart', {
-                product: payload.data.variants[0]
+                product: payload.item.variants[0]
             })
         }
     },