aboutsummaryrefslogtreecommitdiff
path: root/client
diff options
context:
space:
mode:
authorMateja <mail@matejamaric.com>2021-07-25 00:55:53 +0200
committerMateja <mail@matejamaric.com>2021-07-25 00:55:53 +0200
commit2e4678c40a7c92a981bf67845a2888893ea9b758 (patch)
tree70f14941890823db362e8af543e7d6c84618f3ea /client
parent54e471b5741a7569001067e476467c4ff6f6a7de (diff)
downloadmevn-ecommerce-2e4678c40a7c92a981bf67845a2888893ea9b758.tar.gz
mevn-ecommerce-2e4678c40a7c92a981bf67845a2888893ea9b758.zip
Boilerplate checkout cart.
Diffstat (limited to 'client')
-rw-r--r--client/src/store/index.js28
-rw-r--r--client/src/views/Checkout.vue30
-rw-r--r--client/src/views/Product.vue6
3 files changed, 60 insertions, 4 deletions
diff --git a/client/src/store/index.js b/client/src/store/index.js
index d2fe9b7..2454977 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -3,16 +3,42 @@ import axios from 'axios';
export default createStore({
state: {
- products: []
+ products: [],
+ cart: []
},
getters: {
getProducts(state) {
return state.products;
+ },
+ getCart(state) {
+ return state.cart;
+ },
+ getCartSize(state) {
+ let sum = 0;
+ state.cart.forEach(x => sum += x.quantity);
+ return sum;
+ },
+ getCartPrice(state) {
+ let sum = 0;
+ state.cart.forEach(x => sum += x.price * x.quantity);
+ return sum;
}
},
mutations: {
setProducts(state, products) {
state.products = products;
+ },
+ addToCart(state, product) {
+ let foundProduct = state.cart.find(x => x.id == product._id);
+ if (foundProduct)
+ foundProduct.quantity++;
+ else
+ state.cart.push({
+ id: product._id,
+ name: product.name,
+ price: product.price,
+ quantity: 1
+ });
}
},
actions: {
diff --git a/client/src/views/Checkout.vue b/client/src/views/Checkout.vue
index 42523ca..891597e 100644
--- a/client/src/views/Checkout.vue
+++ b/client/src/views/Checkout.vue
@@ -1,9 +1,35 @@
<template>
- Checkout page
+ <div class="mt-5">
+ <div class="row d-flex justify-content-center">
+ <div class="col-md-6">
+ <ul class="list-group">
+ <li v-for="item in cart" :key="item.id"
+ class="list-group-item d-flex justify-content-between align-items-start">
+ <div class="ms-2 me-auto">
+ <div class="fw-bold">{{ item.name }}</div>
+ </div>
+ <span class="badge bg-primary rounded-pill">{{ item.quantity }}</span>
+ </li>
+ </ul>
+ <p class="text-center my-3 fw-bold">You can buy {{ cartSize }} items for ${{ cartPrice }}.</p>
+ </div>
+ </div>
+ </div>
</template>
<script>
export default {
-
+ name: 'Checkout',
+ computed: {
+ cart() {
+ return this.$store.getters.getCart;
+ },
+ cartSize() {
+ return this.$store.getters.getCartSize;
+ },
+ cartPrice() {
+ return this.$store.getters.getCartPrice;
+ }
+ }
}
</script>
diff --git a/client/src/views/Product.vue b/client/src/views/Product.vue
index 3c35b35..11643c1 100644
--- a/client/src/views/Product.vue
+++ b/client/src/views/Product.vue
@@ -46,7 +46,11 @@ export default {
},
methods: {
buy() {
-
+ this.$store.commit('addToCart', {
+ _id: this.$route.params.id,
+ name: this.productName,
+ price: this.productPrice
+ });
}
}
}