Cách tạo Wishlist cho sản phẩm sử dụng Jquery mới nhất

Xin chào các bạn, như chúng ta biết rằng khi người dùng truy cập các trang thương mại điện tử (như Shopee, Sendo,Tiki, v.v.) để mua những sản phẩm trực tuyến. Người dùng thường chọn các sản phẩm yêu thích để thêm vào danh sách sản phẩm yêu thích của mình và xóa sản phẩm khỏi danh sách yêu thích. Đây sẽ là những chức năng để thêm sản phẩm vào danh sách sản phẩm yêu thích hay còn gọi là Wishlist.

Trong hướng dẫn này, tôi sẽ tạo chức năng để thêm sản phẩm vào danh sách yêu thích của người dùng. Tôi sẽ chia chức năng thành 5 chức năng phụ như sau:

  • Kiểm tra sản phẩm có trong danh sách hay không
  • Nếu không có thì thêm sản phẩm vào danh sách yêu thích và thông báo cho người dùng
  • Nếu sản phẩm đã có trong danh sách yêu thích thì thông báo cho người dùng
  • Đếm số lượng sản phẩm được thêm vào danh sách yêu thích
  • Xóa sản phẩm khỏi danh sách yêu thích, thông báo cho người dùng và đếm sản phẩm còn lại trong danh sách yêu thích

Đầu tiên bạn phải tạo file html và nhúng thư viện jquery để có thể chạy được các script sau này. Ở đây mình tạo file: tao_wishlist.html có nội dung như sau:

<html>
	<head>
		<meta charset="utf-8"/>
		<title>Tạo Wishlist bằng Jquery - Lập Trình Việt Nhật</title>
		<script type="text/javascript" src="js/jquery.js"></script>	 
		<link rel="stylesheet" id="open-sans-css" href="https://fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&amp;subset=latin%2Clatin-ext&amp;ver=4.4.2" type="text/css" media="all">
		<link rel="stylesheet" id="style-css" href="css/style.css" type="text/css" media="all">
	</head>
	<body>
	 <div id="mhead"><h2>Tạo Wishlist cho sản phẩm sử dụng Jquery - laptrinhvietnhat.com</h2></div>
		<div id='msg'></div>
		<div id='products_container'>
			<div class='item-container'>
				<div class='product_name col-s'>
					Iphone 11 pro 128gb
				</div>
				<div class='product_price col-s'>
					19 triệu
				</div>
				<div class='product_action col-s'>
					<button class='wishlist' product_name='Iphone 11 pro 128gb' product_id='product1' product_price='19'>Add to wishlist</button>
				</div>
			</div>
			<div class='item-container'>
				<div class='product_name col-s'>
					Samsung galaxy fold 2
				</div>
				<div class='product_price col-s'>
					50 triệu
				</div>
				<div class='product_action col-s'>
					<button class='wishlist' product_name='Samsung galaxy fold 2' product_id='product2' product_price='50'>Add to wishlist</button>
				</div>
			</div>
			<div class='item-container'>
				<div class='product_name col-s'>
					Samsung Galaxy S10 Lite
				</div>
				<div class='product_price col-s'>
					10 triệu
				</div>
				<div class='product_action col-s'>
					<button class='wishlist' product_name='Samsung Galaxy S10 Lite' product_id='product3' product_price='10'>Add to wishlist</button>
				</div>
			</div>
			<div class='item-container'>
				<div class='product_name col-s'>
					Samsung Galaxy Tab with S Pen (P205)
				</div>
				<div class='product_price col-s'>
					9 triệu
				</div>
				<div class='product_action col-s'>
					<button class='wishlist' product_name='Samsung Galaxy Tab with S Pen (P205)' product_id='product4' product_price='9'>Add to wishlist</button>
				</div>
			</div>
			<div class='item-container'>
				<div class='product_name col-s'>
					Samsung Galaxy A30
				</div>
				<div class='product_price col-s'>
					3 triệu
				</div>
				<div class='product_action col-s'>
					<button class='wishlist' product_name='Samsung Galaxy A30' product_id='product5' product_price='3'>Add to wishlist</button>
				</div>
			</div>
			<div class='item-container'>
				<div class='product_name col-s'>
					Samsung Galaxy S7
				</div>
				<div class='product_price col-s'>
					5 triệu
				</div>
				<div class='product_action col-s'>
					<button class='wishlist' product_name='Samsung Galaxy S7' product_id='product6' product_price='5'>Add to wishlist</button>
				</div>
			</div>
			<div class='item-container'>
				<div class='product_name col-s'>
					MacBook Pro Touch 16 inch 2019 (MVVJ2SA/A)
				</div>
				<div class='product_price col-s'>
					60 triệu
				</div>
				<div class='product_action col-s'>
					<button class='wishlist' product_name='MacBook Pro Touch 16 inch 2019 (MVVJ2SA/A)' product_id='product7' product_price='60'>Add to wishlist</button>
				</div>
			</div>
			<div class='item-container'>
				<div class='product_name col-s'>
					MSI Gaming GL65 Leopard 10SDK i7 10750H/144Hz (242VN)
				</div>
				<div class='product_price col-s'>
					30 triệu
				</div>
				<div class='product_action col-s'>
					<button class='wishlist' product_name='MSI Gaming GL65 Leopard 10SDK i7 10750H/144Hz (242VN)' product_id='product8' product_price='30'>Add to wishlist</button>
				</div>
			</div>
			<div class='item-container'>
				<div class='product_name col-s'>
					iPad Pro 12.9 inch Wifi 128GB (2020)
				</div>
				<div class='product_price col-s'>
					27 triệu
				</div>
				<div class='product_action col-s'>
					<button class='wishlist' product_name='iPad Pro 12.9 inch Wifi 128GB (2020)' product_id='product9' product_price='27'>Add to wishlist</button>
				</div>
			</div>
		</div>
		
		<div id='wish_list' class='col-s'>
			<p class="wish_list_heading">
				<span id='listitem'>0</span>
				<span id='p_label'>Sản phẩm yêu thích</span>
			</p>
			<table id='wish_list_item' border='0'></table>
		</div>
		<script type="text/javascript" src="js/wishlist.js"></script>
	</body>
