Membuat E-commerce sederhana di Laravel #Part 7 - Membuat halaman Cart

Tutorial kali ini, kita akan buat halaman cart atau keranjang. Dalam sebuah e-commerce, halaman cart merupakah halaman yang wajib untuk menyimpan sementara ke keranjang barang yang akan di beli.

Berikut adalah langkah-langkah untuk membuat halaman Cart di frontend menggunakan Laravel. Tutorial ini akan mencakup pembuatan model, controller, view, dan desain CSS untuk tampilan halaman Cart agar pengguna dapat menambahkan produk ke keranjang belanja, melihat daftar item di keranjang, serta mengelola jumlah item.

1. Buat Controller CartController

Kita akan membuat controller CartController untuk mengelola fungsi menambahkan item, menghapus item, dan melihat daftar item di keranjang.

php artisan make:controller CartController

Di dalam CartController.php, tambahkan fungsi-fungsi berikut:

<?php

namespace App\Http\Controllers;

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

class CartController extends Controller
{
    public function index()
    {
        $categories = Category::all();

        $cartItems = session()->get('cart', []);
    
        // Hitung total harga
        $total = array_sum(array_map(function($item) {
            return $item['price'] * $item['quantity'];
        }, $cartItems));

        return view('frontend.cart', compact('cartItems', 'total','categories'));
    }
    public function addToCart(Request $request, $productId)
    {
        // Ambil produk berdasarkan ID
        $product = Product::findOrFail($productId);
        $quantity = $request->input('quantity', 1);

        // Ambil keranjang dari sesi, atau inisialisasi array kosong jika belum ada
        $cart = session()->get('cart', []);

        // Jika produk sudah ada di keranjang, tambahkan kuantitasnya
        if (isset($cart[$productId])) {
            $cart[$productId]['quantity'] += $quantity;
        } else {
            // Jika produk belum ada, tambahkan ke keranjang dalam bentuk array
            $cart[$productId] = [
                'product_id' => $product->id,
                'name' => $product->name,
                'price' => $product->price,
                'quantity' => $quantity,
            ];
        }

        // Simpan keranjang kembali ke sesi
        session()->put('cart', $cart);

        // Redirect kembali ke halaman cart dengan notifikasi sukses
        return redirect()->route('cart.index')->with('success', 'Product added to cart.');
    }
    public function removeFromCart($productId)
    {
        $cart = session()->get('cart', []);
        if(isset($cart[$productId])) {
            unset($cart[$productId]);
            session()->put('cart', $cart);
            session()->flash('cartCount', array_sum(array_column($cart, 'quantity')));
            
            return redirect()->route('cart.index')->with('success', 'Product deleted from cart.');
        }
        return response()->json(['success' => false, 'message' => 'Product not found in cart!']);
    }

    public function clearCart()
    {
        $cart = [];
        session()->put('cart', $cart);

        return redirect()->route('cart.index')->with('success', 'Cart cleared.');
    }
}

2. Atur Routes untuk Cart

Tambahkan routes berikut di dalam web.php:

use App\Http\Controllers\CartController;

Route::get('/cart', [CartController::class, 'index'])->name('cart.index');
Route::post('/cart/add/{id}', [CartController::class, 'addToCart'])->name('cart.add');
Route::post('/cart/remove/{id}', [CartController::class, 'removeFromCart'])->name('cart.remove');
Route::post('/cart/clear', [CartController::class, 'clearCart'])->name('cart.clear');

3. Buat View frontend/cart/index.blade.php

Selanjutnya, buat tampilan halaman cart di dalam folder resources/views/frontend/cart/index.blade.php:

@extends('layouts.frontend')

@section('content')
<div class="container">
    <h2 class="my-4">Your Cart</h2>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if(count($cartItems) > 0)
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Price</th>
                    <th>Quantity</th>
                    <th>Total</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($cartItems as $item)
                    <tr>
                        <td>{{ $item['name'] }}</td>
                        <td>${{ $item['price'] }}</td>
                        <td>{{ $item['quantity'] }}</td>
                        <td>${{ $item['price'] * $item['quantity'] }}</td>
                        <td>
                            <form action="{{ route('cart.remove', $item['product_id']) }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-danger btn-sm">Remove</button>
                            </form>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <div class="d-flex justify-content-between">
            <h4>Total: ${{ $total }}</h4>
            <form action="{{ route('cart.clear') }}" method="POST">
                @csrf
                <button type="submit" class="btn btn-warning">Clear Cart</button>
            </form>
        </div>
    @else
        <p>Your cart is empty.</p>
    @endif
</div>
@endsection

5. Desain CSS untuk Halaman Cart

Tambahkan gaya berikut di dalam file CSS (misalnya, resources/css/app.css atau public/css/style.css):

h2 {
    text-align: center;
    color: #333;
}

.table {
    margin-top: 20px;
}

.table th, .table td {
    text-align: center;
}

.btn-danger {
    background-color: #e74c3c;
    border-color: #e74c3c;
}

.btn-warning {
    background-color: #f39c12;
    border-color: #f39c12;
}

6. Menambahkan Tombol "Add to Cart" di Halaman Produk detail

Untuk setiap produk, tambahkan tombol "Add to Cart" yang mengarahkan ke route untuk menambahkan item ke keranjang. Contohnya di halaman detail produk product-detail.blade:

<!-- Product Details -->
            <div class="col-md-6">
                <form action="{{ route('cart.add', $product->id) }}" method="POST">
                @csrf
                    <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">
                        <input type="number" name="quantity" value="1" min="1" class="form-control mb-2" style="width: 60px;">
                        <button type="submit" class="btn btn-primary">Add to Cart</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>
                </form>
            </div>

Testing

1. Cek apakah produk berhasil ditambahkan ke keranjang dengan benar.
2. Pastikan jumlah dan total harga di halaman keranjang dihitung dengan benar.
3. Pastikan tombol "Remove" dan "Clear Cart" berfungsi sesuai dengan fungsinya.

Hasilnya akan seperti berikut:

Selamat mencoba!! jangan lupa tinggalkan komentar