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
- Cek apakah produk berhasil ditambahkan ke keranjang dengan benar.
- Pastikan jumlah dan total harga di halaman keranjang dihitung dengan benar.
- Pastikan tombol "Remove" dan "Clear Cart" berfungsi sesuai dengan fungsinya.
Hasilnya akan seperti berikut:
Selamat mencoba!! jangan lupa tinggalkan komentar