Xử lý giỏ hàng javascript

Hành động “Thêm vào giỏ hàng” để chuyển sản phẩm vào bảng giỏ hàng

Trình xử lý JavaScript “thêm vào giỏ hàng” này là một chức năng cốt lõi của ví dụ. Mã này khởi tạo đối tượng JavaScript sessionStorage.

Khi nhấp vào nút “Thêm vào giỏ hàng” trên ô sản phẩm, chức năng này được gọi.

Nó đọc chi tiết sản phẩm từ lưới sản phẩm nơi đặt “Thêm vào giỏ hàng” được nhấp vào. Ví dụ, nó có tên sản phẩm, số lượng và các chi tiết khác.

Sử dụng các chi tiết này, mã này chuẩn bị phiên bản JSON của hàng mục giỏ hàng. Sau đó, nó nối các mặt hàng mới được thêm vào đối tượng sessionStorage giỏ hàng hiện có.

function addToCart(element) {
	var productParent = $(element).closest('div.product-item');

	var price = $(productParent).find('.price span').text();
	var productName = $(productParent).find('.productname').text();
	var quantity = $(productParent).find('.product-quantity').val();

	var cartItem = {
		productName: productName,
		price: price,
		quantity: quantity
	};
	var cartItemJSON = JSON.stringify(cartItem);

	var cartArray = new Array();
	// If javascript shopping cart session is not empty
	if (sessionStorage.getItem('shopping-cart')) {
		cartArray = JSON.parse(sessionStorage.getItem('shopping-cart'));
	}
	cartArray.push(cartItemJSON);

	var cartJSON = JSON.stringify(cartArray);
	sessionStorage.setItem('shopping-cart', cartJSON);
	showCartTable();
}

Làm trống giỏ hàng bằng cách xóa phiên

Mã giỏ hàng JavaScript này chứa một tùy chọn để làm trống bảng giỏ hàng.

Nó xóa rõ ràng cá thể sessionStorage được tạo để có các mặt hàng trong giỏ hàng.

Khi kết thúc cả hai hành động “Thêm vào giỏ hàng” và “xóa giỏ hàng”, giao diện người dùng bảng giỏ hàng được tạo lại với dữ liệu phiên mới nhất.

Các showCartTable hàm được gọi để cập nhật giao diện người dùng bảng giỏ hàng và tổng số.

function emptyCart() {
	if (sessionStorage.getItem('shopping-cart')) {
		// Clear JavaScript sessionStorage by index
		sessionStorage.removeItem('shopping-cart');
		showCartTable();
	}
}

Tải hàng trong giỏ hàng, số lượng mặt hàng, tổng số tiền từ đối tượng sessionStorage

Mã này hiển thị logic của showCartTable() để xây dựng lại HTML giỏ hàng và cập nhật giao diện người dùng.

Nó khởi tạo các biến để giữ dữ liệu sau. Chúng được sử dụng trong mã giỏ hàng JavaScript.

• HTML bảng giỏ hàng.
• Tổng số mặt hàng được thêm vào giỏ hàng.
• Tổng số lượng các mặt hàng đã mua trong giỏ hàng.

Nó kiểm tra giỏ hàng sessionStorage và lặp lại mảng nếu tồn tại. Trong quá trình lặp lại, nó xây dựng HTML bảng giỏ hàng và tính tổng số lượng và giá cả.

Dữ liệu giỏ hàng sessionStorage được đẩy đến giao diện người dùng thông qua hàm JavaScript này. Nó phản ánh trạng thái giỏ hàng mới nhất cho người dùng cuối.

