aboutsummaryrefslogtreecommitdiff
path: root/client/src/views
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/views')
-rw-r--r--client/src/views/Product.vue49
1 files changed, 23 insertions, 26 deletions
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');
}
}
}