Xây dựng giỏ hàng với JavaScript | ES6

Mục lục

1. Giới thiệu về giỏ hàng
2. Cài đặt ban đầu
   1. Tạo môi trường cần thiết
   2. Tải tệp template khởi đầu
   3. Cấu trúc dự án
3. Hiển thị sản phẩm
   1. Render sản phẩm từ dữ liệu
   2. Thêm sản phẩm vào giỏ hàng
4. Cập nhật giỏ hàng
   1. Hiển thị số lượng sản phẩm trong giỏ hàng
   2. Tính tổng giá trị giỏ hàng
5. Xóa sản phẩm khỏi giỏ hàng
6. Lưu trữ dữ liệu giỏ hàng
   1. Sử dụng localStorage để lưu trữ
   2. Lấy dữ liệu giỏ hàng từ localStorage
   3. Cập nhật giỏ hàng từ dữ liệu đã lưu trữ

Giới thiệu về giỏ hàng

Trong bài viết này, chúng ta sẽ xây dựng một giỏ hàng sử dụng JavaScript. Chúng ta sẽ tạo giao diện cho giỏ hàng, cho phép người dùng thêm và xóa sản phẩm, và tính tổng giá trị của giỏ hàng. Sản phẩm sẽ được lưu trữ trong localStorage, cho phép giỏ hàng giữ nguyên khi trang web được tải lại.

Cài đặt ban đầu

Để bắt đầu, chúng ta cần cài đặt môi trường phát triển và tải tệp template khởi đầu.

1. Tạo môi trường cần thiết

Trước tiên, chúng ta cần cài đặt Node.js để có thể sử dụng npm để quản lý các gói phụ thuộc trong dự án.

2. Tải tệp template khởi đầu

Chúng ta sẽ tải tệp template khởi đầu từ đường dẫn được cung cấp. Sau khi tải về, giải nén tệp template vào thư mục dự án của bạn.

3. Cấu trúc dự án

Sau khi giải nén tệp template, bạn sẽ thấy cấu trúc dự án như sau:

• index.html: Tệp HTML chứa giao diện người dùng
• app.js: Tệp JavaScript chứa mã logic của giỏ hàng
• style.css: Tệp CSS chứa kiểu dáng của giao diện

Tiếp theo, chúng ta sẽ đi vào từng bước chi tiết để tạo giỏ hàng sử dụng JavaScript.

Hiển thị sản phẩm

Đầu tiên, chúng ta sẽ hiển thị các sản phẩm từ dữ liệu. Sản phẩm sẽ được lưu trữ trong một mảng và chúng ta sẽ sử dụng một vòng lặp để hiển thị từng sản phẩm trên giao diện.

1. Render sản phẩm từ dữ liệu

Trong tệp app.js, chúng ta sẽ tạo một hàm renderProducts để hiển thị sản phẩm từ mảng dữ liệu.

function renderProducts() {
  const productsElement = document.querySelector('.products');

  products.forEach((product) => {
    const productHTML = `
      <div class="product">
        <img src="${product.image}" alt="${product.name}">
        <h3>${product.name}</h3>
        <p>${product.price}</p>
        <button>Add to cart</button>
      </div>
    `;
    productsElement.innerHTML += productHTML;
  });
}

Trong hàm này, chúng ta sử dụng vòng lặp forEach để duyệt qua từng sản phẩm trong mảng products. Với mỗi sản phẩm, chúng ta tạo một chuỗi HTML để hiển thị thông tin về sản phẩm và thêm nút "Add to cart" để người dùng có thể thêm sản phẩm vào giỏ hàng.

2. Thêm sản phẩm vào giỏ hàng

Tiếp theo, chúng ta sẽ thêm chức năng để người dùng có thể thêm sản phẩm vào giỏ hàng khi nhấp vào nút "Add to cart".

function addToCart(productId) {
  const product = products.find((item) => item.id === productId);
  if (product) {
    cart.push(product);
    updateCart();
  }
}

