Tạo giỏ hàng bằng javascript cho website, làm dự Án shopping cart với javascript (phần 1)

     

Chào chúng ta, từ bây giờ mình vẫn hướng dẫn chúng ta tạo thành một trang shopping cart đơn giản dễ dàng bởi JS, HTML với CSS. Mình ko thực hiện bất kì thư viện với framework làm sao nhằm code bối cảnh cũng tương tự những tính năng của shopping cart.

Bạn đang xem: Tạo giỏ hàng bằng javascript cho website, làm dự Án shopping cart với javascript (phần 1)

Trong nội dung bài viết này bản thân đang hướng dẫn các bạn một trong những chức năng trong giỏ hàng nhỏng sau :

Render list sản phẩm từ 1 data có sẵnCập nhật số số lượng sản phẩm hiện gồm trong giỏ hàngXóa thành phầm khỏi giỏ hàngTgiỏi đổi con số sản phẩmCập nhật tổng tiềnÁp dụng mã giảm giá

Đây là đồ họa giỏ mặt hàng thuở đầu của bọn chúng ta

*

Source code HTML, CSS bản thân nhằm tại đây, các chúng ta cũng có thể tìm hiểu thêm nhé =))

Để năng động số lượng hàng hóa đang hiển thị trong giỏ sản phẩm thì bản thân sẽ mockup một danh sách số số lượng hàng hóa, từng thành phầm ở đây đang là một trong đối tượng người dùng bao gồm các ở trong tính nhỏng : id, thương hiệu sản phẩm, miêu tả của thành phầm, giá sản phẩm, hình hình ảnh cùng con số của từng sản phẩm sinh sống vào giỏ hàng

// Random id bỗng dưng trong tầm 0 -> 100000function randomId() return Math.floor(Math.random() * 100000);// Danh sách sản phẩmlet products = < id: randomId(), name: 'Áo dạng hình nữ cam khu đất phối hận cổ trắng dập ly', description: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, velit.', price: 250000, image: 'https://image.yes24.vn/Upload/ProductImage/anhduong201605/1947415_L.jpg?width=550&height=550', count: 1, , id: randomId(), name: 'Áo White lộc bình lé black tay loe dễ dàng thương', description: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae, velit.', price: 350000, image: 'https://image.yes24.vn/Upload/ProductImage/anhduong201605/1914666_L.jpg?width=550&height=550', count: 1, ,>;Bên trên tôi đã mockup 1 mảng bảo gồm 2 thành phầm với lưu lại bọn chúng vào biến đổi products

Dường như bản thân có tư tưởng function randomId() để random thiên nhiên Id mang đến từng sản phẩm

Sau lúc khái niệm hoàn thành mảng các sản phẩm hiện bao gồm, bước tiếp theo mình sẽ hiển thị nó ra phía bên ngoài giao diện

Render sản phẩm ra bên ngoài giao diện

Để render thành phầm mình sẽ có mang function renderUI()

let productsEle = document.querySelector('.products');function renderUI(arr) // Code xử lýTrong function renderUI bản thân sẽ truyền vào 1 mảng, phụ thuộc mảng này chúng ta đang render từng nguyên tố tương ứng, còn productsEle đó là vị trí bọn họ sẽ render từng sản phẩm vào đó.

Xem thêm: Cách Tắt Chuột Cảm Ứng Trên Laptop Asus, Dell, Vaio, Lenovo

function renderUI(arr) productsEle.innerHTML = ''; if (arr.length == 0) productsEle.insertAdjacentHTML( 'afterbegin', 'Không bao gồm thành phầm làm sao vào giỏ hàng' ); document.querySelector('.option-container').style.display = 'none'; return; Trước khi bước đầu render, họ đã clear hết toàn bộ nội dung sinh sống vào thành phần productsEle bởi vì vào bối cảnh ban đầu, mình bao gồm fix cứng 2 sản phẩm bằng mã HTML để những tín đồ nhân tiện quan sát và theo dõi, dẫu vậy bây giờ họ đang có một list thành phầm vừa mockup, điều này không cần thiết nữa

Tiếp theo mình sẽ kiểm soát thêm trường vừa lòng arr truyền vào có rỗng hay không, trường hợp mảng lúc đầu là rỗng, có nghĩa là không có sản phẩm nào vào giỏ mặt hàng, bây giờ bọn họ vẫn hiển thị một message lên trên mặt bối cảnh cùng với nội dung "Không có sản phẩm như thế nào trong giỏ hàng" để thông báo cho những người cần sử dụng.

Đồng thời họ cũng ẩn thành phần ".option-container" đi, vì đó là vị trí hiển thị mã code giảm ngay và tổng tiền đơn hàng, lúc không có thành phầm làm sao vào giỏ hàng thì những nguyên tố này sẽ không cần thiết đề nghị hiển thị lên

Trường đúng theo mảng arr có tài liệu lúc này họ đã liên tiếp xử trí nhỏng sau :

function renderUI(arr) // ... for (let i = 0; i `; }Tại đây bản thân vẫn sử dụng vòng lặp for nhằm để mắt qua những phần tử của mảng (mỗi bộ phận của mảng là object cất dữ liệu của sản phẩm)

Với mỗi vòng lặp, mình sẽ tạo ra một cấu tạo HTML của một loại mặt hàng (những bạn có thể copy vào file html ban sơ nhé, tổng thể thẻ li vào ul.products đấy). Sau kia bản thân chỉ cần cnhát các cực hiếm khớp ứng vào thôi, ở đây nhằm cnhát quý hiếm mình thực hiện cú pháp của template string trong ES6 ($) nhưng lại chúng ta cần lưu giữ phải để vào vết backtick nhé (``) chứ đọng chưa phải vết nháy knghiền đâu.

À !!! còn một điều nữa, vày để hiển thị giá bán thành phầm ra ngoài giao diện mang lại giống như phong cách nước ta tí, mình tất cả định nghĩa thêm function convertMoney để convert price lịch sự định dạng VND

// Convert number to money VNDfunction convertMoney(num) return num.toLocaleString('it-IT', style: 'currency', currency: 'VND' );Để xem công dụng coi sản phẩm đang hiển thị lên chưa, hiện giờ họ vẫn Call function renderUI cùng truyền vào products (list thành phầm sẽ mockup ban đầu)

window.onload = renderUI(products);Tại trên đây mình lắng tai sự kiện onload để bảo đảm an toàn HTML, CSS load chấm dứt thì mới tiến hành Gọi function

Và đấy là kế quả thuở đầu của bọn chúng ta

*

Nghe vẻ tác dụng dường như nuột nà đấy
Chuyên mục: Domain Hosting