aboutsummaryrefslogtreecommitdiff
path: root/client/src/views
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/src/views
parent54e471b5741a7569001067e476467c4ff6f6a7de (diff)
downloadmevn-ecommerce-2e4678c40a7c92a981bf67845a2888893ea9b758.tar.gz
mevn-ecommerce-2e4678c40a7c92a981bf67845a2888893ea9b758.zip
Boilerplate checkout cart.
Diffstat (limited to 'client/src/views')
-rw-r--r--client/src/views/Checkout.vue30
-rw-r--r--client/src/views/Product.vue6
2 files changed, 33 insertions, 3 deletions
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
+ });
}
}
}