function showCartTable() {
	var cartRowHTML = "";
	var itemCount = 0;
	var grandTotal = 0;

	var price = 0;
	var quantity = 0;
	var subTotal = 0;

	if (sessionStorage.getItem('shopping-cart')) {
		var shoppingCart = JSON.parse(sessionStorage.getItem('shopping-cart'));
		itemCount = shoppingCart.length;

		//Iterate javascript shopping cart array
		shoppingCart.forEach(function(item) {
			var cartItem = JSON.parse(item);
			price = parseFloat(cartItem.price);
			quantity = parseInt(cartItem.quantity);
			subTotal = price * quantity

			cartRowHTML += "

Ảnh chụp màn hình đầu ra giỏ hàng JavaScript

Đầu ra sẽ quen thuộc với những người đã thấy mã giỏ hàng cũ của tôi được tạo bằng PHP.

Nó được thiết kế như một giải pháp giỏ hàng một trang. Nó hiển thị cả thư viện và giỏ hàng trên cùng một trang.

Giỏ hàng JavaScript liên tục với phiên bản localStorage

SessionStorage của API WebStorage sẽ hết hạn khi trình duyệt bị đóng. API này cung cấp thêm một đối tượng lưu trữ nữa là localStorage.

Đối tượng localStorage tương tự như sessionStorage. Sự khác biệt duy nhất là localStorage giữ dữ liệu cho đến khi có hành động rõ ràng.

Vì vậy, khái niệm này giúp có một giỏ hàng bền bỉ. Đó là giữ lại các mặt hàng trong giỏ hàng của khách hàng ngay cả khi họ đã đóng trình duyệt.

Mã nguồn sử dụng sessionStorage cho mã giỏ hàng JavaScript này. Bao gồm tệp sau thay vì cart.js nếu bạn muốn sử dụng đối tượng localStorage.

cart-local-storage.js

$(document).ready(function() {
	var productItem = [{
			productName: "FinePix Pro2 3D Camera",
			price: "1800.00",
			photo: "camera.jpg"
		},
		{
			productName: "EXP Portable Hard Drive",
			price: "800.00",
			photo: "external-hard-drive.jpg"
		},
		{
			productName: "Luxury Ultra thin Wrist Watch",
			price: "500.00",
			photo: "laptop.jpg"
		},
		{
			productName: "XP 1155 Intel Core Laptop",
			price: "1000.00",
			photo: "watch.jpg"
		}];
	showProductGallery(productItem);
	showCartTable();
});

function addToCart(element) {
	var productParent = $(element).closest('div.product-item');

	var price = $(productParent).find('.price span').text();
	var productName = $(productParent).find('.productname').text();
	var quantity = $(productParent).find('.product-quantity').val();

	var cartItem = {
		productName: productName,
		price: price,
		quantity: quantity
	};
	var cartItemJSON = JSON.stringify(cartItem);

	var cartArray = new Array();
	// If javascript shopping cart session is not empty
	if (localStorage.getItem('shopping-cart')) {
		cartArray = JSON.parse(localStorage.getItem('shopping-cart'));
	}
	cartArray.push(cartItemJSON);

	var cartJSON = JSON.stringify(cartArray);
	localStorage.setItem('shopping-cart', cartJSON);
	showCartTable();
}

function emptyCart() {
	if (localStorage.getItem('shopping-cart')) {
		// Clear JavaScript localStorage by index
		localStorage.removeItem('shopping-cart');
		showCartTable();
	}
}



function removeCartItem(index) {
	if (localStorage.getItem('shopping-cart')) {
		var shoppingCart = JSON.parse(localStorage.getItem('shopping-cart'));
		localStorage.removeItem(shoppingCart[index]);
		showCartTable();
	}
}

function showCartTable() {
	var cartRowHTML = "";
	var itemCount = 0;
	var grandTotal = 0;

	var price = 0;
	var quantity = 0;
	var subTotal = 0;

	if (localStorage.getItem('shopping-cart')) {
		var shoppingCart = JSON.parse(localStorage.getItem('shopping-cart'));
		itemCount = shoppingCart.length;

		//Iterate javascript shopping cart array
		shoppingCart.forEach(function(item) {
			var cartItem = JSON.parse(item);
			price = parseFloat(cartItem.price);
			quantity = parseInt(cartItem.quantity);
			subTotal = price * quantity

			cartRowHTML += "

Thận trọng về bảo mật

Cho đến bước “thêm vào giỏ hàng”, xử lý phía khách hàng vẫn ổn. Khi tiếp tục thanh toán, bạn nên sử dụng phần mềm trung gian phía máy chủ.

Nó nhằm mục đích an toàn để xử lý các lỗ hổng bảo mật. Nó sẽ thực hiện việc khử trùng, xác nhận tính xác thực của dữ liệu và quy trình xác minh nhiều hơn.

Sự kết luận

Vì vậy, chúng tôi đã tạo mã giỏ hàng JavaScript bằng cách sử dụng đối tượng sessionStorage. Ngoài ra, chúng tôi đã thấy thêm một tùy chọn để thêm tính ổn định của mặt hàng trong giỏ hàng với đối tượng localStorage.

Việc triển khai giỏ hàng phía khách hàng không phải là một giải pháp hoàn chỉnh. Nhưng, nó có những lợi thế của sự tối giản. Nó sẽ phù hợp với giỏ hàng tĩnh mỏng có sẵn trên mạng.

Nó phù hợp cho các cửa hàng có tích hợp phía khách hàng được kết nối với các dịch vụ lưu trữ.
Tải xuống

↑ Quay lại đầu trang

		
		

			

				
Shopping cart
			
			Empty Cart
			

				

					

						
Name
						
Unit Price
						
Quantity
						
Sub Total
					
				
				
				

				
				

					

						
Total:
						

						

					
				
			
		
		
		

			

				
Products
			
			

		
	

$(document).ready(function() {
	var productItem = [{
			productName: "FinePix Pro2 3D Camera",
			price: "1800.00",
			photo: "camera.jpg"
		},
		{
			productName: "EXP Portable Hard Drive",
			price: "800.00",
			photo: "external-hard-drive.jpg"
		},
		{
			productName: "Luxury Ultra thin Wrist Watch",
			price: "500.00",
			photo: "laptop.jpg"
		},
		{
			productName: "XP 1155 Intel Core Laptop",
			price: "1000.00",
			photo: "watch.jpg"
		}];
	showProductGallery(productItem);
});

function showProductGallery(product) {
	//Iterate javascript shopping cart array
	var productHTML = "";
	product.forEach(function(item) {
		productHTML += '
'+
					''+
					'
' + item.productName + '
'+
					'
$' + item.price + '
'+
					'
'+
						''+
						''+
					'
'+
				'
';
				"

Reply 9 0 Chia sẻ