various changes
This commit is contained in:
parent
6c2242ad92
commit
b80ba07637
|
@ -19,44 +19,11 @@ export default {
|
|||
provide() {
|
||||
return {
|
||||
isLoggedIn: this.isLoggedIn,
|
||||
cart: this.cart,
|
||||
addProductToCart: this.addProductToCart,
|
||||
removeProductFromCart: this.removeProductFromCart,
|
||||
login: this.login,
|
||||
logout: this.logout,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
addProductToCart(productData) {
|
||||
const productInCartIndex = this.cart.items.findIndex(
|
||||
(ci) => ci.productId === productData.id
|
||||
);
|
||||
|
||||
if (productInCartIndex >= 0) {
|
||||
this.cart.items[productInCartIndex].qty++;
|
||||
} else {
|
||||
const newItem = {
|
||||
productId: productData.id,
|
||||
title: productData.title,
|
||||
image: productData.image,
|
||||
price: productData.price,
|
||||
qty: 1,
|
||||
};
|
||||
this.cart.items.push(newItem);
|
||||
}
|
||||
this.cart.qty++;
|
||||
this.cart.total += productData.price;
|
||||
},
|
||||
|
||||
removeProductFromCart(prodId) {
|
||||
const productInCartIndex = this.cart.items.findIndex(
|
||||
(cartItem) => cartItem.productId === prodId
|
||||
);
|
||||
const prodData = this.cart.items[productInCartIndex];
|
||||
this.cart.items.splice(productInCartIndex, 1);
|
||||
this.cart.qty -= prodData.qty;
|
||||
this.cart.total -= prodData.price * prodData.qty;
|
||||
},
|
||||
login() {
|
||||
this.isLoggedIn = true;
|
||||
},
|
||||
|
|
|
@ -16,12 +16,14 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="item__total">Total: ${{ itemTotal }}</div>
|
||||
<button @click="remove">Remove</button>
|
||||
<button @click="removeProductFromCart">Remove</button>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex';
|
||||
|
||||
export default {
|
||||
inject: ['removeProductFromCart'],
|
||||
props: ['prodId', 'title', 'image', 'price', 'qty'],
|
||||
|
@ -31,9 +33,7 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
remove() {
|
||||
this.removeProductFromCart(this.prodId);
|
||||
}
|
||||
...mapActions('cart', ['removeProductFromCart'])
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
@ -83,4 +83,4 @@ button:active {
|
|||
background-color: #53001c;
|
||||
border-color: #53001c;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
@ -1,10 +1,12 @@
|
|||
<template>
|
||||
<section>
|
||||
<h2>Your Cart</h2>
|
||||
<h3>Total Amount: <base-badge mode="elegant">${{ cartTotal }}</base-badge></h3>
|
||||
<h3>
|
||||
Total Amount: <base-badge mode="elegant">${{ finalTotal }}</base-badge>
|
||||
</h3>
|
||||
<ul>
|
||||
<cart-item
|
||||
v-for="item in cart.items"
|
||||
v-for="item in items"
|
||||
:key="item.productId"
|
||||
:prod-id="item.productId"
|
||||
:title="item.title"
|
||||
|
@ -18,17 +20,15 @@
|
|||
|
||||
<script>
|
||||
import CartItem from '../components/cart/CartItem.vue';
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
inject: ['cart'],
|
||||
components: {
|
||||
CartItem,
|
||||
},
|
||||
computed: {
|
||||
cartTotal() {
|
||||
return this.cart.total.toFixed(2);
|
||||
}
|
||||
}
|
||||
...mapGetters('cart', ['items', 'finalTotal'])
|
||||
},
|
||||
components: {
|
||||
CartItem
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
@ -46,7 +46,7 @@ h2 {
|
|||
}
|
||||
|
||||
h3 {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
@ -54,4 +54,4 @@ ul {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
export default {
|
||||
addProductToCart(context, payload) {
|
||||
context.commit('addProductToCart', payload)
|
||||
},
|
||||
removeProductFromCart(context, payload) {
|
||||
context.commit('removeProductFromCart', payload)
|
||||
}
|
||||
}
|
|
@ -0,0 +1,5 @@
|
|||
export default {
|
||||
finalTotal(state) {
|
||||
return state.total.toFixed(2);
|
||||
}
|
||||
};
|
|
@ -1,11 +1,17 @@
|
|||
//import counterActions from './actions.js';
|
||||
//import counterGetters from './getters.js';
|
||||
//import counterMutations from './mutations.js';
|
||||
import cartActions from './actions.js';
|
||||
import cartGetters from './getters.js';
|
||||
import cartMutations from './mutations.js';
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state() {
|
||||
return {
|
||||
items: [],
|
||||
total: 0,
|
||||
qty: 0
|
||||
};
|
||||
},
|
||||
actions: cartActions,
|
||||
getters: cartGetters,
|
||||
mutations: cartMutations
|
||||
};
|
||||
|
|
|
@ -0,0 +1,32 @@
|
|||
export default {
|
||||
addProductToCart(state, productData) {
|
||||
const productInCartIndex = state.items.findIndex(
|
||||
ci => ci.productId === productData.id
|
||||
);
|
||||
|
||||
if (productInCartIndex >= 0) {
|
||||
state.items[productInCartIndex].qty++;
|
||||
} else {
|
||||
const newItem = {
|
||||
productId: productData.id,
|
||||
title: productData.title,
|
||||
image: productData.image,
|
||||
price: productData.price,
|
||||
qty: 1
|
||||
};
|
||||
state.items.push(newItem);
|
||||
}
|
||||
state.qty++;
|
||||
state.total += productData.price;
|
||||
},
|
||||
|
||||
removeProductFromCart(state, prodId) {
|
||||
const productInCartIndex = state.items.findIndex(
|
||||
cartItem => cartItem.productId === prodId
|
||||
);
|
||||
const prodData = state.items[productInCartIndex];
|
||||
state.items.splice(productInCartIndex, 1);
|
||||
state.qty -= prodData.qty;
|
||||
state.total -= prodData.price * prodData.qty;
|
||||
},
|
||||
};
|
|
@ -1,6 +1,4 @@
|
|||
//import counterActions from './actions.js';
|
||||
import productGetters from './getters.js';
|
||||
//import counterMutations from './mutations.js';
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
|
|
Reference in New Issue