aboutsummaryrefslogtreecommitdiff
path: root/client
diff options
context:
space:
mode:
authorMateja <mail@matejamaric.com>2021-07-25 16:31:16 +0200
committerMateja <mail@matejamaric.com>2021-07-25 16:31:16 +0200
commit73751eff7688ec9994c098ba95f1c08fad210e31 (patch)
tree42cb89e78bcd2a1cbda8f79ad19cd49d151ccc89 /client
parent31067932d3426564966b7ec5038cc9a956add4d3 (diff)
downloadmevn-ecommerce-73751eff7688ec9994c098ba95f1c08fad210e31.tar.gz
mevn-ecommerce-73751eff7688ec9994c098ba95f1c08fad210e31.zip
Product page shows amount of product in cart.
Allows for removal of product from cart. Product page now uses Vuex instead of local values.
Diffstat (limited to 'client')
-rw-r--r--client/src/store/index.js41
-rw-r--r--client/src/views/Product.vue49
2 files changed, 59 insertions, 31 deletions
diff --git a/client/src/store/index.js b/client/src/store/index.js
index 3d612c7..086c544 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -4,6 +4,7 @@ import axios from 'axios';
export default createStore({
state: {
products: [],
+ currentProduct: {},
cart: []
},
getters: {
@@ -22,23 +23,48 @@ export default createStore({
let sum = 0;
state.cart.forEach(x => sum += x.price * x.quantity);
return sum;
+ },
+ getCurrentProduct(state) {
+ return state.currentProduct;
+ },
+ getCurrentProductImgUrl(state) {
+ return `${process.env.VUE_APP_ROOT_API}/${state.currentProduct.imagePath}`;
+ },
+ getCurrentProductQuantity(state) {
+ let amount = 0
+ state.cart.forEach(x => {
+ if (x.id == state.currentProduct._id)
+ amount = x.quantity;
+ });
+ return amount;
}
},
mutations: {
setProducts(state, products) {
state.products = products;
},
- addToCart(state, product) {
- let foundProduct = state.cart.find(x => x.id == product._id);
+ setCurrentProduct(state, product) {
+ state.currentProduct = product;
+ },
+ addToCart(state) {
+ let foundProduct = state.cart.find(x => x.id == state.currentProduct._id);
if (foundProduct)
foundProduct.quantity++;
else
state.cart.push({
- id: product._id,
- name: product.name,
- price: product.price,
+ id: state.currentProduct._id,
+ name: state.currentProduct.name,
+ price: state.currentProduct.price,
quantity: 1
});
+ },
+ removeFromCart(state) {
+ let foundProduct = state.cart.find(x => x.id == state.currentProduct._id);
+ if (foundProduct) {
+ foundProduct.quantity--;
+ if (foundProduct.quantity == 0)
+ state.cart = state.cart.filter(x => x.id != foundProduct.id);
+ }
}
},
actions: {
@@ -46,6 +72,11 @@ export default createStore({
await axios.get(`${process.env.VUE_APP_ROOT_API}/products`)
.then(response => context.commit('setProducts', response.data))
.catch(error => console.error(error));
+ },
+ async pullProduct(context, productId) {
+ await axios.get(`${process.env.VUE_APP_ROOT_API}/products/${productId}`)
+ .then(response => context.commit('setCurrentProduct', response.data))
+ .catch(error => console.error(error));
}
},
modules: {
diff --git a/client/src/views/Product.vue b/client/src/views/Product.vue
index 11643c1..ff43857 100644
--- a/client/src/views/Product.vue
+++ b/client/src/views/Product.vue
@@ -4,15 +4,19 @@
<div class="row g-0">
<div class="col-md-6">
- <img :src="productImg" class="img-fluid rounded-start">
+ <img :src="curProductImg" class="img-fluid rounded-start">
</div>
<div class="col-md-6">
<div class="card-body">
- <h3 class="card-title" v-text="productName"></h3>
- <b><i>Price: ${{ productPrice }}</i></b><br/>
- <p class="card-text" v-text="productDescription"></p>
+ <h3 class="card-title" v-text="curProduct.name"></h3>
+ <h6 class="card-subtitle mb-2 text-muted">Price: ${{ curProduct.price }}</h6>
+ <p class="card-text" v-text="curProduct.description"></p>
+ <p class="card-text"><small class="text-muted">Amount: {{curProductQuantity}}</small></p>
+ </div>
+ <div class="card-footer">
<div class="btn btn-dark" @click="buy">Add to cart</div>
+ <div class="btn btn-secondary ms-3" v-show="curProductQuantity" @click="remove">Remove from cart</div>
</div>
</div>
@@ -22,35 +26,28 @@
</template>
<script>
-import axios from 'axios';
-
export default {
name: 'Product',
async mounted() {
- await axios.get(`${process.env.VUE_APP_ROOT_API}/products/${this.$route.params.id}`)
- .then(response => {
- this.productName = response.data.name;
- this.productDescription = response.data.description;
- this.productImg = `${process.env.VUE_APP_ROOT_API}/${response.data.imagePath}`;
- this.productPrice = response.data.price;
- })
- .catch(error => console.error(error));
+ this.$store.dispatch('pullProduct', this.$route.params.id);
},
- data() {
- return {
- productName: String,
- productDescription: String,
- productImg: String,
- productPrice: Number
- }
+ computed: {
+ curProduct() {
+ return this.$store.getters.getCurrentProduct;
+ },
+ curProductImg() {
+ return this.$store.getters.getCurrentProductImgUrl;
+ },
+ curProductQuantity() {
+ return this.$store.getters.getCurrentProductQuantity;
+ },
},
methods: {
buy() {
- this.$store.commit('addToCart', {
- _id: this.$route.params.id,
- name: this.productName,
- price: this.productPrice
- });
+ this.$store.commit('addToCart');
+ },
+ remove() {
+ this.$store.commit('removeFromCart');
}
}
}