Bạn đang quan tâm đến Code xử lý giỏ hàng phải không? Nào hãy cùng Vuihecungchocopie đón xem bài viết này ngay sau đây nhé, vì nó vô cùng thú vị và hay đấy!
Code xử lý giỏ hàng để thực hiện các chức năng liên quan đến mua hàng của khách. Như chọn, thêm, xóa sản phẩm, lưu đơn hàng vào database….
A. Tổ chức database để lưu đơn hàng
Bạn sẽ cần ít nhất hai table trong database để lưu thông tin:
Bạn đang xem: code giỏ hàng php
-Table thứ nhất lưu thông tin đơn hàng, đặt tên donhang luôn nhé. Table sẽ gồm ít nhất các column như sau:
– Table thứ hai dùng để lưu chi tiết các đơn hàng, tức lưu các sản phẩm mua trong các đơn hàng
B. Thực hiện chức năng hiện giỏ hàng
Giỏ hàng là nơi hiện thông tin các sản phẩm user đã chọn để mua. Có nút Thanh toán, Tổng tiền, nút Bỏ sản phẩm (không mua nữa)… Tùy nhu cầu website, có khi tính thêm phí shipping, thuế VAT…
1. Route vào chức năng hiện giỏ hàng
Trong file site/controllers/home.php, code để thêm chức năng hiện giỏ hàng:
2. Tạo view giỏ hàng
1. Tạo site/views/cartview.php2. Lấy code bootstrap : Vào vuihecungchocopie.vn/ => nhắp Docs => Components => Card cuộn xuống mục có header footer => Copy
3. Paste vào file vuihecungchocopie.vn 4. Sửa text:- Sửa Featured thành SẢN PHẨM BẠN ĐÃ CHỌN- Xóa 3 tag h5, p, a bên trong div card-body rồi code bên trong card-body như sau:
<div class=”d-flex”> <div class=”p-2 border”>STT</div> <div class=”p-2 border col-4 “>TênSP</div> <div class=”p-2 border col-3 border text-center”>Số lượng</div> <div class=”p-2 border col-2 border text-end”>Tiền</div> <div class=”p-2 border flex-grow-1 text-end”>Bỏ</div> </div>
Tham khảo kết quả nhé:
Xem thử http://localhost/banhang/site/?act=cartview sẽ thấy card hiện ra, chữ canh giữa và padding trong card-body còn khá lớn. Chỉnh nữa nhé
5. Bổ sung p-0 vào div card-body và xóa text-center thay bằng col-10 m-auto (cho độ rộng nhỏ lại và canh giữa) cho đẹp
6. Thay chữ Số lượng thành code: (đọc code thử nhé)
<div class=”input-group”> <span class=”input-group-text btn btn-danger” onclick=”this.parentNode.querySelector(‘input[type=number]’).stepDown()”> – </span> <input type=”number” value=”1″ class=”form-control text-center” min=”1″ max=”100″> <span class=”input-group-text btn btn-success” onclick=”this.parentNode.querySelector(‘input[type=number]’).stepUp()”> + </span> </div>
7. Dùng bootstrap icon thay cho chữ Bỏ :
– Ở đầu view vuihecungchocopie.vn, nhúng bootstrap icon
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css”>
– Xóa chữ Bỏ và thay bằng code (đọc code thử nhé)
<a href=”#” class=”btn btn-default “> <i class=”bi bi-trash”></i> </a>
(Xem hướng dẫn bootstrap icon tại : vuihecungchocopie.vn/ )
Xem thử kết quả:
3. Hiện sản phẩm
Xem thêm: Cách ứng tiền Viettel 5115 như thế nào?
– Trong hàm cartview của controller home, khai báo biến session giohang như sau : ( Giả định user đã chọn ba sản phẩm có id là 1, 2 và 7)
$_SESSION[‘giohang’] = [ 1 =>[‘TenDT’=>’OPPO A93’,’Amount’=>3, ‘Gia’=>7300000], 2 => [‘TenDT’=>’Vsmart Aris’,’Amount’=>4, ‘Gia’=>6300000], 7 => [‘TenDT’=>’Realme 7 Pro’,’Amount’=>5, ‘Gia’=>8300000] ] ;
– Trong views/cartview.php, lặp qua biến session giỏ hàng để hiện sản phẩm
Xem kết quả:
Mời bạn thực hiện: cho hiện STT tăng dần và định dạng tiền thành dạng tiền tệ như hình trên nhé, không làm thì thôi ?
C. Thực hiện hành động trên giỏ hàng: thêm, xóa…
1.Thêm sản phẩm vào giỏ hàng
– Trong site/controllers/home.php. code hàm cart
function cart(){ //Tiếp nhậtn biến id (mã sản phẩm) và what (để biết thêm/xóa sp) $id = $_GET[‘id’]; settype($id, “int”); $what =”add”; if(isset($_GET[‘what’])) $what = $_GET[‘what’]; if ($what==”add”){ if (isset($_SESSION[‘giohang’])==false) $_SESSION[‘giohang’]=[]; //tạo mảng rổng nếu chưa có $spFromDB = $this->model->detail($id); //if ($spFromDB==null) … $spInCart = $_SESSION[‘giohang’][$id]; //[‘TenDT’=>’A’,’Amount’=>2] if ($spInCart!=null) $soluong=$spInCart[‘Amount’]+1; else $soluong = 1; $_SESSION[‘giohang’][$id]=[ ‘TenDT’=>$spFromDB[‘TenDT’], ‘Gia’=>$spFromDB[‘Gia’], ‘Amount’ =>$soluong ]; echo “<pre>”; print_r($_SESSION[‘giohang’]); }//if what==”add” $viewFile = “views/cartview.php”; require_once “layout.php”; }//function cart
– Test: Xem thử nhiều lần các địa chỉ sau, sẽ thấy thông tin thêm vào giỏ hàng
http://localhost/banhang/site/?act=cart&what=add&id=1http://localhost/banhang/site/?act=cart&what=add&id=2http://localhost/banhang/site/?act=cart&what=add&id=3
2. Xóa sản phẩm đã có trong giỏ hàng
Code tiếp trong hàm cart ở trên sau đoạn if ($what==”add”)
if ($what==”remove”){ unset($_SESSION[‘giohang’][$id]); echo “<pre>”; print_r($_SESSION[‘giohang’]); }//$what==”remove”
– Test: Xem thử nhiều lần các địa chỉ sau, sẽ thấy thông tin bọ xóa khỏi giỏ hàng
http://localhost/banhang/site/?act=cart&what=remove&id=1 http://localhost/banhang/site/?act=cart&what=remove&id=2 http://localhost/banhang/site/?act=cart&what=remove&id=3ử
3. Xử lý sau khi thêm/xóa sản phẩm trong giỏ hàng
Sau khi thêm xóa sản phẩm (trong mục 1 và 2 ở trên) , dòng lệnh echo “<pre>”; print_r($_SESSION[‘giohang’]); chỉ để hiện biến giohang trong session để test. Tùy nhu cầu mà bạn có thể bỏ dòng lệnh này, hoặc chuyển hướng đến trang khác. Thường thì sẽ chuyển đến trang hiện giỏ hàng, do đó dòng lệnh trên bạn sửa lại như sau:
header(“location: “. SITE_URL.”?act=cartview”);
Cuộn lên trong hàm cartview của controller home, xóa đoạn code trước đây đã gán cho $_SESSION[‘giohang’]:
$_SESSION[‘giohang’] = [1 =>[‘TenDT’=>’OPPO A93’,’Amount’=>3, ‘Gia’=>7300000],2 => [‘TenDT’=>’Vsmart Aris’,’Amount’=>4, ‘Gia’=>6300000],7 => [‘TenDT’=>’Realme 7 Pro’,’Amount’=>5, ‘Gia’=>8300000]] ;
– Test: Xem thử nhiều lần các địa chỉ sau, sẽ thấy chuyển hướng đến trang xem giỏ hàng mỗi lần request:
http://localhost/banhang/site/?act=cart&what=add&id=1http://localhost/banhang/site/?act=cart&what=add&id=2http://localhost/banhang/site/?act=cart&what=add&id=3
D. Tạo liên kết để người dùng chủ động thêm xóa sản phẩm
1. Tạo liên kêt thêm sản phẩm vào giỏ hàng
Trong website bán hàng, tại những nơi hiện sản phẩm, bạn phải có liên kết để user nhắp chọn sản phẩm (để mua). Cụ thể trong các view hiện sản phẩm như home. detail, sản phẩm mới , sản phẩm nổi bật, sản phẩm theo loại…cần có link để user nhắp chọn.
Có thể tạo link như sau: mở file views/home.php rồi xóa button Chọn , thay bằng code:
<a class=”btn btn-warning” href=”<?=SITE_URL.”/?act=cart&what=add&id=”.$sp[‘idDT’]?>”> Chọn </a>
Chú ý: Nếu vẫn muốn dùng button thì bạn có thể viết trong sự kiện onclick của để dẫn user sang trang thêm sản phẩm cũng được. Bạn tự viết nhé
2. Tạo liên kêt xóa sản phẩm trong giỏ hàng
Khi giỏ hàng hiện ra, bạn phải cho user xóa sản phẩm không còn dự định mua. Mở file views/vuihecungchocopie.vn và code cho tag a chứa icon bi-trash
Test: Xem thử trang giỏ hàng, nhắp các icon trash, phải thấy sản phẩm được xóa khỏi giỏ hàng.
E. Các tính băng bổ sung cho giỏ hàng
Khi hiện giỏ hàng , bạn không chỉ hiện các sản phẩm mà user đã chọn, mà cần thêm các nút/link tính năng sau: 1. Nút Thanh toán để dẫn user đến trang thanh toán. 2 Nút Tiếp tục mua hàng để dẫn suer về trang sản phẩm (hoặc trang trước). 3. Nút Xóa giỏ hàng để xóa toàn bộ sản phẩm trong giỏ hàng. 4. Tính tổng tiền 5. Các thông tin khác: tiền thuế, tiền shipping (nếu có)
Sau đây là code gợi ý cho 3 nút , bạn có thể đặt ở vị trí text 2 days ago hoặc ở đâu tùy ý trong vuihecungchocopie.vn.
<div class=”d-flex”> <div class=”p-2 flex-fill”> <a href=”<?=SITE_URL?>” class=”btn btn-secondary”>TIẾP TỤC MUA HÀNG</a> </div> <div class=”p-2 flex-fill text-center”> <a href=”<?=SITE_URL?>/?act=cart&what=removeAll” class=”btn btn-warning” >XÓA GIỎ HÀNG</a> </div> <div class=”p-2 flex-fill text-end”> <a href=”<?=SITE_URL?>/?act=thanhtoan” class=”btn btn-primary”>THANH TOÁN</a> </div> </div>
Xem thêm: Top 5 Game Cày Cuốc Offline Pc Hay Miễn Phí Đáng Để Chơi Nhất Năm 2021
Mời bạn thực hiện: tính tổng tiền các sản phẩm và hiện ra trang giỏ hàng nhé
F. Tạo trang thanh toán
Trang thanh toán hiện ra form để người mua điền thông tin của người mua và người nhận, phương thức thanh toán, phương thức giao hàng…
1. Route vào chức năng thanh toán
Trong site/controllers/home.php, code để thêm chức năng thanh toán
2. Tạo view thanh toán
a. Tạo file site/views/thanhtoan.php
b. Nhập text: TRANG THANH TOÁN rồi test thử trong trình duyệt http://localhost/banhang/site/?act=thanhtoan , nếu thấy text mới nhập là OK
c. Code hiện form thanh toán: Form phải có method là post, action trỏ lên chức năng luudonhang (sẽ tạo sau)
d. Trong form, code hiện thông tin người nhận
<fieldset class=”border m-2 p-3″> <legend class=”small text-primary fw-bold”>Thông tin người nhận hàng</legend> <div class=”form-group row mb-3″> <label for=”ht” class=”col-sm-2 col-form-label”>Họ tên</label> <div class=”col-sm-10″><input type=”text” class=”form-control” id=”ht” name=”HoTen”> </div> </div> <div class=”form-group row”> <label for=”email” class=”col-sm-2 col-form-label”>Email</label> <div class=”col-sm-10″> <input type=”email” class=”form-control” id=”email” name=”email”> </div> </div> </fieldset>
Xem thử nhé
e. Code hiện phương thức thanh toán và giao hàng
<div class=”m-2 d-flex”> <fieldset class=”border p-3 mr-2 col-6″> <legend class=”small text-primary fw-bold”>Phương thức thanh toán</legend> <div class=”form-group row”> <p><input type=”radio” name=”phuongthuctt” value=”ck”> Chuyển khoản</p> <p><input type=”radio” name=”phuongthuctt” value=”khinhan”> Khi nhận hàng</p> <p><input type=”radio” name=”phuongthuctt” value=”onepay”> Onepay</p> <p><input type=”radio” name=”phuongthuctt” value=”nganluong”> Ngân Lượng</p> </div> </fieldset> <fieldset class=”border p-3 ml-3 col-6″> <legend class=”small text-primary fw-bold”>Phương thức giao hàng</legend> <div class=”form-group row”> <p><input type=”radio” name=”phuongthuctt” value=”ghnhanh”> Giao hàng nhanh</p> <p><input type=”radio” name=”phuongthuctt” value=”ghtietkiem”> Giao hàng tiế t kiệm</p> <p><input type=”radio” name=”phuongthuctt” value=”vnpost”> VN Post</p> <p><input type=”radio” name=”phuongthuctt” value=”viettel”> Viettel</p> </div> </fieldset> </div>
f. Thêm code cho nút Đặt hàng
<div class=”py-2 m-2 d-flex justify-content-end”> <div class=”col-2 text-end”> <button class=”btn btn-success” type=”submit”>Mua hàng</button> </div> </div>
Xem thử, kết quả như sau:
Mời bạn thực hiện: ở trong form trên, mới chỉ có field họ tên và email. Bạn hãy thêm Địa chỉ người nhận, Điện thoại người nhận, Ghi chú nhé. Định dạng thêm cho đẹp
Nhập thử vào form rồi nhắp nút Mua hàng, nếu được dẫn đến trang http://localhost/banhang/site/?act=luudonhang là chỉnh xác. Tiếp theo sẽ thực hiện chức năng lưu đơn hàng.
G. Lưu đơn hàng và giỏ hàng vào database
1. Route vào chức năng lưu đơn hàng
Trong site/controllers/home.php, code để thêm chức năng lưu đơn hàng
2. Code trong hàm luudonhang
function luudonhang(){ $hoten = trim(strip_tags($_POST[‘HoTen’])); $email = trim(strip_tags($_POST[’email’])); if (isset($_SESSION[‘idDH’])) $idDH= $_SESSION[‘idDH’]; else $idDH=”-1″; $idDH = $this->model->luudonhangnhe($idDH, $hoten, $email); if ($idDH){ $_SESSION[‘idDH’] = $idDH; $giohang = $_SESSION[‘giohang’]; $this->model->luugiohangnhe($idDH, $giohang); header(“location:” . SITE_URL.”/act=camon”); }//if ($idDH) }//function luudonhang
Code trong model
function luudonhangnhe($idDH, $ht, $email){ if ($idDH==-1){ $sql = “INSERT INTO donhang SET TenNguoiNhan='{$ht}’, emailNguoiNhan='{$email}’,” . “ThoiDiemDatHang=Now(), AnHien=1”; $kq= $this->query($sql); if (!kq) return FASLSE; else return $this->conn->lastInsertId(); } else { $sql = “UPDATE donhang SET TenNguoiNhan='{$ht}’, emailNguoiNhan='{$email}’,” . “ThoiDiemDatHang=Now(), AnHien=1 where idDH=$idDH”; $kq= $this->query($sql); if (!kq) return FASLSE; else return $idDH; } }//function luudonhangnh function luugiohangnhe($idDH, $giohang){ $sql = “DELETE FROM donhangchitiet WHERE idDH=’$idDH'”; $this->query($sql); foreach ($giohang as $idDT=>$dt){ $tenDT = $dt[‘TenDT’]; $gia= $dt[‘Gia’]; $Amount= $dt[‘Amount’]; $sql = “INSERT INTO donhangchitiet SET idDH=’$idDH’, idDT= ‘$idDT’, ” . “TenDT='{$tenDT}’, Gia='{$gia}’, SoLuong=’$Amount'”; $kq= $this->query($sql); }//foreach }
Test bằng cách nhắp nút mua hàng, dữ liệu sẽ được lưu trong 2 table donhang và donangchitiet. Còn vì sao trong 2 hàm của model, lúc thì cập nhật, lúc là insert. rồi trước khi chèn vào table donhangchitet, lại phải delete trước chi vậy? Câu trả lời dành cho bạn nhé. ?
Mời bạn thực hiện : khi lưu đơn hàng, lưu cả phương thức than toán và phương thức giao hàng nhé. Trước khi lưu, hãy bổ sung vào table donhang 2 field mới là PhuongThucThanhToan và PhuongThucGiaoHang nhé.
H. Tạo trang cảm ơn
Mời bạn thực hiện nhé
Mời bạn thực hiện:
Xem thêm: giải bài tập công nghệ 11 trang 24
- Trên trang layout, thêm link Xem Giỏ hàng, khi nhắp vào dẫn user xem trang giỏ hàng.
- Khi user chọn 1 sản phẩm, hiện ra số sản phẩm(tăng 1) ngay sau link Xem Giỏ hàng ở trên.
- Trong chức năng xem giỏ hàng, trước khi hiện giỏ hàng hãy đếm xem có sản phẩm trong giỏ không, nếu không có thì hiện thông báo (tùy ý) mời user chọn sản phẩm.
- Khi thêm sản phẩm vào giỏ hàng, nếu số lượng user chọn trong giỏ lớn hơn SoLuongTonKho thì lấy SoLuongTonKho gán vào (tức không bán vượt quá số lượng tồn kho).
Công khai: VUIHECUNGCHOCOPIE.VN là trang web Tổng hợp Ẩm Thực - Game hay và Thủ Thuật hàng đầu VN, thuộc Chocopie Vietnam. Mời thính giả đón xem.
Chúng tôi trân trọng cảm ơn quý độc giả luôn ủng hộ và tin tưởng!
