Chức năng mua hàng hay đặt hàng đã không còn xa lạ với các trang web thương mại điện tử, shop online nữa. Trong Laravel bạn cũng sẽ xây dựng được các chức năng như Add to Cart, giỏ hàng, thanh toán… thông qua Session.

Hãy theo dõi bài viết sau đây mình sẽ hướng dẫn bạn tạo ra Shopping Cart đơn giản nhất có thể để người mới cũng có thể hiểu được.

Những thứ cần chuẩn bị

Bạn nên tham khảo lại một số bài sau:

Sử dụng Migrations để tạo ra một bảng là products với các column bao gồm id, name, content, price, quantity, image.

Tiếp theo thêm sản phẩm vào trong CSDL và đưa thông tin ra ngoài qua 3 bài viết mình đã đưa ra.

Các bước xây dựng chức năng mua hàng

Bước 1: Thêm một hàm hiển thị toàn bộ sản phẩm trong Products.php (Tại thư mục C:\xampp\htdocs\thu_muc_laravel\app\Http\Controllers)

public function index(){
    $products = Products::all();
    return view('home', compact('products'));
}

Và phía trên hãy thêm

use \Illuminate\Support\Str;
use Illuminate\Support\Facades\Session;
use App\Models\Products;
use DB;

Tiếp theo đó cũng tại đây mình thêm

public function addToCart(Request $request, $id)
    {
        //$request->session()->flush();
        $product = DB::select('select * from products where id='.$id);
        $cart = Session::get('cart');

        $cart[$product[0]->id] = array(
            "id" => $product[0]->id,
            "name" => $product[0]->name,
            "price" => $product[0]->price,
            "image" => $product[0]->image,
            "quantity" => 1,
        );
        Session::put('cart', $cart);
        return redirect()->back()->with('success', 'Sản phẩm đã thêm thành công!');
    } 

    public function show(){
        $products = Session::get('cart');
        return view('cart', compact('products'));
    }
  • function addToCart: đây là chức năng khi người dùng nhấp chuột vào button website sẽ lưu id vào Session
  • function show(): Hiển thị các sản phẩm đã được đặt hàng

Bước 2: Tạo ra file home.blade.php để hiển ra danh sách sản phẩm (Tại thư mục C:\xampp\htdocs\thuc_muc_laravel\resources\views)

<div class="new-content">
        <h2>Sản phẩm mới</h2>
        <div id="product" class="alert">
            {{ session('success') }}
        </div> 
        <a href="show" class="btn btn-success">Xem giỏ hàng</a>
        <br/>
        <br/>

        <div class="product-list">
            <div class="row">
                @foreach($products as $product)
                <div class="col-sm-3">
                    <div class="item-post">

                        <img src="{{ asset('storage/app/' . $product->image) }}" /> 
                        <div class="content">
                            <ul class="price">
                                <li>Giá bán:</li> <li>{{ $product->price }}</li>
                            </ul>
                            <h3><a href="{{ route('show') }}">{{ $product->name }}</a></h3>
                            
                            <a href="{{ route('add.to.cart', $product->id) }}" data-url="{{ route('add.to.cart', $product->id) }}" class="btn btn-danger btn-block text-center" role="button">Đặt mua</a>


                        </div>
                    </div>
                </div>
                @endforeach
            </div>

        </div>
    </div>

Tiếp theo đó tạo ra một cart.blade.php (Tại thư mục C:\xampp\htdocs\thuc_muc_laravel\resources\views)

<div class="cartList">
<div class="container">
        <table id="cart" class="table table-hover table-condensed">
            <thead>
            <tr>
                <th style="width:50%">Sản phẩm</th>
                <th style="width:50%">Hình ảnh</th>
                <th style="width:10%">Giá</th>
                <th style="width:8%">Số lượng</th>
                <th style="width:22%" class="text-center">Tổng</th>
                <th style="width:10%"></th>
            </tr>
            </thead>
            <tbody>
            
                @if(Session::has('cart'))
                @foreach($products as $row => $item)
                <tr>
                <td data-th="Product">{{$item['name']}}</td>
                <td data-th="Image"><img src="{{ asset('storage/app/' . $item['image']) }}" width="100px" /></td>
                <td data-th="Price">{{$item['price']}}</td>
                <td data-th="Quantity"><input type="number" class="form-control text-center" value="{{$item['quantity']}}"></td>
                <td data-th="Subtotal" class="text-center">1.99</td>
                <td class="actions" data-th="">
                    <button class="btn btn-info btn-sm"><i class="fa fa-refresh"></i>Refresh</button>
                    <button class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i>Xóa SP</button>
                </td>
                </tr>
                @endforeach
                @else
                @endif
                
            
            </tbody>
            <tfoot>
            <tr class="visible-xs">
                <td class="text-center"><strong>Total 1.99</strong></td>
            </tr>
            <tr>
                <td><a href="{{ url('/') }}" class="btn btn-warning"><i class="fa fa-angle-left"></i> Continue Shopping</a></td>
                <td colspan="2" class="hidden-xs"></td>
                <td class="hidden-xs text-center"><strong>Total $1.99</strong></td>
            </tr>
            </tfoot>
        </table>
    </div>
</div>

Bước 3: Tạo Model Products.php

<?php

namespace App\Models;

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

class Products extends Model
{
    use HasFactory;

    protected $table = 'products';
    public $timestamps = false;
}

Bước 4: Và cuối cùng thêm vào route tại web.php 4 dòng lệnh

Route::get('/', 'App\Http\Controllers\[email protected]');
Route::get('cart', 'App\Http\Controllers\[email protected]')->name('cart');
Route::get('show', 'App\Http\Controllers\[email protected]')->name('show');
Route::get('add-to-cart/{id}', 'App\Http\Controllers\[email protected]')->name('add.to.cart');

Sau đó dán URL https://localhost/thu_muc_laravel/ lên trình duyệt.

Thêm một chút CSS nữa cho đẹp

.product-list h3 {
    line-height: 0.8;
    margin-bottom: 15px;
    display: block;
}
.product-list h3 a{
    font-size: 16px;
}
.product-list .item-post {
    box-shadow: 0 0px 20px 4px rgb(47 85 212 / 10%);
}
.product-list .content {
    margin-top: 10px;
    padding: 10px;
}
.product-list ul {
    margin: 0;
    padding-left: 0;
}
.product-list ul li:nth-child(2) {
    color: red;
}
.product-list ul li {
    list-style-type: none;
    display: inline-block;
}

dat-hang-trong-laravel (1)

Sau khi bạn click vào nút đặt mua => Ấn vào xem giỏ hàng sẽ thấy các sản phẩm sau khi ấn nút đặt mua

dat-hang-trong-laravel-1 (1)

Như vậy bạn đã tạo ra được chức năng đặt hàng trong Laravel rồi đấy. Trong phần tiếp theo mình sẽ hướng dẫn bạn Update, xóa sản phẩm và tích hợp thanh toán hãy theo dõi nhé.

Cùng chủ đề

Bình luận!

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *