Fix bug with SingleProduct

Author: w3bdesign

app/Http/Controllers/Api/ProductController.php

@@ -15,9 +15,11 @@ public function index()
             ->get();
     }
 
-    public function show(Product $product)
+    public function show($slug)
     {
-        $product->load('categories:id,name');
+        $product = Product::where('slug', $slug)
+            ->with(['categories:id,name'])
+            ->firstOrFail();
 
         return $product;
     }

public/js/app.js

@@ -12,14 +12,14 @@ import Navbar from "./components/Header/Navbar.vue";
 import MobileMenu from "./components/Header/MobileMenu.vue";
 
 import ShowAllProducts from "./components/Products/ShowAllProducts.vue";
+import SingleProduct from "./components/Products/SingleProduct.vue";
 
 import CustomerDetails from "./components/Checkout/CustomerDetails.vue";
 import FakeVisaDetails from "./components/Checkout/FakeVisaDetails.vue";
 import CartSummary from "./components/Checkout/CartSummary.vue";
 
 import Carousel from "./components/Index/Carousel.vue";
 
-
 import FooterContent from "./components/Footer/Footer.vue";
 import OrderCheckout from "./components/Checkout/OrderCheckout.vue";
 import OrderForm from "./components/Checkout/OrderForm.vue";
@@ -50,6 +50,7 @@ app.component("layout-component", Layout);
 app.component("showall-products", ShowAllProducts);
 app.component("order-checkout", OrderCheckout);
 app.component("order-form", OrderForm);
+app.component("single-product", SingleProduct);
 
 app.use(pinia);
 app.use(router);

resources/js/app.js

@@ -1,30 +1,22 @@
 <template>
   <div v-if="data && data.length">
     <div id="product-container" class="flex flex-wrap items-center">
-      <div
-        v-for="product in data"
-        :key="product.id"
-        class="flex flex-col mt-6 md:pr-6 xl:pr-6 sm:w1/2 md:w-1/3 lg:1/4 xl:w-1/4"
-      >
-        <router-link
-          :to="{
-            name: 'single.product',
-            params: { slug: product.slug, product: JSON.stringify(product) },
-          }"
-        >
-          <img
-            v-if="product.imageUrl"
-            class="productImage"
-            :alt="product.name"
-            :src="product.imageUrl"
-          />
+      <div v-for="product in data" :key="product.id"
+        class="flex flex-col mt-6 md:pr-6 xl:pr-6 sm:w1/2 md:w-1/3 lg:1/4 xl:w-1/4">
+        <router-link :to="{
+          name: 'single.product',
+          params: { slug: product.slug },
+        }">
+          <img v-if="product.imageUrl" class="productImage" :alt="product.name" :src="product.imageUrl" />
           <div class="flex justify-center pt-3">
             <p class="text-xl font-bold text-center cursor-pointer">
               {{ product.name }}
             </p>
           </div>
           <div class="flex justify-center mt-2">
-            <div class="text-xl text-gray-900">kr {{ product.price }}</div>
+            <div class="text-xl text-gray-900">
+              kr {{ product.price }}
+            </div>
           </div>
           <div class="flex justify-center pt-3">
             <base-button backgroundColor="bg-blue-600">View Product</base-button>
@@ -34,7 +26,9 @@
     </div>
   </div>
   <div v-if="error">
-    <h1 class="text-center text-3xl text-red-500 m-4 p-4 mt-8">Error loading products</h1>
+    <h1 class="text-center text-3xl text-red-500 m-4 p-4 mt-8">
+      Error loading products
+    </h1>
   </div>
 </template>
 

resources/js/components/Products/ShowAllProducts.vue

@@ -1,40 +1,25 @@
 <template>
-  <div v-if="product">
+  <div v-if="data">
     <section>
       <div class="container z-0 flex flex-wrap items-center pt-4 pb-12 mx-auto">
-        <div
-          class="grid grid-cols-1 gap-4 mt-8 lg:grid-cols-2 xl:grid-cols-2 md:grid-cols-2 sm:grid-cols-2"
-        >
-          <img
-            v-if="product.imageUrl"
-            id="product-image"
-            class="productImage"
-            :alt="product.name"
-            :src="product.imageUrl"
-          />
-          <img
-            v-else
-            id="product-image"
+        <div class="grid grid-cols-1 gap-4 mt-8 lg:grid-cols-2 xl:grid-cols-2 md:grid-cols-2 sm:grid-cols-2">
+          <img v-if="data.imageUrl" id="product-image" class="productImage" :alt="data.name" :src="data.imageUrl" />
+          <img v-else id="product-image"
             class="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 hover:shadow-lg hover:scale-105"
-            :alt="product.name"
-            :src="placeholderImage"
-          />
+            :alt="data.name" :src="placeholderImage" />
           <div class="ml-8">
             <p class="text-3xl font-bold text-left">
-              {{ product.name }}
+              {{ data.name }}
             </p>
             <p class="pt-1 mt-4 text-2xl text-gray-900">
-              {{ formatPrice(product.price) }}
+              {{ formatPrice(data.price) }}
             </p>
             <p class="pt-1 mt-4 text-2xl text-gray-900">
-              {{ product.description }}
+              {{ data.description }}
             </p>
             <div class="pt-1 mt-2">
-              <base-button
-                backgroundColor="bg-blue-600"
-                @click="store.addToCart({ item: product })"
-                >Add To Cart</base-button
-              >
+              <base-button backgroundColor="bg-blue-600" @click="store.addToCart({ item: data })">Add To
+                Cart</base-button>
             </div>
           </div>
         </div>
@@ -44,6 +29,8 @@
 </template>
 
 <script setup>
+import useSWRV from "swrv";
+
 import { useRoute } from "vue-router";
 
 import { useCart } from "../../store/useCart";
@@ -52,5 +39,6 @@ import { formatPrice } from "../../utils/functions";
 const route = useRoute();
 const store = useCart();
 
-const product = JSON.parse(route.params.product);
+const fetcher = (key) => fetch(key).then((res) => res.json());
+const { data, error } = useSWRV(`/api/product/${route.params.slug}`, fetcher);
 </script>

resources/js/components/Products/SingleProduct.vue

@@ -15,6 +15,7 @@ const routes = [
         name: "single.product",
         path: "/product/:slug",
         component: SingleProduct,
+        props: true
     },
     { path: "/checkout", component: Checkout },
     { path: "/categories", component: Categories },