Chào mừng bạn đến với hướng dẫn về cách tạo Giỏ hàng Javascript đơn giản. Tìm cách xây dựng một trang web thương mại điện tử hoặc ứng dụng web? . Giỏ hàng lưu trữ cục bộ độc lập không sử dụng bất kỳ khuôn khổ nào – Đọc tiếp để tìm hiểu
ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào
MỤC LỤC
TẢI XUỐNG & LƯU Ý
Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa
GHI CHÚ NHANH
Dành cho các bạn chỉ muốn sử dụng cái này như một “plugin”
- Chỉnh sửa
products.js, điền vào sản phẩm của riêng bạn - Đặt hình ảnh sản phẩm vào thư mục
images/ - Đặt
iURLtrong
0 phần A thành URL tuyệt đối nếu bạn gặp sự cố với hình ảnh// DUMMY PRODUCTS [PRODUCT ID : DATA] var products = { 123: { name : "iPon Min", img : "JS-CART-1.png", price : 123 }, 124: { name : "iPon Pro Max Plus", img : "JS-CART-2.png", price : 1234 } }; - Khởi chạy
1, sử dụng// DUMMY PRODUCTS [PRODUCT ID : DATA] var products = { 123: { name : "iPon Min", img : "JS-CART-1.png", price : 123 }, 124: { name : "iPon Pro Max Plus", img : "JS-CART-2.png", price : 1234 } };
2 chứ không phải// DUMMY PRODUCTS [PRODUCT ID : DATA] var products = { 123: { name : "iPon Min", img : "JS-CART-1.png", price : 123 }, 124: { name : "iPon Pro Max Plus", img : "JS-CART-2.png", price : 1234 } };
3// DUMMY PRODUCTS [PRODUCT ID : DATA] var products = { 123: { name : "iPon Min", img : "JS-CART-1.png", price : 123 }, 124: { name : "iPon Pro Max Plus", img : "JS-CART-2.png", price : 1234 } }; - Cuối cùng, hoàn thành trình tự thanh toán của riêng bạn
0, phần H// DUMMY PRODUCTS [PRODUCT ID : DATA] var products = { 123: { name : "iPon Min", img : "JS-CART-1.png", price : 123 }, 124: { name : "iPon Pro Max Plus", img : "JS-CART-2.png", price : 1234 } };
ẢNH CHỤP MÀN HÌNH
Được rồi, bây giờ chúng ta hãy đi vào cơ chế hoạt động của giỏ hàng
PHẦN 1] HTML
xe đẩy. html
Đó là tất cả cho dự án này và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn
NHIỀU DANH MỤC SẢN PHẨM?
Như bạn có thể nhận thấy, không có danh mục sản phẩm nào. Nhưng vâng, có thể thêm các phần với một số thay đổi
- Tạo một đối tượng
// [C] INITIALIZE
init : [] => {
// [C1] GET HTML ELEMENTS
cart.hPdt = document.getElementById["cart-products"];
cart.hItems = document.getElementById["cart-items"];
// [C2] DRAW PRODUCTS LIST
cart.hPdt.innerHTML = "";
let template = document.getElementById["template-product"].content, p, item;
for [let id in cart.products] {
p = cart.products[id];
item = template.cloneNode[true];
item.querySelector[".p-img"].src = cart.iURL + p.img;
item.querySelector[".p-name"].textContent = p.name;
item.querySelector[".p-price"].textContent = cart.currency + p.price.toFixed[2];
item.querySelector[".p-add"]. title = [] => cart.add[id];
cart.hPdt.appendChild[item];
}
// [C3] LOAD CART FROM PREVIOUS SESSION
cart.load[];
// [C4] LIST CURRENT CART ITEMS
cart.list[];
}
6 khác để chứa ID sản phẩm của từng danh mục. Ví dụ // [C] INITIALIZE
init : [] => {
// [C1] GET HTML ELEMENTS
cart.hPdt = document.getElementById["cart-products"];
cart.hItems = document.getElementById["cart-items"];
// [C2] DRAW PRODUCTS LIST
cart.hPdt.innerHTML = "";
let template = document.getElementById["template-product"].content, p, item;
for [let id in cart.products] {
p = cart.products[id];
item = template.cloneNode[true];
item.querySelector[".p-img"].src = cart.iURL + p.img;
item.querySelector[".p-name"].textContent = p.name;
item.querySelector[".p-price"].textContent = cart.currency + p.price.toFixed[2];
item.querySelector[".p-add"]. title = [] => cart.add[id];
cart.hPdt.appendChild[item];
}
// [C3] LOAD CART FROM PREVIOUS SESSION
cart.load[];
// [C4] LIST CURRENT CART ITEMS
cart.list[];
}
7 - Sửa đổi hàm
// [C] INITIALIZE
init : [] => {
// [C1] GET HTML ELEMENTS
cart.hPdt = document.getElementById["cart-products"];
cart.hItems = document.getElementById["cart-items"];
// [C2] DRAW PRODUCTS LIST
cart.hPdt.innerHTML = "";
let template = document.getElementById["template-product"].content, p, item;
for [let id in cart.products] {
p = cart.products[id];
item = template.cloneNode[true];
item.querySelector[".p-img"].src = cart.iURL + p.img;
item.querySelector[".p-name"].textContent = p.name;
item.querySelector[".p-price"].textContent = cart.currency + p.price.toFixed[2];
item.querySelector[".p-add"]. title = [] => cart.add[id];
cart.hPdt.appendChild[item];
}
// [C3] LOAD CART FROM PREVIOUS SESSION
cart.load[];
// [C4] LIST CURRENT CART ITEMS
cart.list[];
}
8 để vẽ các sản phẩm trong danh mục đã chọn
TÙY CHỌN SẢN PHẨM
Dành cho những anh chàng đang mỉa mai rằng “thêm tùy chọn sản phẩm dễ lắm, 5 phút là xong” – Tất nhiên là “quá đơn giản”, thậm chí bạn có thể làm trong vòng “chỉ vài phút”. Thoải mái thử thách bản thân
- Tạo một
// [C] INITIALIZE
init : [] => {
// [C1] GET HTML ELEMENTS
cart.hPdt = document.getElementById["cart-products"];
cart.hItems = document.getElementById["cart-items"];
// [C2] DRAW PRODUCTS LIST
cart.hPdt.innerHTML = "";
let template = document.getElementById["template-product"].content, p, item;
for [let id in cart.products] {
p = cart.products[id];
item = template.cloneNode[true];
item.querySelector[".p-img"].src = cart.iURL + p.img;
item.querySelector[".p-name"].textContent = p.name;
item.querySelector[".p-price"].textContent = cart.currency + p.price.toFixed[2];
item.querySelector[".p-add"]. title = [] => cart.add[id];
cart.hPdt.appendChild[item];
}
// [C3] LOAD CART FROM PREVIOUS SESSION
cart.load[];
// [C4] LIST CURRENT CART ITEMS
cart.list[];
}
9 mới - Đính kèm các tùy chọn cho sản phẩm
- Thay đổi danh sách sản phẩm để vẽ các tùy chọn
- Thay đổi cách giỏ hàng ghi lại các mặt hàng –
// [D] LIST CURRENT CART ITEMS [IN HTML]
list : [] => {
// [D1] RESET
cart.total = 0;
cart.hItems.innerHTML = "";
let item, empty = true;
for [let key in cart.items] {
if [cart.items.hasOwnProperty[key]] { empty = false; break; }
}
// [D2] CART IS EMPTY
if [empty] {
item = document.createElement["div"];
item.innerHTML = "Cart is empty";
cart.hItems.appendChild[item];
}
// [D3] CART IS NOT EMPTY - LIST ITEMS
else {
let template = document.getElementById["template-cart"].content, p;
for [let id in cart.items] {
p = cart.products[id];
item = template.cloneNode[true];
item.querySelector[".c-del"]. title = [] => cart.remove[id];
item.querySelector[".c-name"].textContent = p.name;
item.querySelector[".c-qty"].value = cart.items[id];
item.querySelector[".c-qty"].onchange = function [] { cart.change[id, this.value]; };
cart.hItems.appendChild[item];
cart.total += cart.items[id] * p.price;
}
// [D3-3] TOTAL AMOUNT
item = document.createElement["div"];
item.className = "c-total";
item.id = "c-total";
item.innerHTML = `TOTAL: ${cart.currency}${cart.total}`;
cart.hItems.appendChild[item];
// [D3-4] EMPTY & CHECKOUT
item = document.getElementById["template-cart-checkout"].content.cloneNode[true];
cart.hItems.appendChild[item];
}
}
0
Vâng, đó là tất cả, chỉ một vài bước mà thôi. Làm ơn đừng hỏi về các tùy chọn sản phẩm nữa… Nó “đơn giản” đến nỗi tôi thậm chí không muốn chạm vào nó
GIỎ HÀNG TỐT HƠN
Cảm ơn bạn đã đọc, và chúng tôi đã đi đến phần cuối của hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc
Làm cách nào để tạo một giỏ mua hàng đơn giản trong JavaScript?
Tạo Giỏ hàng bằng Mảng và Đối tượng trong vanilla JavaScript . Tiếp cận. Ban đầu, bạn có một danh sách các mặt hàng mua sắm được sắp xếp. . Sở thích. . Html cơ sở. . Tạo thư viện vật phẩm. . Tạo các chức năng cơ bản. . Hiển thị danh sách mua sắm. . Một chút CSS. . Thêm và xóa các mặt hàng khỏi giỏ hàng
Làm cách nào để tạo giỏ hàng bằng JavaScript?
Làm cách nào để tạo giỏ hàng JavaScript bằng sessionStorage? . setItem[] – Thêm vào giỏ hàng từ thư viện mua sắm bằng cách tham khảo id sản phẩm đã mua. . getItem[] – Đọc và hiển thị các mặt hàng trong giỏ hàng bằng cách lặp lại mảng đối tượng sessionStorage
Làm cách nào để thêm mặt hàng vào giỏ hàng JavaScript?
Để thêm sản phẩm vào giỏ hàng trực tiếp từ danh sách sản phẩm, số ID của sản phẩm phải được trích xuất từ địa chỉ đích của liên kết . Sau đó, sản phẩm có thể được thêm vào giỏ hàng bằng cách sử dụng ID của nó. /* * Thêm sản phẩm từ danh sách */ $[".
Làm cách nào để tạo giỏ hàng bằng HTML CSS và JavaScript?
Cho phép người dùng dọn sạch giỏ hàng bằng một cú nhấp chuột. . Step 1: Creating a card. HTML: .. . Step 2: Adding card header. HTML: .. . Step 3: Adding a product details. HTML: .. . Bước 4. Tạo bộ đếm. HTML. . Bước 5. Thêm phần giá. HTML. . Bước 7. Tạo phần thanh toán. HTML
Chủ Đề