Product page show single product details.

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: {