Share code tạo giỏ hàng đơn giản Javascript

Một giỏ hàng là thành phần quan trọng nhất của một trang web thương mại điện tử. Nó lưu trữ tất cả các thông tin cơ bản liên quan đến các sản phẩm mà khách hàng thêm vào danh sách mua của họ. Một giỏ hàng lý tưởng đi kèm với tất cả các tính năng cơ bản bao gồm thêm, loại bỏ sản phẩm, tính toán giá và lưu trữ thông tin giỏ hàng địa phương cho người dùng không truy cập. Bộ sưu tập các dự án giỏ hàng JavaScript được chọn bằng tay này giúp bạn nhanh chóng tìm ra chức năng Frontend Frontend tốt nhất vào Giỏ hàng cho trang web của bạn.

Nội dung chính Show

Cho dù bạn đang làm việc trên một mẫu trang web mua sắm, tạo một chức năng bổ sung đơn giản vào giỏ hàng hoặc tạo một cửa hàng trực tuyến đơn giản, các dự án này có thể hữu ích cho bạn để tiết kiệm thời gian và công sức của bạn. Về cơ bản, các dự án này chỉ bao gồm Frontend, thêm vào các chức năng của xe đẩy để tạo một trang web mua sắm tương tác. Do đó, bạn có thể chức năng hóa phần phụ trợ cho các mẫu này để tạo một trang web Thương mại điện tử hoạt động đầy đủ.

1. Mẫu giỏ hàng mua sắm một trang

Nếu bạn đang tìm kiếm một trang một trang, thêm vào tương tác của xe đẩy với thiết kế hiện đại, thì dự án mua sắm JavaScript sau đây khá phù hợp với nhu cầu của bạn. Nó đi kèm với một thẻ sản phẩm đa chức năng. Người dùng có thể dễ dàng xem, điều hướng các biến thể sản phẩm và thư viện hình ảnh bên trong thẻ.

Tính năng mã:

1. Thêm sản phẩm vào giỏ hàng và tổng giá.
2. Bố cục trang web cơ bản bao gồm thanh điều hướng, thanh bên và khu vực widget.
3. Lật thẻ sản phẩm và hiển thị số liệu thống kê trên chuột.
4. Thư viện ảnh băng chuyền bên trong thẻ sản phẩm.
5. Tải hình ảnh tiếp theo/trước.

Nhà thiết kế: Virgil Pana

2. Giỏ hàng HTML CSS & JavaScript

Dự án mua sắm sau đây cung cấp một chức năng bổ sung đơn giản hóa vào xe đẩy. Nó sử dụng JavaScript và WebStorage API/cookie để ghi nhớ dữ liệu giỏ hàng được chuyển đổi thành định dạng JSON. Nói chung, nó cung cấp một giải pháp trang giỏ hàng hoàn chỉnh để tính giá các mặt hàng được thêm vào ở đầu trước và dữ liệu được thu thập có thể được chuyển đến máy chủ cùng với quy trình thanh toán.

Tính năng mã: & NBSP;

1. Nhận tổng số giá và thông tin sản phẩm từ phiên về tải.
2. Tạo đối tượng sản phẩm và chuyển đổi dữ liệu sản phẩm thành JSON để lưu trữ.
3. Gửi dữ liệu sản phẩm đến lưu trữ phiên.
4. Lối nhiều sản phẩm JSON Đối tượng vào mảng giỏ hàng.
5. Tạo vật phẩm giỏ hàng lưu trữ phiên.
6. Nhận dữ liệu giỏ hàng hiện có từ lưu trữ và chuyển đổi nó trở lại thành một mảng.
7. Ghi đè dữ liệu giỏ hàng trong lưu trữ phiên.
8. Chuyển đổi từng sản phẩm JSON trong mảng trở lại thành đối tượng.
9. Nhận giá trị tài sản của giá, tính toán và hiển thị tổng giá.
10. Chèn và cập nhật các mục giỏ hàng trên HTML của trang web.
11. Gửi phản hồi cho người dùng trên thành công được thêm vào.
12. Cho phép người dùng loại bỏ các đối tượng lưu trữ phiên và làm mới tổng số giỏ hàng.

Tác giả: Jasmine Smalley

3. Giỏ hàng JavaScript có lưu trữ cục bộ

Dự án giỏ hàng sau đây sử dụng lưu trữ địa phương để lưu thông tin giỏ hàng. Nó dựa trên một ý tưởng đơn giản, để giảm thiểu các yêu cầu đến máy chủ và chỉ gửi giỏ hàng cuối cùng đến máy chủ để đánh giá và thanh toán. Về cơ bản, nó sử dụng Foundation JS cho giao diện trực quan trong khi chức năng giỏ hàng đã được viết bằng vani JavaScript. Dù sao đi nữa, bạn có thể tích hợp dự án giỏ hàng này với bố cục hiện tại của bạn mà không cần sử dụng bất kỳ sự phụ thuộc nào khác.

Tính năng mã: & NBSP;

