Xóa sản phẩm trong giỏ hàng javascript

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:

-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:

Xóa sản phẩm trong giỏ hàng javascript

– 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

Xóa sản phẩm trong giỏ hàng javascript

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:

Xóa sản phẩm trong giỏ hàng javascript

2. Tạo view giỏ hàng

1. Tạo site/views/cartview.php
2. Lấy code bootstrap : Vào https://getbootstrap.com/ => nhắp Docs => Components => Card cuộn xuống mục có header footer => Copy

Xóa sản phẩm trong giỏ hàng javascript

3. Paste vào file cartview.php
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:

 
STT
TênSP
Số lượng
Tiền
Bỏ

Tham khảo kết quả nhé:

Xóa sản phẩm trong giỏ hàng javascript

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

Xóa sản phẩm trong giỏ hàng javascript

6. Thay chữ Số lượng thành code: (đọc code thử nhé)

- +

7. Dùng bootstrap icon thay cho chữ Bỏ :

– Ở đầu view cardview.php, nhúng bootstrap icon

– Xóa chữ Bỏ và thay bằng code (đọc code thử nhé)


      

(Xem hướng dẫn bootstrap icon tại : https://icons.getbootstrap.com/ )

Xem thử kết quả:

Xóa sản phẩm trong giỏ hàng javascript

3. Hiện sản phẩm

– 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

Xóa sản phẩm trong giỏ hàng javascript

Xem kết quả:

Xóa sản phẩm trong giỏ hàng javascript

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 "
"; 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=1
http://localhost/banhang/site/?act=cart&what=add&id=2
http://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 "
"; 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 “

”; 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’]:

- +
0

– 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=1
http://localhost/banhang/site/?act=cart&what=add&id=2
http://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:

- +
2

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/cartview.php và code cho tag a chứa icon bi-trash

Xóa sản phẩm trong giỏ hàng javascript

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 cartview.php.

- +
3

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

Xóa sản phẩm trong giỏ hàng javascript

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)

Xóa sản phẩm trong giỏ hàng javascript
form trỏ lên chức năng lưu đơn hàng để lưu đon hàng vào database

d. Trong form, code hiện thông tin người nhận

- +
4

Xem thử nhé

e. Code hiện phương thức thanh toán và giao hàng

- +
5

f. Thêm code cho nút Đặt hàng

- +
6

Xem thử, kết quả như sau:

Xóa sản phẩm trong giỏ hàng javascript

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

Xóa sản phẩm trong giỏ hàng javascript

2. Code trong hàm luudonhang

- +
7

Code trong model

- +
8

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é.