Trong hàm addToCart, chúng ta sử dụng phương thức find để tìm sản phẩm với id tương ứng trong mảng products. Nếu tìm thấy sản phẩm, chúng ta thêm sản phẩm đó vào mảng cart và gọi hàm updateCart để cập nhật giao diện giỏ hàng.

Sau khi đã hoàn thành phần hiển thị sản phẩm và thêm sản phẩm vào giỏ hàng, chúng ta có thể di chuyển sang các bước tiếp theo để hoàn thiện giỏ hàng.

Cập nhật giỏ hàng

Trong phần này, chúng ta sẽ cập nhật giao diện giỏ hàng bằng cách hiển thị số lượng sản phẩm và tổng giá trị của giỏ hàng.

1. Hiển thị số lượng sản phẩm trong giỏ hàng

Đầu tiên, chúng ta sẽ cập nhật số lượng sản phẩm trong giỏ hàng mỗi khi người dùng thêm hoặc xóa sản phẩm.

function updateCart() {
  const cartItemsElement = document.querySelector('.cart-items');
  cartItemsElement.innerHTML = cart.length;
}

Trong hàm updateCart, chúng ta lấy phần tử HTML có lớp cart-items để hiển thị số lượng sản phẩm trong giỏ hàng. Chúng ta đơn giản gán giá trị của cart.length vào innerHTML của phần tử này.

2. Tính tổng giá trị giỏ hàng

Tiếp theo, chúng ta sẽ tính tổng giá trị của giỏ hàng dựa trên số lượng và giá của từng sản phẩm.

function updateCart() {
  const cartItemsElement = document.querySelector('.cart-items');
  const subtotalElement = document.querySelector('.subtotal');

  cartItemsElement.innerHTML = cart.length;

  let totalPrice = 0;
  cart.forEach((item) => {
    totalPrice += item.price;
  });

  subtotalElement.textContent = totalPrice.toFixed(2);
}

Trong hàm updateCart, chúng ta tạo một biến totalPrice và sử dụng vòng lặp forEach để tính tổng giá trị của từng sản phẩm trong giỏ hàng dựa trên giá của từng sản phẩm. Cuối cùng, chúng ta hiển thị tổng giá trị đã tính trong phần tử có lớp subtotal.

Sau khi hoàn thành cập nhật giỏ hàng, chúng ta đã hoàn thành phần chính của giỏ hàng. Bây giờ, chúng ta chỉ cần thêm các chức năng như xóa sản phẩm khỏi giỏ hàng và lưu trữ dữ liệu giỏ hàng vào localStorage để giỏ hàng giữ nguyên khi trang web được tải lại.

Xóa sản phẩm khỏi giỏ hàng

Để xóa một sản phẩm khỏi giỏ hàng, chúng ta cần thêm sự kiện click vào từng sản phẩm trong giỏ hàng và gọi hàm removeFromCart khi người dùng nhấp vào.

function removeFromCart(productId) {
  cart = cart.filter((item) => item.id !== productId);
  updateCart();
}

Trong hàm removeFromCart, chúng ta sử dụng phương thức filter để lọc các sản phẩm trong giỏ hàng và chỉ giữ lại các sản phẩm có id khác với productId được truyền vào. Sau đó, chúng ta gọi hàm updateCart để cập nhật giao diện.

Lưu trữ dữ liệu giỏ hàng

Cuối cùng, chúng ta cần lưu trữ dữ liệu giỏ hàng vào localStorage để giỏ hàng giữ nguyên khi người dùng tải lại trang web.

function saveCartToLocalStorage() {
  localStorage.setItem('cart', JSON.stringify(cart));
}

function getCartFromLocalStorage() {
  const savedCart = localStorage.getItem('cart');
  cart = savedCart ? JSON.parse(savedCart) : [];
}

Trong hàm saveCartToLocalStorage, chúng ta sử dụng phương thức setItem của localStorage để lưu trữ giỏ hàng. Đầu tiên, chúng ta chuyển đổi giỏ hàng thành chuỗi JSON bằng cách sử dụng JSON.stringify, sau đó chúng ta lưu chuỗi này dưới dạng một cặp khóa-giá trị trong localStorage.

Trong hàm getCartFromLocalStorage, chúng ta sử dụng phương thức getItem của localStorage để lấy dữ liệu giỏ hàng đã lưu trữ. Sau đó, chúng ta sử dụng JSON.parse để chuyển đổi chuỗi JSON thành một mảng. Nếu không tìm thấy dữ liệu giỏ hàng trong localStorage, chúng ta sẽ gán giá trị mặc định là một mảng rỗng.

Cuối cùng, chúng ta cần gọi các hàm getCartFromLocalStorage và saveCartToLocalStorage để lấy dữ liệu giỏ hàng từ localStorage và cập nhật dữ liệu giỏ hàng khi cần thiết.

Kết luận

Trong bài viết này, chúng ta đã xây dựng một giỏ hàng sử dụng JavaScript. Chúng ta đã hiển thị các sản phẩm từ dữ liệu, thêm sản phẩm vào giỏ hàng, cập nhật số lượng sản phẩm và tổng giá trị của giỏ hàng, xóa sản phẩm khỏi giỏ hàng, và lưu trữ dữ liệu giỏ hàng vào localStorage để giỏ hàng giữ nguyên khi trang web được tải lại.

Các bước được thực hiện theo từng phần và cung cấp thông tin chi tiết về cách triển khai các chức năng của giỏ hàng. Hy vọng bạn đã hài lòng với bài viết này và có thể áp dụng kiến thức đã học vào các dự án của mình.

FAQ:

1. Có thể tăng số lượng sản phẩm trong giỏ hàng lên không?

   • Có, bạn có thể tăng số lượng sản phẩm trong giỏ hàng lên bằng cách nhấp vào nút "+" bên cạnh sản phẩm đó. Số lượng sản phẩm sẽ được tăng lên và tổng giá trị của giỏ hàng sẽ được cập nhật.

2. Làm thế nào để xóa tất cả sản phẩm trong giỏ hàng?

   • Để xóa tất cả sản phẩm trong giỏ hàng, bạn có thể nhấp vào nút "Xóa giỏ hàng" hoặc "Xóa tất cả" có sẵn trong giao diện. Sau đó, tất cả sản phẩm sẽ bị xóa khỏi giỏ hàng và giỏ hàng sẽ trở về trạng thái ban đầu.

3. Làm thế nào để thay đổi số lượng sản phẩm trong giỏ hàng?

   • Để thay đổi số lượng sản phẩm trong giỏ hàng, bạn có thể nhấp vào nút "-" hoặc "+" bên cạnh sản phẩm đó để giảm hoặc tăng số lượng sản phẩm tương ứng. Số lượng sản phẩm và tổng giá trị của giỏ hàng sẽ được cập nhật theo số lượng được thay đổi.

4. Làm thế nào để đặt lại giỏ hàng về trạng thái ban đầu?

   • Để đặt lại giỏ hàng về trạng thái ban đầu, bạn có thể nhấp vào nút "Đặt lại" hoặc "Làm mới" có sẵn trong giao diện. Sau đó, tất cả sản phẩm sẽ bị xóa khỏi giỏ hàng và giỏ hàng sẽ trở về trạng thái ban đầu.

5. Làm thế nào để lưu trữ giỏ hàng khi tôi tắt trình duyệt?

   • Khi bạn thêm sản phẩm vào giỏ hàng, dữ liệu giỏ hàng sẽ được lưu trữ trong localStorage của trình duyệt. Khi bạn tắt trình duyệt và mở lại trang web, dữ liệu giỏ hàng sẽ được khôi phục từ localStorage và giỏ hàng sẽ giữ nguyên như trước khi tắt trình duyệt.