Chương 11-Bài 6. Thực hiện Trang Giỏ hàng Cart
Tác giả: Dương Nguyễn Phú Cường
Ngày đăng:
8/3/2025, 17:31
Lượt xem: 536
Workflow xử lý
Step 1: tạo file xử lý cho Trang Giỏ hàng
- Tạo file
/frontend/thanhtoan/cart.php
<?php
// hàm `session_id()` sẽ trả về giá trị SESSION_ID (tên file session do Web Server tự động tạo)
// - Nếu trả về Rỗng hoặc NULL => chưa có file Session tồn tại
if (session_id() === '') {
// Yêu cầu Web Server tạo file Session để lưu trữ giá trị tương ứng với CLIENT (Web Browser đang gởi Request)
session_start();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NenTang.vn</title>
<!-- Nhúng file Quản lý các Liên kết CSS dùng chung cho toàn bộ trang web -->
<?php include_once(__DIR__ . '/../layouts/styles.php'); ?>
<link href="/php/myhand/assets/frontend/css/style.css" type="text/css" rel="stylesheet" />
<style>
.hinhdaidien {
width: 100px;
height: 100px;
}
</style>
</head>
<body class="d-flex flex-column h-100">
<!-- header -->
<?php include_once(__DIR__ . '/../layouts/partials/header.php'); ?>
<!-- end header -->
<main role="main" class="mb-2">
<!-- Block content -->
<?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');
// Kiểm tra dữ liệu trong session
$giohangdata = [];
if (isset($_SESSION['giohangdata'])) {
$giohangdata = $_SESSION['giohangdata'];
} else {
$giohangdata = [];
}
?>
<div class="container mt-4">
<!-- Vùng ALERT hiển thị thông báo -->
<div id="alert-container" class="alert alert-warning alert-dismissible fade d-none" role="alert">
<div id="thongbao"> </div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<h1 class="text-center">Giỏ hàng</h1>
<div class="row">
<div class="col col-md-12">
<?php if (!empty($giohangdata)) : ?>
<table id="tblGioHang" class="table table-bordered">
<thead>
<tr>
<th>STT</th>
<th>Ảnh đại diện</th>
<th>Tên sản phẩm</th>
<th>Số lượng</th>
<th>Đơn giá</th>
<th>Thành tiền</th>
<th>Hành động</th>
</tr>
</thead>
<tbody id="datarow">
<?php $stt = 1; ?>
<?php foreach ($giohangdata as $sanpham) : ?>
<tr>
<td><?= $stt ?></td>
<td>
<?php if (empty($sanpham['hinhdaidien'])) : ?>
<img src="/php/myhand/assets/shared/img/default-image_600.png" class="img-fluid hinhdaidien" />
<?php else : ?>
<img src="/php/myhand/assets/uploads/products/<?= $sanpham['hinhdaidien'] ?>" class="img-fluid hinhdaidien" />
<?php endif; ?>
</td>
<td><?= $sanpham['sp_ten'] ?></td>
<td>
<input type="number" class="form-control" id="soluong_<?= $sanpham['sp_ma'] ?>" name="soluong" value="<?= $sanpham['soluong'] ?>" />
<button class="btn btn-primary btn-sm btn-capnhat-soluong" data-sp-ma="<?= $sanpham['sp_ma'] ?>">Cập nhật</button>
</td>
<td><?= number_format($sanpham['gia'], 2, ".", ",")?> vnđ</td>
<td><?= number_format($sanpham['soluong'] * $sanpham['gia'], 2, ".", ",")?> vnđ</td>
<td>
<!-- Nút xóa, bấm vào sẽ xóa thông tin dựa vào khóa chính `sp_ma` -->
<a id="delete_<?= $stt ?>" data-sp-ma="<?= $sanpham['sp_ma'] ?>" class="btn btn-danger btn-delete-sanpham">
<i class="fa fa-trash" aria-hidden="true"></i> Xóa
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php else : ?>
<h2>Giỏ hàng rỗng!!!</h2>
<?php endif; ?>
<a href="/php/myhand/frontend" class="btn btn-warning btn-md"><i class="fa fa-arrow-left" aria-hidden="true"></i> Quay
về trang chủ</a>
<a href="/php/myhand/frontend/thanhtoan/thanhtoan.php" class="btn btn-primary btn-md"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Thanh toán</a>
</div>
</div>
</div>
<!-- End block content -->
</main>
<!-- footer -->
<?php include_once(__DIR__ . '/../layouts/partials/footer.php'); ?>
<!-- end footer -->
<!-- Nhúng file quản lý phần SCRIPT JAVASCRIPT -->
<?php include_once(__DIR__ . '/../layouts/scripts.php'); ?>
<!-- Các file Javascript sử dụng riêng cho trang này, liên kết tại đây -->
<script>
$(document).ready(function() {
function removeSanPhamVaoGioHang(id) {
// Dữ liệu gởi
var dulieugoi = {
sp_ma: id
};
// AJAX đến API xóa sản phẩm khỏi Giỏ hàng trong Session
$.ajax({
url: '/php/myhand/frontend/api/giohang-xoasanpham.php',
method: "POST",
dataType: 'json',
data: dulieugoi,
success: function(data) {
// Refresh lại trang
location.reload();
},
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');
}
});
};
// Đăng ký sự kiện cho các nút đang sử dụng class .btn-delete-sanpham
$('#tblGioHang').on('click', '.btn-delete-sanpham', function(event) {
// debugger;
event.preventDefault();
var id = $(this).data('sp-ma');
console.log(id);
removeSanPhamVaoGioHang(id);
});
// Cập nhật số lượng trong Giỏ hảng
function capnhatSanPhamTrongGioHang(id, soluong) {
// Dữ liệu gởi
var dulieugoi = {
sp_ma: id,
soluong: soluong
};
$.ajax({
url: '/php/myhand/frontend/api/giohang-capnhatsanpham.php',
method: "POST",
dataType: 'json',
data: dulieugoi,
success: function(data) {
// Refresh lại trang
location.reload();
},
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');
}
});
};
$('#tblGioHang').on('click', '.btn-capnhat-soluong', function(event) {
// debugger;
event.preventDefault();
var id = $(this).data('sp-ma');
var soluongmoi = $('#soluong_' + id).val();
capnhatSanPhamTrongGioHang(id, soluongmoi);
});
});
</script>
</body>
</html>
Ủng hộ tác giả
Bình luận
Bình luận của bạnNền tảng các kiến thức học tập
Cùng nhau học tập, khám phá các kiến thức nền tảng về Lập trình web, mobile, database nhé.
Nền tảng kiến thức - Hành trang tới tương lai hân hạnh phục vụ Quý khách!
Khám phá, trải nghiệm ngay
Vui lòng đăng nhập để gởi bình luận!
Đăng nhậpChưa có bình luận nào!