1. Nhận tổng số giá và thông tin sản phẩm từ phiên về tải.
2. Tạo đối tượng sản phẩm và chuyển đổi dữ liệu sản phẩm thành JSON để lưu trữ.
3. Gửi dữ liệu sản phẩm đến lưu trữ phiên.
4. Lối nhiều sản phẩm JSON Đối tượng vào mảng giỏ hàng.
5. Tạo vật phẩm giỏ hàng lưu trữ phiên.

Nhận dữ liệu giỏ hàng hiện có từ lưu trữ và chuyển đổi nó trở lại thành một mảng.

Ghi đè dữ liệu giỏ hàng trong lưu trữ phiên.

Chuyển đổi từng sản phẩm JSON trong mảng trở lại thành đối tượng.

Tính năng mã: & NBSP;

1. Nhận tổng số giá và thông tin sản phẩm từ phiên về tải.
2. Tạo đối tượng sản phẩm và chuyển đổi dữ liệu sản phẩm thành JSON để lưu trữ.
3. Gửi dữ liệu sản phẩm đến lưu trữ phiên.
4. Lối nhiều sản phẩm JSON Đối tượng vào mảng giỏ hàng.
5. Tạo vật phẩm giỏ hàng lưu trữ phiên.
6. Nhận dữ liệu giỏ hàng hiện có từ lưu trữ và chuyển đổi nó trở lại thành một mảng.
7. Ghi đè dữ liệu giỏ hàng trong lưu trữ phiên.
8. Chuyển đổi từng sản phẩm JSON trong mảng trở lại thành đối tượng.

Nhận giá trị tài sản của giá, tính toán và hiển thị tổng giá.

Chèn và cập nhật các mục giỏ hàng trên HTML của trang web.

Code Features: 

1. Provides a simple way to add products to the cart.
2. Displays a floating cart button to view, clear, and check out the cart.
3. Provides a popup sign-up form template for the checkout process.

Author: djoba

6. Javascript Online Shopping Cart

If you are looking for a ready-to-use shopping project for your online store, then the following JavaScript shopping project helps you to save time and effort. This shopping cart project is purely built with HTML, CSS, and JavaScript without any dependency.

It comes with a basic webpage layout including navbar, products grid layout, and footer. Users can add products to the cart and view added products by clicking the cart icon located on the navbar. Similarly, added products can be removed one by one or clear the cart at once. Moreover, it supports local storage and call-back functions to boost the development process.

Code Features:

1. Toggle shopping cart visibility.
2. Get contents from local storage, if nothing is there, create an empty array.
3. Save content inside local storage.
4. Calculate the total price in the cart.
5. Extract the price numbers from the cart items to calculate the total.
6. Retrieve the td element in the cart where the product price is stored for each product in the cart.
7. Iterate over each td node and extract the price.
8. Display all products and total costs in the cart.
9. Save selected products in local storage and display them in the cart together.
10. To avoid users adding the same course twice, check the product is not in LS already before adding it
11. Clear all products from the cart [and local storage].
12. Checkout: just clear the cart after the user confirms the checkout process.

Author: Ksenia

7. Javascript Shopping Cart Source Code

The following JavaScript shopping cart source code helps you to create a simple cart page functionality. It allows users to add products and update quantity with plus/minus buttons. Similarly, users can remove products from the cart or clear the cart at once. It is purely built with HTML, CSS, and JavaScript. So, you can customize each part of this project according to your needs.

Code Features: 

1. Allows users to add/remove products.
2. Allows users to increase/decrease products quantity.
3. Updates products quantity and counts the total bill.
4. Function to clear cart at once.

Author: Manish Gupta

8. Javascript Ajax Shopping Cart

Sometimes, we need to update cart data simultaneously on both the frontend and backend. In this case, we need an AJAX request to update data. So, the following JavaScript shopping project comes with an AJAX cart functionality. Basically, it provides an array for AJAX support to store/update cart information. You can integrate this code snippet into your project to calculate tax, shipping fee, subtotal, and total amount.

Code Features: 

1. Provides an array for AJAX support to store products/cart data.
2. Counts products quantity.
3. Calculates tax, shipping fee, subtotal, and total amount.
4. Allows users to remove products from the cart.

Author: 若邪

9. JavaScript Drag and Drop Shopping Cart

The drag and drop shopping cart provides a realistic experience while adding products to the cart. The following shopping cart is built with drag and drop methods to add products by dragging them into the cart. Generally, it comes with a very basic style for the cart but you can further style it to make a realistic shopping trolley, pushcart, or basket. Thus, it will make a mind-blowing user experience while dragging products to the shopping trolley.

Code Features: 

1. An array of all shopping items using getElementsByClassName.
2. The specific area to drop the items in [shopping cart].
3. An area to display the shopping cart list after being dropped.
4. Creates an eventListener to each item that will pull data of the specific item.
5. Grabs the info [in this case, multiple values].
6. Assigns the type of dataTransfer to copy.
7. Appends the data to the dataTransfer.
8. Pulls all the data you need into a JSON format from the current item.
9. Specifies the dataTransfer and the data type to be copied.
10. Creates an eventListener on e drop Zone [this is the process of moving data over to another area].
11. Creates an eventListener for when the item is dropped.
12. Prevents capturing/bubbling phases [not to be confused with preventDefault].
13. Retrieves all data from JSON into their own variables.
14. Function to append the item onto the shopping cart screen.
15. Appends the dropped data into the shopping cart.
16. Initiates the drag and drop when ALL content is loaded.

Author: serdeljac

10. JavaScript Vanilla Shopping Cart

If you need a dependency-free shopping cart, then the following Vanilla JavaScript project might be helpful for you. It comes with a simple page layout in which products have been arranged side by side. An add to cart button appears while hovering over a product. Users can add products to the cart and view collected products by clicking the cart button. The cart button will fire the side navigation menu containing products. Moreover, users can increase/decrease products quantity and remove products from that menu.

Tính năng mã: & NBSP;

1. Thêm sản phẩm vào giỏ hàng.
2. Tạo điều hướng phụ cho các sản phẩm bổ sung.
3. Cho phép người dùng loại bỏ sản phẩm khỏi giỏ hàng.
4. Cho phép người dùng cập nhật số lượng của mỗi sản phẩm thông qua đầu vào số.
5. Đếm và hiển thị tổng giá.
6. Cung cấp một trình nghe sự kiện cho nút mua hàng.

Tác giả: Elieb77

11. Cập nhật số lượng trong giỏ hàng javascript

Dự án Giỏ hàng JavaScript sau đây rất hữu ích để cập nhật số lượng sản phẩm và tổng hóa đơn trên trang Giỏ hàng. Về cơ bản, nó cung cấp các nút cộng/trừ để cập nhật số lượng và hiển thị tổng giá theo các mục. Hơn nữa, người dùng có thể xóa sản phẩm khỏi danh sách giỏ hàng và đi cho quy trình thanh toán.

Tính năng mã: & NBSP;

1. Cho phép người dùng loại bỏ sản phẩm khỏi giỏ hàng.
2. Cho phép người dùng cập nhật số lượng của mỗi sản phẩm thông qua đầu vào số.
3. Đếm và hiển thị tổng giá.

Cung cấp một trình nghe sự kiện cho nút mua hàng.

Tác giả: Elieb77

11. Cập nhật số lượng trong giỏ hàng javascript

Tính năng mã: & NBSP;

1. Dự án Giỏ hàng JavaScript sau đây rất hữu ích để cập nhật số lượng sản phẩm và tổng hóa đơn trên trang Giỏ hàng. Về cơ bản, nó cung cấp các nút cộng/trừ để cập nhật số lượng và hiển thị tổng giá theo các mục. Hơn nữa, người dùng có thể xóa sản phẩm khỏi danh sách giỏ hàng và đi cho quy trình thanh toán.
2. Cập nhật tổng hóa đơn theo tăng/giảm số lượng sản phẩm.
3. Cung cấp gọi lại cho quá trình thanh toán.
4. Tác giả: žiga Miklič

12. Mua sắm Modal Modal sử dụng bootstrap

Hiển thị giỏ hàng trong cửa sổ bật lên phương thức cung cấp trải nghiệm người dùng tốt trước quá trình thanh toán. Dự án Giỏ hàng sau đây sử dụng thành phần phương thức Bootstrap để hiển thị danh sách giỏ hàng với tính năng cập nhật số lượng, số lượng giá và nút thanh toán. Hơn nữa, nó cho phép người dùng loại bỏ các sản phẩm được thêm vào với phương thức xác nhận xóa.

Hiển thị menu giỏ hàng bên trong phương thức gốc bootsrap.

Tính năng mã: & NBSP;

1. Cho phép người dùng xóa các sản phẩm được thêm vào với hộp thoại Xác nhận.
2. Cho phép người dùng tăng/giảm số lượng sản phẩm.
3. Tính toán và hiển thị tổng hóa đơn.
4. Tác giả: Cristina
5. 13. Thêm vào mã HTML giỏ hàng
6. Các dự án thêm vào sau đây vào giỏ hàng đi kèm với bố cục của Navbar, GRID Sản phẩm và chức năng giỏ hàng. & NBSP; Về cơ bản, dự án này đi kèm với tất cả các chức năng giỏ hàng cơ bản bao gồm Thêm, Xóa, Trống xe và cập nhật dữ liệu giỏ hàng với JSON. Hơn nữa, bạn có thể tích hợp dự án mua sắm này với các mẫu HTML5 để làm cho nó đẹp hơn.

Cung cấp một mảng cho dữ liệu JSON để lấy sản phẩm từ máy chủ.

Sử dụng chuỗi mẫu để tạo thẻ sản phẩm.

Tạo các nút trống và các nút thanh toán dựa trên điều kiện kiểm tra xem mảng ProductinIncart có trống không.