Lửng Code - Bài 10: Hướng dẫn xây dựng Giỏ hàng Online trong Laravel với Session và Collection

Hướng dẫn xây dựng Giỏ hàng Online trong Laravel với Session và Collection

Giới thiệu về Kỹ Thuật Session trong PHP + Laravel - Áp dụng cho Giỏ hàng

Session là một cơ chế trong PHP và Laravel giúp lưu trữ dữ liệu giữa các yêu cầu HTTP. Khi người dùng thêm một sản phẩm vào giỏ hàng, dữ liệu giỏ hàng sẽ được lưu trong session để có thể sử dụng lại trong các lần truy cập sau đó mà không cần phải lưu vào cơ sở dữ liệu.

Trong Laravel, session có thể được lưu trữ trong nhiều loại driver như file, cookie, database, v.v. Mỗi khi người dùng tương tác với giỏ hàng, chúng ta sẽ thao tác với dữ liệu trong session để lưu trữ, cập nhật hoặc xóa sản phẩm.

Giới thiệu về Collection trong Laravel - Áp dụng để lưu giỏ hàng

Laravel cung cấp Collection, một lớp tiện ích mạnh mẽ giúp thao tác với mảng dữ liệu dễ dàng và hiệu quả. Khi làm việc với giỏ hàng, chúng ta có thể sử dụng Collection để lưu trữ và thao tác với các sản phẩm trong giỏ.

Trong giỏ hàng, chúng ta sẽ sử dụng Collection để:

Thêm sản phẩm vào giỏ.
Cập nhật số lượng sản phẩm.
Tính toán tổng giá trị giỏ hàng.
Xóa sản phẩm khỏi giỏ.

Collection cung cấp nhiều phương thức hữu ích như put(), has(), forget(), giúp dễ dàng quản lý các sản phẩm trong giỏ.

Các Bước Triển Khai Giỏ Hàng Online trong Laravel

1. Tạo Routes

Trong file web.php, ta sẽ khai báo các route cho giỏ hàng, bao gồm:

view: Hiển thị danh sách các sản phẩm trong giỏ giỏ hàng.
add: Thêm 1 sản phẩm vào giỏ hàng.
update: Cập nhật số lượng 1 sản phẩm trong giỏ hàng.
delete: Xóa 1 sản phẩm khỏi giỏ hàng.
clear: Xóa toàn bộ sản phẩm trong giỏ hàng.

Route::prefix('cart')->group(function () {
    Route::get('view', [CartController::class, 'view'])->name('cart.view');
    Route::get('add/{product}', [CartController::class, 'add'])->name('cart.add');
    Route::get('update/{product}', [CartController::class, 'update'])->name('cart.update');
    Route::get('delete/{product}', [CartController::class, 'delete'])->name('cart.delete');
    Route::get('clear', [CartController::class, 'clear'])->name('cart.clear');
});

2. Tạo Controller

Tạo một controller CartController với các phương thức tương ứng để quản lý giỏ hàng.

Lệnh artisan để tạo controller

php artisan make:controller CartController

Khai báo chi tiết các phương thức cần thiét

namespace App\Http\Controllers;

use App\Models\Product;

class CartController extends Controller
{
    public function view() {
        $carts = collect(session('cart', []));
        return view('cart-view', compact('carts'));
    }

    public function add(Product $product)
    {
        $carts = collect(session('cart', []));
        
        if ($carts->has($product->id)) {
            // Cập nhật số lượng sản phẩm
            $item = $carts->get($product->id);
            $item->quantity += 1;
            $item->total = $item->quantity * $item->price;
            $carts->put($product->id, $item);
        } else {
            // Thêm sản phẩm mới vào giỏ hàng
            $carts->put($product->id, (object)[
                'id' => $product->id,
                'name' => $product->name,
                'price' => $product->price,
                'quantity' => 1,
                'total' => $product->price
            ]);
        }

        session(['cart' => $carts]);

        return redirect()->route('cart.view');
    }

    public function update(Product $product) {
        $carts = collect(session('cart', []));
        
        if ($carts->has($product->id)) {
            $item = $carts->get($product->id);
            $item->quantity = (int) request('quantity', 1);
            $item->total = $item->quantity * $item->price;
            $carts->put($product->id, $item);
        }

        return redirect()->route('cart.view');
    }

    public function delete(Product $product)
    {
        $carts = collect(session('cart', []));
        
        if ($carts->has($product->id)) {
            $carts->forget($product->id);
            session(['cart' => $carts]);
        }

        return redirect()->route('cart.view');
    }

    public function clear() {
        session(['cart' => []]);
        return redirect()->route('cart.view');
    }
}

3. Tạo View

Tạo một view để hiển thị giỏ hàng. Trong ví dụ này, ta sẽ hiển thị thông tin sản phẩm, cho phép người dùng cập nhật số lượng, xóa sản phẩm hoặc xóa toàn bộ giỏ hàng.

@extends('master.site')
@section('body')
<h2>GIỎ HÀNG</h2>
<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>STT</th>
            <th>Tên SP</th>
            <th>Giá SP</th>
            <th>SL SP</th>
            <th>Thành tiền</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <?php $total = 0; ?>
        @foreach($carts as $cart) 
        <?php 
            $total += $cart->total;
        ?>
        <tr>
            <td>{{ $loop->index + 1 }}</td>
            <td>{{ $cart->name }}</td>
            <td>{{ number_format($cart->price) }} <sup>vnđ</sup></td>
            <td>
                <form action="{{ route('cart.update', $cart->id)}}" method="get" class="form-inline" role="form">
                    <div class="form-group">
                        <input type="number" name="quantity" class="form-control" value="{{ $cart->quantity }}" style="width: 60px; text-align: center" placeholder="Input field">
                    </div>
                    <button type="submit" class="btn btn-primary">Update</button>
                </form>
            </td>
            <td>{{ number_format($cart->total) }} <sup>vnđ</sup></td>
            <td>
                <a onclick="return confirm('Bạn có chắc không?')" href="{{ route('cart.delete', $cart->id)}}" class="btn btn-sm btn-danger">Xóa</a>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

<div class="text-center">
    <h3>Tổng tiền: {{ number_format($total) }} <sup>vnđ</sup></h3>
    <div class="form-group">
        <a href="{{ route('home')}}" class="btn btn-sm btn-primary">Tiếp tục mua hàng</a>
        <a href="{{ route('cart.clear')}}" onclick="return confirm('Bạn có chắc không?')" class="btn btn-sm btn-danger">Xóa tất cả</a>
        <a href="" class="btn btn-sm btn-success">Thanh toán</a>
    </div>
</div>
@stop()

Giải thích các tính năng trong code:

View: Hiển thị danh sách sản phẩm trong giỏ hàng, cho phép người dùng cập nhật số lượng hoặc xóa sản phẩm.
Controller: Bao gồm các phương thức add(), update(), delete(), và clear() để thao tác với giỏ hàng trong session.
Session & Collection: Giỏ hàng được lưu trong session dưới dạng một collection, giúp dễ dàng thao tác với các sản phẩm.

Kết luận:

Bằng cách sử dụng session để lưu trữ dữ liệu giỏ hàng và collection để thao tác với các sản phẩm trong giỏ, chúng ta có thể xây dựng một hệ thống giỏ hàng đơn giản mà không cần lưu trữ vào cơ sở dữ liệu, rất phù hợp cho các ứng dụng không yêu cầu tính năng giỏ hàng phức tạp hoặc lưu trữ lâu dài.