1. Create Controller Function and Route

Create Product Details Function (`ShopController.php`)

In the `ShopController`, create the `product_details` function. It takes the product'sslug as a parameter to fetch the specific product record. It also fetches a list of related products (`$rproducts`) by retrieving 8 products with a slug different from the current one.

public function product_details($product_slug)
    {
        $product = Product::where("slug",$product_slug)->first();
        $rproducts = Product::where("slug","<>",$product_slug)->get()->take(8);
        return view("details",compact("product","rproducts"));
    }

Define Route (`web.php`)

Create a dynamic GET route that accepts the product slug and maps it to the new controller function:

Route::get("/shop/{product_slug}",[ShopController::class,"product_details"])->name("shop.product.details");

2. Create View and Display Data

Create Details View (`details.blade.php`)

Create the view file at `resources/views/details.blade.php`. Extend the main application layout and integrate the template content:

@extends("layouts.app")
@section("content")
    @endsection

Display Main Image and Gallery

Update the product images section to display the main product image and loop through the comma-separated gallery images, using the `explode` function to convert the string into an array:

<div class="product-details-images">
    <!-- Main Image -->
    <div class="details-gallery-active-2 slider-arrow-style-2">
        <div class="single-img">
            <img src="{{asset("uploads/products")}}/{{$product->image}}" alt="{{$product->name}}">
        </div>
        
        <!-- Gallery Images -->
        @php
            $images = explode(",", $product->images);
        @endphp
        @if($product->images)
            @foreach ($images as $img)
                <div class="single-img">
                    <img src="{{asset("uploads/products")}}/{{$img}}" alt="{{$product->name}} gallery">
                </div>
            @endforeach
        @endif
    </div>
    
    <!-- Thumbnails (Nav for the main slider) -->
    <div class="details-gallery-nav-2 slider-arrow-style-2 text-center">
        <div class="single-img">
             <img src="{{asset("uploads/products/thumbnails")}}/{{$product->image}}" alt="{{$product->name}} thumb">
        </div>
        @if($product->images)
            @foreach ($images as $img)
                <div class="single-img">
                    <img src="{{asset("uploads/products/thumbnails")}}/{{$img}}" alt="{{$product->name}} gallery thumb">
                </div>
            @endforeach
        @endif
    </div>
</div>

Display Product Information and Prices

Update the product description and price sections with dynamic data:

<!-- Name -->
<h2 class="product-details-title">{{$product->name}}</h2>
<!-- Price -->
<div class="product-details-price">
    @if($product->sale_price)
        <span class="old-price">${{$product->regular_price}}</span>
        <span class="new-price">${{$product->sale_price}}</span>
    @else
        <span class="new-price">${{$product->regular_price}}</span>
    @endif
</div>
<!-- Short Description -->
<p class="product-details-short-desc">{{$product->short_description}}</p>

Display Description, Information, and Reviews (Tabs)

Populate the tab content with the full description and additional information:

<!-- Description Tab Content -->
<div class="tab-pane fade active show" id="product-desc-content">
    <div class="product-description-wrapper">
        <p>{!! $product->description !!}</p>
    </div>
</div>
<!-- Information Tab Content -->
<div class="tab-pane fade" id="product-info-content">
    <div class="product-description-wrapper">
        <p>{!! $product->information !!}</p>
    </div>
</div>

Display Related Products

Loop through the `$rproducts` collection to display the related items in a slider/carousel format:

@foreach ($rproducts as $product)
    <div class="product-card-wrapper">
        <!-- Product Image and Link -->
        <div class="product-card-img position-relative">
            <a href="{{route("shop.product.details", ["product_slug" => $product->slug])}}" class="image-box">
                <img class="card-img-top lazyload" src="{{asset("uploads/products")}}/{{$product->image}}" alt="{{$product->name}}">
            </a>
        </div>
        
        <!-- Product Details and Price -->
        <div class="product-card-details">
            <h4 class="product-card-title">
                <a href="{{route("shop.product.details", ["product_slug" => $product->slug])}}">{{$product->name}}</a>
            </h4>
            <div class="sale-price">
                @if($product->sale_price)
                <span class="price pr-1">${{$product->regular_price}}</span> ${{$product->sale_price}}
                @else
                ${{$product->regular_price}}
                @endif
            </div>
        </div>
        <!-- ... Quick view, Add to cart, Add to wishlist links ... -->
    </div>
@endforeach

3. Update Shop Page Link

In the `shop.blade.php` view, ensure the product links within the main product grid point to the new details route, passing the product'sslug:

{{ route("shop.product.details", ["product_slug" => $product->slug]) }}