Membuat E-commerce sederhana di Laravel #Part 12 - Menambahkan Fitur Wishlist

Berikut adalah tutorial langkah demi langkah untuk menambahkan fitur Wishlist. Fitur ini memungkinkan pengguna untuk menyimpan produk ke dalam wishlist dan mengaksesnya kapan saja, bahkan saat kembali ke website di lain waktu.

1. Setup Database

Tambahkan tabel wishlists

Buat tabel baru untuk menyimpan data wishlist. Jalankan perintah berikut untuk membuat migration:

php artisan make:migration create_wishlists_table

Lalu, buka file migration yang dihasilkan dan tambahkan skema berikut:

public function up()
{
    Schema::create('wishlists', function (Blueprint $table) {
        $table->id();
        $table->unsignedBigInteger('user_id');
        $table->unsignedBigInteger('product_id');
        $table->timestamps();

        $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
        $table->foreign('product_id')->references('id')->on('products')->onDelete('cascade');
    });
}

Jalankan migration:

php artisan migrate

2. Buat Model Wishlist

Buat model untuk wishlist dengan relasi ke pengguna dan produk:

php artisan make:model Wishlist

Isi model Wishlist seperti ini:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Wishlist extends Model
{
    use HasFactory;

    protected $fillable = ['user_id', 'product_id'];

    public function user()
    {
        return $this->belongsTo(User::class);
    }

    public function product()
    {
        return $this->belongsTo(Product::class);
    }
}

3. Tambahkan Relasi di Model User dan Product

Model User

Tambahkan method untuk relasi wishlist di User.php:

public function wishlist()
{
    return $this->hasMany(Wishlist::class);
}

Model Product

Tambahkan method untuk relasi wishlist di Product.php:

public function wishlist()
{
    return $this->hasMany(Wishlist::class);
}

4. Buat Controller Wishlist

Buat controller baru untuk mengelola wishlist:

php artisan make:controller WishlistController

Tambahkan Method di WishlistController

Add to Wishlist

Tambahkan produk ke wishlist pengguna:

public function addToWishlist(Request $request, $productId)
{
    $user = auth()->user();

    // Cek apakah produk sudah ada di wishlist
    $existing = Wishlist::where('user_id', $user->id)->where('product_id', $productId)->first();
    if ($existing) {
        return redirect()->route('wishlist.view')->with('success', 'Product alrady in wishlist!');
    }

    Wishlist::create([
        'user_id' => $user->id,
        'product_id' => $productId,
    ]);

    return redirect()->route('wishlist.view')->with('success', 'Product added to wishlist!');
}

View Wishlist

Tampilkan wishlist pengguna:

public function viewWishlist()
{
    $categories = Category::all();

    $wishlistItems = Wishlist::with('product')->where('user_id', auth()->id())->get();
    return view('frontend.wishlist', compact('wishlistItems','categories'));
}

Remove from Wishlist

Hapus produk dari wishlist:

public function removeFromWishlist($wishlistId)
{
    $wishlistItem = Wishlist::findOrFail($wishlistId);

    if ($wishlistItem->user_id != auth()->id()) {
        return redirect()->back()->with('error', 'You are not authorized to remove this item.');
    }

    $wishlistItem->delete();
    return redirect()->back()->with('message', 'Product removed from wishlist!');
}

Full Controller untuk WishlistController sebagai berikut:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Wishlist;
use App\Models\Category;

class WishlistController extends Controller
{
    public function addToWishlist(Request $request, $productId)
    {
        $user = auth()->user();

        // Cek apakah produk sudah ada di wishlist
        $existing = Wishlist::where('user_id', $user->id)->where('product_id', $productId)->first();
        if ($existing) {
            return redirect()->route('wishlist.view')->with('success', 'Product alrady in wishlist!');
        }

        Wishlist::create([
            'user_id' => $user->id,
            'product_id' => $productId,
        ]);

        return redirect()->route('wishlist.view')->with('success', 'Product added to wishlist!');
    }
    public function viewWishlist()
    {
        $categories = Category::all();

        $wishlistItems = Wishlist::with('product')->where('user_id', auth()->id())->get();
        return view('frontend.wishlist', compact('wishlistItems','categories'));
    }
    public function removeFromWishlist($wishlistId)
    {
        $wishlistItem = Wishlist::findOrFail($wishlistId);

        if ($wishlistItem->user_id != auth()->id()) {
            return redirect()->back()->with('error', 'You are not authorized to remove this item.');
        }

        $wishlistItem->delete();
        return redirect()->back()->with('message', 'Product removed from wishlist!');
    }

}

5. Tambahkan Route

Tambahkan route baru di web.php:

Route::middleware('auth')->group(function () {
    Route::post('/wishlist/add/{productId}', [WishlistController::class, 'addToWishlist'])->name('wishlist.add');
    Route::get('/wishlist', [WishlistController::class, 'viewWishlist'])->name('wishlist.view');
    Route::delete('/wishlist/remove/{wishlistId}', [WishlistController::class, 'removeFromWishlist'])->name('wishlist.remove');
});

6. Buat Views

View Wishlist (resources/views/frontend/wishlist/index.blade.php)

@extends('layouts.frontend')

@section('content')
<div class="container">
    <h1>My Wishlist</h1>
    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    @if ($wishlistItems->isEmpty())
        <p>Your wishlist is empty.</p>
    @else
        <div class="row">
            @foreach ($wishlistItems as $item)
                <div class="col-md-4">
                    <div class="card mb-4">
                        <img src="{{ asset('storage/' . $item->product->image) }}" class="card-img-top" alt="{{ $item->product->name }}">
                        <div class="card-body">
                            <h5 class="card-title">{{ $item->product->name }}</h5>
                            <p class="card-text">${{ $item->product->price }}</p>
                            <form action="{{ route('wishlist.remove', $item->id) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-danger">Remove</button>
                            </form>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>
@endsection

Button Add to Wishlist di Product Page

Tambahkan tombol untuk menambahkan ke product detail agar bisa ke wishlist:

<form action="{{ route('wishlist.add', $product->id) }}" method="POST">
    @csrf
    <button type="submit" class="btn btn-primary">Add to Wishlist</button>
</form>

7. Testing Fitur Wishlist

1. Login sebagai pengguna.
2. Buka halaman produk dan klik tombol "Add to Wishlist".
3. Kunjungi halaman wishlist di /wishlist untuk melihat semua produk di wishlist Anda.
4. Klik "Remove" untuk menghapus produk dari wishlist.

Jika berhasil, akan seperti berikut: