Step 1: tạo AJAX thêm dữ liệu Giỏ hàng vào Session

  • Tạo file frontend/ajax/giohang-themsanpham-ajax.php
<?php
// Include file cấu hình ban đầu của `Twig`
require_once __DIR__ . '/../../bootstrap.php';

// Truy vấn database để lấy danh sách
// 1. Include file cấu hình kết nối đến database, khởi tạo kết nối $conn
include_once(__DIR__ . '/../../dbconnect.php');

// Lấy thông tin người dùng gởi đến
$sp_ma = $_POST['sp_ma'];
$sp_ten = $_POST['sp_ten'];
$soluong = $_POST['soluong'];
$gia = $_POST['sp_gia'];
$hinhdaidien = $_POST['hinhdaidien'];

// Lưu trữ giỏ hàng trong session
// Nếu khách hàng đặt hàng cùng sản phẩm đã có trong giỏ hàng => cập nhật lại Số lượng, Thành tiền
if (isset($_SESSION['giohangdata'])) {
    $data = $_SESSION['giohangdata'];
    $data[$sp_ma] = array(
        'sp_ma' => $sp_ma,
        'sp_ten' => $sp_ten,
        'soluong' => $soluong,
        'gia' => $gia,
        'thanhtien' => ($soluong * $gia),
        'hinhdaidien' => $hinhdaidien
    );

    // lưu dữ liệu giỏ hàng vào session
    $_SESSION['giohangdata'] = $data;
} else { // Nếu khách hàng đặt hàng sản phẩm chưa có trong giỏ hàng => thêm vào
    $data[$sp_ma] = array(
        'sp_ma' => $sp_ma,
        'sp_ten' => $sp_ten,
        'soluong' => $soluong,
        'gia' => $gia,
        'thanhtien' => ($soluong * $gia),
        'hinhdaidien' => $hinhdaidien
    );

    // lưu dữ liệu giỏ hàng vào session
    $_SESSION['giohangdata'] = $data;
}

echo json_encode($_SESSION['giohangdata']);

Step 2: tạo AJAX xóa dữ liệu Giỏ hàng khỏi Session

  • Tạo file frontend/ajax/giohang-xoasanpham-ajax.php
<?php
// Include file cấu hình ban đầu của `Twig`
require_once __DIR__ . '/../../bootstrap.php';

// Truy vấn database để lấy danh sách
// 1. Include file cấu hình kết nối đến database, khởi tạo kết nối $conn
include_once(__DIR__ . '/../../dbconnect.php');

// Lấy thông tin người dùng gởi đến
$sp_ma = $_POST['sp_ma'];

// Lưu trữ giỏ hàng trong session
// Nếu khách hàng đặt hàng cùng sản phẩm đã có trong giỏ hàng => cập nhật lại Số lượng, Thành tiền
if (isset($_SESSION['giohangdata'])) {
    $data = $_SESSION['giohangdata'];
    
    if(isset($data[$sp_ma])) {
        unset($data[$sp_ma]);
    }

    // lưu dữ liệu giỏ hàng vào session
    $_SESSION['giohangdata'] = $data;
}

echo json_encode($_SESSION['giohangdata']);

Step 3: tạo AJAX cập nhật sản phẩm trong Giỏ hàng

<?php
// Include file cấu hình ban đầu của `Twig`
require_once __DIR__ . '/../../bootstrap.php';

// Truy vấn database để lấy danh sách
// 1. Include file cấu hình kết nối đến database, khởi tạo kết nối $conn
include_once(__DIR__ . '/../../dbconnect.php');

// Lấy thông tin người dùng gởi đến
$sp_ma = $_POST['sp_ma'];
$soluong = $_POST['soluong'];

// Lưu trữ giỏ hàng trong session
// Nếu khách hàng đặt hàng cùng sản phẩm đã có trong giỏ hàng => cập nhật lại Số lượng, Thành tiền
if (isset($_SESSION['giohangdata'])) {
    $data = $_SESSION['giohangdata'];
    $sanphamcu = $data[$sp_ma];
    
    $data[$sp_ma] = array(
        'sp_ma' => $sanphamcu['sp_ma'],
        'sp_ten' => $sanphamcu['sp_ten'],
        'soluong' => $soluong,
        'gia' => $sanphamcu['gia'],
        'thanhtien' => ($soluong * $sanphamcu['gia']),
        'hinhdaidien' => $sanphamcu['hinhdaidien']
    );

    // lưu dữ liệu giỏ hàng vào session
    $_SESSION['giohangdata'] = $data;
}

echo json_encode($_SESSION['giohangdata']);

Step 4: sử dụng JQUERY gọi AJAX thêm dữ liệu vào Giỏ hàng

  • Hiệu chỉnh trang templates/frontend/product/detail.html.twig
<script>
    function addSanPhamVaoGioHang() {
        var dulieugoi = {
            sp_ma: $('#sp_ma').val(),
            sp_ten: $('#sp_ten').val(),
            sp_gia: $('#sp_gia').val(),
            hinhdaidien: $('#hinhdaidien').val(),
            soluong: $('#soluong').val(),
        };
        console.log((dulieugoi));
        $.ajax({
            url: '/frontend/ajax/giohang-themsanpham-ajax',
            method: "POST",
            dataType: 'json',
            data: dulieugoi,
            success: function (data) {
                console.log(data);
                var htmlString =
                    `Sản phẩm đã được thêm vào Giỏ hàng. <a href="/frontend/thanhtoan/giohang">Xem Giỏ hàng</a>.`;
                $('#thongbao').html(htmlString);
                // Hiện thông báo
                $('.alert').removeClass('d-none').addClass('show');
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(textStatus, errorThrown);
                var htmlString = `<h1>Không thể xử lý</h1>`;
                $('#thongbao').html(htmlString);
                // Hiện thông báo
                $('.alert').removeClass('d-none').addClass('show');
            }
        });
    };
    $('#btnThemVaoGioHang').click(function (event) {
        event.preventDefault();
        addSanPhamVaoGioHang();
    });
</script>