</html>

Trong đó wishlist.js là file script mình sẽ tạo để sử dụng trong bài này, style.css là style của html, jquery.js là thư viện jquery. Nào chúng ta cùng bắt đầu với phần đầu thôi.

1, Kiểm tra sản phẩm có trong danh sách hay không:

Ở đây chúng ta sẽ tạo một danh sách sản phẩm yêu thích với mảng trong Javascript và tìm kiếm id sản phẩm trong mảng nếu không có sẵn thì chuyển sang phần thứ hai. Code xử lý như sau:

var wish_list = new Array();
 
// Kiểm tra id sản phẩm không có trong danh sách yêu thích
 
if(jQuery.inArray($product_id,wish_list)==-1){
 
}

2, Nếu không có thì thêm sản phẩm vào danh sách yêu thích và thông báo cho người dùng:

Tiếp theo sản phẩm sẽ được thêm vào khối danh sách yêu thích và thêm id sản phẩm vào mảng danh sách yêu thích. Code xử lý như sau:

$product_str = "<tr class='wishlist-item' id='list_id_"
		+ $product_id + "'><td class='w-pname'>"
		+ $product_name + "</td><td class='w-price'>"
		+ $prduct_price
		+ " triệu</td><td class='w-premove' wpid='" + $product_id
		+ "'> (xoá) </td></tr>";
jQuery("#wish_list_item").append($product_str);
wish_list.push($product_id);
show_message("Đã thêm sản phẩm yêu thích");

3, Nếu sản phẩm đã có trong danh sách yêu thích thì thông báo cho người dùng:

Nếu khối IF là false thì sẽ không có gì xảy ra và chúng ta có thể thông báo cho người dùng biết là đã có sản phẩm trong danh sách. Code xử lý đoạn này như sau:

show_message("Bạn đã có sản phẩm này");

4, Đếm số lượng sản phẩm được thêm vào danh sách yêu thích:

Chúng ta sẽ đếm số lượng sản phẩm trong danh sách sản phẩm yêu thích. Chúng ta sẽ tính id sản phẩm trong danh sách yêu thích bằng code xử lý như dưới đây:

jQuery("#listitem").html(wish_list.length);
if (wish_list.length > 1) {
	jQuery("#p_label").html("Sản phẩm");
} else {
	jQuery("#p_label").html("Sản phẩm");
}

5, Xóa sản phẩm khỏi danh sách yêu thích, thông báo cho người dùng và đếm sản phẩm còn lại trong danh sách yêu thích:

Trước khi xóa sản phẩm khỏi khối danh sách yêu thích và mảng danh sách yêu thích, trước tiên chúng ta phải tìm id sản phẩm. Vì vậy, chúng ta phải thêm id sản phẩm làm thuộc tính vào button xóa sản phẩm.
Với sự trợ giúp của id sản phẩm sẽ được trích xuất từ thuộc tính của button, tôi sẽ xóa sản phẩm khỏi danh sách yêu thích và id sản phẩm khỏi mảng danh sách yêu thích.

jQuery("#wish_list_item").on("click", ".w-premove", function() {
   $product_id = jQuery(this).attr("wpid");
   jQuery("#list_id_" + $product_id).remove();
   wish_list = jQuery.grep(wish_list, function(n, i) {
      return n != $product_id;
   });
   show_message("Ðã xoá sản phẩm yêu thích");
   count_items_in_wishlist_update();
});

Sau khi xoá chúng ta phải đếm lại sản phẩm một lần nữa, vì vậy chúng tôi sẽ gọi cùng một chức năng như ở phần 4 nên tôi sẽ thêm code trên vào bên trong một hàm và gọi cùng một chức năng trong cả hai chức năng, code đoạn này như sau:

function count_items_in_wishlist_update() {
	jQuery("#listitem").html(wish_list.length);
	if (wish_list.length > 1) {
		jQuery("#p_label").html("Sản phẩm");
	} else {
		jQuery("#p_label").html("Sản phẩm");
	}
}

Để hiển thị thông báo chúng ta sẽ xử lý như sau:

function show_message($msg) {
	jQuery("#msg").html($msg);
	$top = Math.max(0,
			((jQuery(window).height() - jQuery("#msg").outerHeight()) / 2)
					+ jQuery(window).scrollTop())
			+ "px";
	$left = Math.max(0,
			((jQuery(window).width() - jQuery("#msg").outerWidth()) / 2)
					+ jQuery(window).scrollLeft())
			+ "px";
	jQuery("#msg").css("left", $left);
	jQuery("#msg").animate({
		opacity : 0.6,
		top : $top
	}, 400, function() {
		jQuery(this).css({
			'opacity' : 1
		});
	}).show();
	setTimeout(function() {
		jQuery("#msg").animate({
			opacity : 0.6,
			top : "0px"
		}, 400, function() {
			jQuery(this).hide();
		});
	}, 1000);
}

Sau khi hoàn thành chúng ta có kết quả như sau:

Như vậy là chúng ta đã tìm hiểu xong cách tạo, xoá, đếm lại danh sách sản phẩm yêu thích bằng jQuery. Toàn bộ code này các bạn có thể tải về theo link sau: tao_wishlist.rar, nếu có thắc mắc các bạn hãy comment bên dưới để mình hỗ trợ nhé.

Leave a Reply

Your email address will not be published. Required fields are marked *