fixbug

pages/home-page/categories/_id/index.vue

@@ -61,11 +61,13 @@
                   style="margin-left:8px"
                   @click="getDataItem"
                 >
-                  <v-icon
-                    :class="{ 'show-btns': hover }"
-                  >
-                    mdi-cart
-                  </v-icon>
+                  <nuxt-link :to="`/home-page/products/${item.id}`">
+                    <v-icon
+                      :class="{ 'show-btns': hover }"
+                    >
+                      mdi-cart
+                    </v-icon>
+                  </nuxt-link>
                 </v-btn>
                 <v-btn
                   :class="{ 'show-btns': hover }"

pages/home-page/products/_id/index.vue

@@ -8,28 +8,28 @@
             <div class="numbertext">
               1 / 4
             </div>
-            <img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;">
+             <img :src="product.images[0]">
           </div>
 
           <div class="mySlides">
             <div class="numbertext">
               2 / 4
             </div>
-            <img src="https://cdn.vuetifyjs.com/images/cards/docks.jpg" style="width:100%; height: 100%;">
+            <img :src="product.images[1] || 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'">
           </div>
 
           <div class="mySlides">
             <div class="numbertext">
               3 / 4
             </div>
-            <img src="https://cdn.vuetifyjs.com/images/cards/hotel.jpg" style="width:100%; height: 100%;">
+            <img :src="product.images[2] || 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'">
           </div>
 
           <div class="mySlides">
             <div class="numbertext">
               4 / 4
             </div>
-            <img src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;">
+            <img :src="product.images[3] || 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'">
           </div>
 
           <!-- Next and previous buttons -->
@@ -40,16 +40,16 @@
         <!-- Thumbnail images -->
         <div class="c2">
           <div class="column">
-            <img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;" alt="The Woods" @click="currentSlide(1)">
+            <img class="demo cursor" :src="product.images[0] || 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'" style="width:100%; height: 100%;" alt="The Woods" @click="currentSlide(1)">
           </div>
           <div class="column">
-            <img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/docks.jpg" style="width:100%; height: 100%;" alt="Cinque Terre" @click="currentSlide(2)">
+            <img class="demo cursor" :src="product.images[1] || 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'" style="width:100%; height: 100%;" alt="Cinque Terre" @click="currentSlide(2)">
           </div>
           <div class="column">
-            <img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/hotel.jpg" style="width:100%; height: 100%;" alt="Mountains and fjords" @click="currentSlide(3)">
+            <img class="demo cursor" :src="product.images[2] || 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'" style="width:100%; height: 100%;" alt="Mountains and fjords" @click="currentSlide(3)">
           </div>
           <div class="column">
-            <img class="demo cursor" src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" style="width:100%; height: 100%;" alt="Northern Lights" @click="currentSlide(4)">
+            <img class="demo cursor" :src="product.images[3] || 'https://cdn.vuetifyjs.com/images/cards/sunshine.jpg'" style="width:100%; height: 100%;" alt="Northern Lights" @click="currentSlide(4)">
           </div>
         </div>
       </div>
@@ -57,7 +57,7 @@
         <v-col>
           <v-row class="flex-row align-center justify-space-between mt-2">
             <v-card-title class="modal-title" style="margin-left:-20px;color:#222;font-weight:700;font-size: 1.9rem">
-              MACBOOK PRO 1
+              {{ product.name }}
             </v-card-title>
           </v-row>
           <v-row class="flex-row align-center">
@@ -77,8 +77,9 @@
             </h3>
             <v-col cols="12" sm="6" md="4">
               <v-select
+                v-model="color"
                 label="Color"
-                :items="['Red', 'Blue', 'White', 'Brown', 'Yellow', 'Violet']"
+                :items="['Red', 'Blue','Yellow']"
               />
             </v-col>
           </v-row>
@@ -88,8 +89,9 @@
             </h3>
             <v-col cols="12" sm="6" md="4">
               <v-select
-                label="Color"
-                :items="['Red', 'Blue', 'White', 'Brown', 'Yellow', 'Violet']"
+                v-model="size"
+                label="Size"
+                :items="['S', 'M', 'L']"
               />
             </v-col>
           </v-row>
@@ -102,10 +104,11 @@
             </h3>
             <v-col md="2">
               <v-text-field
+                v-model="quantity"
                 type="number"
               />
             </v-col>
-            <v-btn color="primary" dense>
+            <v-btn @click="addProductToCard" color="primary" dense>
               Add to card (+)
             </v-btn>
             <v-btn
@@ -178,54 +181,60 @@
 </template>
 
 <script>
+import { eventBus } from '~/plugins/eventBus.js'
+
 export default {
   layout: 'user',
   data: () => {
     return {
-      product: [],
+      product: {
+        images: []
+      },
       slideIndex: 1,
       items: [
         {
-          images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
+          images: 'https://d-themes.com/html/riode/images/demos/demo1/products/product1.jpg',
           price: '100$',
           name: 'xiaomi x99'
         },
         {
-          images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
+          images: 'https://d-themes.com/html/riode/images/demos/demo1/products/product2.jpg',
           price: '100$',
           name: 'xiaomi x99'
         },
         {
-          images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
+          images: 'https://d-themes.com/html/riode/images/demos/demo1/products/product3.jpg',
           price: '100$',
           name: 'xiaomi x99'
         },
         {
-          images: 'https://cdn.vuetifyjs.com/images/cards/docks.jpg',
+          images: 'https://d-themes.com/html/riode/images/demos/demo1/products/product4.jpg',
           price: '100$',
           name: 'xiaomi x99'
         }
-      ]
+
+      ],
+      size: '',
+      color: '',
+      quantity: ''
     }
   },
   mounted () {
-    this.showSlides(1)
-  },
-  created () {
     this.getProduct()
+    this.showSlides(1)
   },
   methods: {
     async getProduct () {
-      const resp = await this.$axios.get(`/products/detail/${this.$route.params.id}`, {
+      const resp = await this.$axios.get(`/guest/products/detail/${this.$route.params.id}`, {
         headers: {
           Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
         }
       })
-        .then(response => (this.product = response.data))
         .catch(function (error) {
           console.log(error)
         })
-      console.log(resp)
+      this.product = resp.data.data
+      console.log(this.product)
     },
     // css gallery function
     plusSlides (n) {
@@ -249,6 +258,30 @@ export default {
       }
       slides[this.slideIndex - 1].style.display = 'block'
       dots[this.slideIndex - 1].className += ' active'
+    },
+    addProductToCard () {
+      const fd = new FormData()
+      fd.append('product_id', this.product.id)
+      fd.append('color', this.color)
+      fd.append('size', this.size)
+      fd.append('quantity', this.quantity)
+      this.$axios
+        .post('/carts/add-to-cart', fd, {
+          headers: {
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal('token')}`
+          }
+        })
+        .then((response) => {
+          this.$toast.success('Add product successfully!', {
+            duration: 3000
+          })
+          eventBus.$emit('add-to-cart', response)
+        })
+        .catch((errors) => {
+          this.$toast.error('something went wrong!', {
+            duration: 3000
+          })
+        })
     }
   }
 }
@@ -269,8 +302,19 @@ export default {
 .mySlides {
   display: none;
   height:100%;
-  max-width:543,41px;
-  max-height:461,6px;
+  width:543px!important;
+  height:518px !important;
+
+}
+.mySlides>img {
+  width:543px!important;
+  height:518px !important;
+  object-fit: cover;
+
+}
+.column>img {
+  width:109px !important;
+  height:122px !important;
 }
 
 /* Add a pointer when hovering over the thumbnail images */