aboutsummaryrefslogtreecommitdiff
path: root/client
diff options
context:
space:
mode:
authorMateja <mail@matejamaric.com>2021-07-24 21:31:04 +0200
committerMateja <mail@matejamaric.com>2021-07-24 21:31:04 +0200
commit33b833ea689be5c76fad7b288b04e00c4f24462e (patch)
treed4ab5e346910aa419a0a546b7e9199f7d638f6a1 /client
parent83b0f4515fae17278bcae1dfd25ee08109124bc6 (diff)
downloadmevn-ecommerce-33b833ea689be5c76fad7b288b04e00c4f24462e.tar.gz
mevn-ecommerce-33b833ea689be5c76fad7b288b04e00c4f24462e.zip
Product page show single product details.
Diffstat (limited to 'client')
-rw-r--r--client/src/views/Product.vue41
1 files changed, 32 insertions, 9 deletions
diff --git a/client/src/views/Product.vue b/client/src/views/Product.vue
index e03c900..3c35b35 100644
--- a/client/src/views/Product.vue
+++ b/client/src/views/Product.vue
@@ -1,24 +1,47 @@
<template>
- <div class="row">
- <div class="col-md-4">
- <img :src="productImg">
- </div>
- <div class="col-md-4">
- <h3>{{ productName }}</h3>
- <p>{{ productDescription }}</p>
- <div class="btn btn-primary" @click="buy">Add to cart</div>
+ <div class="mt-5 d-flex justify-content-center">
+ <div class="card col-md-8">
+ <div class="row g-0">
+
+ <div class="col-md-6">
+ <img :src="productImg" 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>
+ <div class="btn btn-dark" @click="buy">Add to cart</div>
+ </div>
+ </div>
+
+ </div>
</div>
</div>
</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));
+ },
data() {
return {
productName: String,
productDescription: String,
- productImg: String
+ productImg: String,
+ productPrice: Number
}
},
methods: {