Pada kesempatan kali ini, kita akan membuat halaman produk detail lebih elegant dengan mengubah desgn css dan menambahkan related products agar produk yang serupa ditampilkan di produk detail ini.

Berikut langkah-langkahnya:

1. Edit ProductController untuk Related Products

Buka ProductController dan tambahkan logika untuk mengambil related products berdasarkan  brand yang sama. Lalu edit method showProduct menjadi sebagai berikut: 

    public function showProduct($id)
    {
        $categories = Category::all();
        $product = Product::with('brand')->findOrFail($id);

        $relatedProducts = Product::where('brand_id', $product->brand_id)
            ->where('id', '!=', $product->id) // Exclude current product
            ->take(4) // Batasi hasil (misalnya 4 produk)
            ->get();
        return view('frontend.product-detail', compact('product', 'categories','relatedProducts'));
    }

2. Edit View product-detail.blade.php

File: resources/views/frontend/product-detail.blade.php

<!-- resources/views/frontend/product-detail.blade.php -->
@extends('layouts.frontend')

@section('title', $product->name)

@section('content')
<div class="container my-5">
    <div class="row">
        <!-- Product Image -->
        <div class="col-md-6">
            <div class="product-image">
                <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}" class="img-fluid rounded shadow-lg">
            </div>
        </div>

        <!-- Product Details -->
        <div class="col-md-6">
            <h2 class="product-title">{{ $product->name }}</h2>
            <p class="text-muted">SKU: {{ $product->sku }}</p>

            <h4 class="product-price text-primary mb-4">${{ number_format($product->price, 2) }}</h4>

            <p class="product-description">
                {{ $product->description }}
            </p>

            <!-- CTA Buttons -->
            <div class="d-flex mt-4">
                <button class="btn btn-primary btn-lg me-3 shadow">Add to Cart</button>
                <button class="btn btn-outline-secondary btn-lg shadow">Buy Now</button>
            </div>

            <!-- Additional Info -->
            <div class="product-additional-info mt-5">
                <h5>Product Information:</h5>
                <ul>
                    <li>Category: <strong>
                        @foreach ($product->categories as $category)
                            {{ $category->name }}
                        @endforeach</strong>
                    </li>
                    <li>Brand: <strong>{{ $product->brand->name }}</strong></li>
                    <!-- You can add more details here -->
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Related Products Section -->
<div class="container mt-5">
    <h3 class="text-center mb-4">Related Products</h3>
    <div class="row">
        @foreach($relatedProducts as $related)
            <div class="col-md-3 mb-4">
                <div class="card shadow">
                    <img src="{{ asset('storage/' . $related->image) }}" class="card-img-top" alt="{{ $related->name }}">
                    <div class="card-body">
                        <h5 class="card-title">{{ $related->name }}</h5>
                        <p class="text-muted">${{ number_format($related->price, 2) }}</p>
                        <a href="{{ route('product.show', $related->slug) }}" class="btn btn-primary btn-sm w-100">View Product</a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection

Dari kode ini kita melakukan penambahan related products di view product detail, serta melakukan beberapa modifikasi agar tampilan lebih elegant. 

3. CSS Styling untuk Detail Produk

Tambahkan CSS berikut ke dalam file CSS utama Anda atau inline di layout untuk memastikan desain lebih elegan dan responsif.

File: Tambahkan ke dalam CSS layout atau file utama di resources/css/app.css.

/* Product Detail Styles */
.product-title {
    font-size: 2rem;
    font-weight: bold;
}

.product-price {
    font-size: 1.8rem;
    font-weight: bold;
    color: #ff6f61;
}

.product-description {
    font-size: 1.1rem;
    line-height: 1.6;
}

.product-image img {
    max-width: 100%;
    border-radius: 15px;
}

.product-additional-info h5 {
    margin-top: 1.5rem;
    font-weight: bold;
}

.product-additional-info ul {
    list-style: none;
    padding-left: 0;
}

.product-additional-info li {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

Buka file layouts/frontend.blade.php dan tambahkan akses css eksternal berikut:

<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" >

Setelah itu, silahkan akses produk detail dari home dan akan terlihat seperti berikut:
Product detail

Related Product