Hướng dẫn lập trình Giỏ hàng bằng JavaScript
LỜI MỞ ĐẦU
Chào mọi người! Chào mừng đến với video của tôi về cách lập trình giỏ hàng sử dụng chỉ Vanilla JavaScript.
Trong video này, chúng ta sẽ xây dựng một giỏ hàng đơn giản sử dụng JavaScript cơ bản. Chúng ta sẽ có các mục để chọn và thêm vào giỏ hàng của chúng ta và dưới đây là giỏ hàng của chúng ta. Nếu chúng ta nhấp vào "Thêm vào giỏ hàng", nó sẽ thêm một mục vào giỏ hàng và cập nhật tổng giá, tăng quantity sẽ tăng giá, giảm quantity sẽ giảm giá và xóa nó sẽ cho phép chúng ta xóa mục khỏi giỏ hàng. Nếu chúng ta thử thêm một mục vào giỏ hàng nhiều lần, nó sẽ báo cho chúng ta là đã thêm mục này vào giỏ hàng rồi, vì vậy không thể thêm lại. Tiếp theo, nếu chúng ta nhấp vào "Mua hàng", nó sẽ hiển thị "Cảm ơn bạn đã mua hàng" và xóa tất cả các mục từ giỏ hàng của chúng ta, mô phỏng việc mua hàng. Nếu bạn mới xem video này, tất cả mã để tạo kiểu cho trang web cũng như HTML có sẵn trong video được liên kết trong phần miêu tả hoặc trong các video thông tin trong góc. Vậy bây giờ hãy bắt đầu với việc lập trình thực tế của những gì chúng ta có ở đây bằng cách mở trang store.html ở đây với máy chủ trực tiếp để xem những gì chúng ta đã bắt đầu để làm việc với nhé!
MỤC LỤC
- MỞ ĐẦU
- CÀI ĐẶT
- THIẾT LẬP TRANG STORE.HTML
- THÊM BUTTON REMOVE
- CẬP NHẬP TỔNG GIÁ TRỊ GIỎ HÀNG
- THÊM HÀM XỬ LÝ THÊM VÀO GIỎ HÀNG
- KẾT LUẬN
- TÀI NGUYÊN
CÀI ĐẶT
Để bắt đầu làm việc với giỏ hàng bằng JavaScript, chúng ta cần tạo một tệp HTML chứa trang web của chúng ta. Chúng ta cũng cần một tệp CSS để tạo kiểu cho trang web. Sau đó, chúng ta tạo một tệp JavaScript mới để viết mã cho giỏ hàng của chúng ta.
Đầu tiên, chúng ta tạo tệp HTML với cấu trúc cơ bản. Chúng ta sẽ có một phần header để đặt tiêu đề trang web, một phần content để hiển thị các mục trong giỏ hàng và một phần footer để đặt các nút cho người dùng thực hiện hành động liên quan đến giỏ hàng.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Giỏ hàng</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Giỏ hàng</h1>
</header>
<section class="content">
<!-- Nơi hiển thị các mục trong giỏ hàng -->
</section>
<footer>
<button class="button purchase">Mua hàng</button>
</footer>
<script src="cart.js"></script>
</body>
</html>
Tiếp theo, chúng ta tạo một tệp CSS để tạo kiểu cho trang web của chúng ta. Ta sẽ tạo ra một số kiểu cơ bản cho tiêu đề, các mục trong giỏ hàng và nút mua hàng.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
text-align: center;
padding: 20px;
background-color: #f7f7f7;
}
h1 {
font-size: 32px;
margin: 0;
}
section.content {
padding: 20px;
}
section.content .item {
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
}
section.content .item img {
width: 100px;
height: auto;
float: left;
margin-right: 10px;
}
section.content .item .title {
font-size: 24px;
font-weight: bold;
}
section.content .item .price {
font-size: 18px;
color: green;
}
section.content .item .quantity {
margin: 5px 0;
}
section.content .item .remove {
text-align: right;
}
Sau cùng, chúng ta tạo một tệp JavaScript mới để viết mã cho giỏ hàng của chúng ta. Chúng ta bắt đầu bằng việc viết mã để hiển thị các mục trong giỏ hàng. Chúng ta sẽ tạo một mảng danh sách các mục trong giỏ hàng và viết một hàm để hiển thị chúng trên trang web.
HIỂN THỊ CÁC MỤC TRONG GIỎ HÀNG
Đầu tiên, chúng ta khai báo một mảng danh sách các mục trong giỏ hàng và điền nó với các mục giả mạo. Chúng ta có thể thay thế chúng bằng dữ liệu thực sau này.
const items = [
{ id: 1, title: 'Áo thun', price: 200000, image: 'aothun.jpg' },
{ id: 2, title: 'Quần jeans', price: 500000, image: 'quanjeans.jpg' },
{ id: 3, title: 'Áo sơmi', price: 300000, image: 'aosomi.jpg' },
{ id: 4, title: 'Áo khoác', price: 700000, image: 'aokhoac.jpg' },
];
Sau đó, chúng ta viết một hàm để hiển thị các mục trong giỏ hàng trên trang web. Trong hàm này, chúng ta sẽ lặp qua mảng items và tạo các phần tử HTML tương ứng cho mỗi mục. Chúng ta sẽ tạo các phần tử hình ảnh, tiêu đề, giá và nút loại bỏ cho mỗi mục. Các phần tử này sẽ được thêm vào phần nội dung của trang web.
function displayItems() {
const contentElement = document.querySelector('.content');
// Xóa các mục hiện tại trên trang web
contentElement.innerHTML = '';
// Lặp qua từng mục và tạo các phần tử HTML tương ứng
items.forEach(item => {
const itemElement = document.createElement('div');
itemElement.classList.add('item');
const imageElement = document.createElement('img');
imageElement.src = `images/${item.image}`;
itemElement.appendChild(imageElement);
const titleElement = document.createElement('div');
titleElement.classList.add('title');
titleElement.innerText = item.title;
itemElement.appendChild(titleElement);
const priceElement = document.createElement('div');
priceElement.classList.add('price');
priceElement.innerText = `${item.price} VNĐ`;
itemElement.appendChild(priceElement);
const removeButton = document.createElement('button');
removeButton.classList.add('remove');
removeButton.innerText = 'Xóa';
removeButton.addEventListener('click', () => {
removeItem(item.id);
displayItems();
});
itemElement.appendChild(removeButton);
contentElement.appendChild(itemElement);
});
}
// Hiển thị các mục trong giỏ hàng lên trang web
displayItems();
Như vậy, chúng ta đã hoàn thành việc hiển thị các mục trong giỏ hàng trên trang web của chúng ta. Bây giờ, mỗi mục sẽ có một hình ảnh, một tiêu đề, một giá và một nút loại bỏ. Chức năng của nút loại bỏ sẽ được triển khai sau.
XÓA MỤC KHỎI GIỎ HÀNG
Tiếp theo, chúng ta sẽ triển khai chức năng để xóa một mục khỏi giỏ hàng khi người dùng nhấp vào nút loại bỏ tương ứng. Đầu tiên, chúng ta sẽ tạo một hàm để xóa một mục dựa trên ID của mục đó. Trong hàm này, chúng ta sẽ sử dụng phương pháp findIndex của mảng để tìm chỉ mục của mục có ID trùng khớp. Sau đó, chúng ta sẽ sử dụng phương thức splice để xóa mục khỏi mảng items.
function removeItem(itemId) {
const index = items.findIndex(item => item.id === itemId);
if (index !== -1) {
items.splice(index, 1);
}
}
Sau đó, bây giờ chúng ta cần cập nhật lại hiển thị của các mục trong giỏ hàng sau khi xóa một mục. Chúng ta đã có hàm displayItems() để hiển thị các mục, vì vậy chúng ta chỉ cần gọi lại hàm này.
removeButton.addEventListener('click', () => {
removeItem(item.id);
displayItems();
});
Bây giờ, khi chúng ta nhấp vào nút loại bỏ, mục tương ứng sẽ được xóa khỏi giỏ hàng và trang web sẽ được cập nhật tự động để hiển thị các mục còn lại trong giỏ hàng.
CẬP NHẬT TỔNG GIÁ TRỊ GIỎ HÀNG
Tiếp theo, chúng ta sẽ cập nhật tổng giá trị của giỏ hàng sau mỗi lần thêm hoặc xóa một mục khỏi giỏ hàng. Để làm điều này, chúng ta sẽ tạo một hàm updateTotal() để tính toán tổng giá trị từ các mục trong giỏ hàng và cập nhật hiển thị của tổng giá trị trên trang web.
function updateTotal() {
let total = 0;
items.forEach(item => {
total += item.price;
});
const totalElement = document.querySelector('.total');
totalElement.innerText = `Tổng giá trị: ${total} VNĐ`;
}
Sau đó, chúng ta sẽ gọi lại hàm updateTotal() sau mỗi lần thêm hoặc xóa một mục khỏi giỏ hàng.
// Xóa một mục khỏi giỏ hàng và cập nhật hiển thị
removeButton.addEventListener('click', () => {
removeItem(item.id);
displayItems();
updateTotal();
});
Cuối cùng, chúng ta cần hiển thị tổng giá trị ban đầu của giỏ hàng khi trang web tải lên. Chúng ta có thể thêm một phần tử HTML để hiển thị tổng giá trị vào phần footer của trang web.
<footer>
<p class="total">Tổng giá trị: 0 VNĐ</p>
<button class="purchase">Mua hàng</button>
</footer>
Bây giờ, khi trang web tải lên lần đầu, tổng giá trị sẽ được hiển thị là 0 VNĐ. Sau đó, khi chúng ta thêm hoặc xóa các mục khỏi giỏ hàng, tổng giá trị sẽ được cập nhật tự động.
THÊM HÀM XỬ LÝ THÊM VÀO GIỎ HÀNG
Cuối cùng, chúng ta sẽ triển khai chức năng thêm các mục mới vào giỏ hàng khi người dùng nhấp vào nút "Mua hàng". Đầu tiên, chúng ta cần chọn phần tử nút "Mua hàng" và gắn sự kiện bấm vào nút này. Sau đó, chúng ta sẽ tạo một hàm để xử lý sự kiện khi nút "Mua hàng" được nhấp. Trong hàm này, chúng ta sẽ thông báo cho người dùng rằng họ đã mua hàng bằng cách sử dụng hàm alert() và sau đó xóa tất cả các mục khỏi giỏ hàng bằng cách cập nhật lại mảng items trong giỏ hàng và gọi lại hàm displayItems() để cập nhật hiển thị.
const purchaseButton = document.querySelector('.purchase');
purchaseButton.addEventListener('click', () => {
alert('Cảm ơn bạn đã mua hàng');
items.length = 0; // Xóa tất cả các mục trong giỏ hàng
displayItems();
updateTotal();
});
Bây giờ, khi chúng ta nhấp vào nút "Mua hàng", một cửa sổ pop-up sẽ xuất hiện thông báo cho người dùng rằng họ đã mua hàng. Sau đó, tất cả các mục trong giỏ hàng sẽ được xóa và trang web sẽ được cập nhật tự động để hiển thị giỏ hàng trống.
KẾT LUẬN
Đó là cách chúng ta có thể tạo một giỏ hàng sử dụng JavaScript từng bước một. Bằng cách sử dụng các sự kiện và phương pháp của JavaScript, chúng ta có thể tạo ra một giỏ hàng đơn giản nhưng hoạt động tốt trên trang web của chúng ta. Chúng ta đã học cách hiển thị các mục trong giỏ hàng, xóa mục khỏi giỏ hàng, cập nhật tổng giá trị và thêm mục mới vào giỏ hàng. Tất cả các chức năng này hoạt động cùng nhau để tạo ra trải nghiệm người dùng tốt khi mua sắm trực tuyến. Tôi hy vọng rằng bài viết này đã giúp bạn hiểu cách lập trình giỏ hàng bằng JavaScript và áp dụng nó vào các dự án của riêng bạn.
TÀI NGUYÊN
- Mã nguồn HTML và CSS cho trang web: GitHub
- Video hướng dẫn thực hiện giỏ hàng của chúng tôi: YouTube
Cảm ơn bạn đã theo dõi video này! Chúc bạn một ngày tốt lành!
AI SEO Assistant
WHY YOU SHOULD CHOOSE Proseoai
