Làm thế nào để giỏ hàng tự động cập nhật khi thay đổi số lượng sản phẩm

Ngày đăng: 22 - 04 - 2022 Lượt xem: 106 lượt

Bạn có từng nghĩ rằng, sẽ tốt hơn nếu giỏ hàng tự động cập nhật khi thay đổi số lượng sản phẩm không?

cập nhật giỏ hàng tự động

Khi bạn thay đổi số lượng sản phẩm, giỏ hàng sẽ được cập nhật ngay lập tức. Việc này thực hiện rất dễ dàng chỉ với vài dòng code, cùng mình bắt đầu thôi!

Xoá nút Cập nhật giỏ hàng

Vì giỏ hàng sẽ được tự động cập nhật nên nút Cập nhật giỏ hàng lúc này sẽ trở nên dư thừa. Mình sẽ dùng CSS để xoá nút này đi.

.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"] {
	display: none;
}

Hãy thêm đoạn code trên vào file style của theme bạn nhé.

Nếu bạn lo lắng tính năng này có thể không hoạt động ổn định, bạn hãy bỏ qua bước này. Cùng mình đến bước tiếp theo thôi nào!

Cập nhật giỏ hàng khi số lượng sản phẩm thay đổi

Ở bước này, mình sẽ phải bắt được sự kiện khi số lượng sản phẩm thay đổi, và từ đó giỏ hàng sẽ được cập nhật. Mình sẽ sử dụng một đoạn jQuery ngắn ở đây.

jQuery( function( $ ) {
	$('.woocommerce').on('change', 'input.qty', function(){
		$("[name='update_cart']").trigger("click");
	});
} );

Đoạn code ở trên rất cơ bản nhưng chưa thật sự hoàn hảo. Bởi vì nó sẽ gửi nhiều yêu cầu AJAX! Một yêu cầu trên mỗi lần thay đổi số lượng! Hãy tối ưu hóa nó một chút.

var timeout;

jQuery( function( $ ) {
	$('.woocommerce').on('change', 'input.qty', function(){

		if ( timeout !== undefined ) {
			clearTimeout( timeout );
		}

		timeout = setTimeout(function() {
			$("[name='update_cart']").trigger("click");
		}, 1000 );

	});
} );

Lúc này mình sẽ sử dụng biến timeout như là một khoản thời gian delay. Ở dòng thứ 12, bạn có thể sửa thời gian delay cho phù hợp với bạn. Đơn vị ở đây là milliseconds (ms). Với 1000ms tương ứng với 1 giây.

Hãy thêm đoạn code trên vào file script của theme bạn nhé. Nếu không, bạn cũng có thể sử dụng hook wp_head để chèn code CSS, và hook wp_footer để chèn code JS.

Lời kết

Mình hi vọng bài viết trên sẽ phần nào hỗ trợ bạn tốt hơn trong việc tăng trải nghiệm người dùng cho website của bạn.

Nếu bài viết này hữu ích và giúp tiết kiệm được thời gian của bạn, hãy giúp mình chia sẻ nó. Ngoài ra nếu bạn quan tâm đến các chủ đề tương tự như vậy, hãy đọc các bài viết Thủ thuật WooCommerce khác và follow Fanpage để không bỏ lỡ bài viết mới từ mình nhé.

0 0 votes
Đánh giá bài viết

guest
0 Góp ý
Inline Feedbacks
View all comments

Bài viết liên quan

Tạo tab mới trong trang sản phẩm WooCommerce

Tạo tab mới trong trang sản phẩm WooCommerce

24 - 04 - 2022

Theo mặc định, WooCommerce chỉ hỗ trợ những tab cơ bản như mô tả, thông tin thêm, đánh giá. Vậy...

Tạo nhãn mới và nổi bật cho sản phẩm WooCommerce

Tạo nhãn mới và nổi bật cho sản phẩm WooCommerce

18 - 04 - 2022

Theo mặc định, WooCommerce chỉ hiện nhãn cho sản phẩm hết hàng và đang được giảm giá. Nhưng nếu...

Xoá, đổi tên, thay đổi vị trí tính năng sắp xếp sản phẩm trong WooCommerce

Xoá, đổi tên, thay đổi vị trí tính năng sắp xếp sản phẩm trong WooCommerce

07 - 04 - 2022

Bạn có nhu cầu muốn xoá, đổi tên, thay đổi vị trí của tính năng sắp xếp trong WooCommerce....

Cách xoá dữ liệu WooCommerce sau khi gỡ cài đặt

Cách xoá dữ liệu WooCommerce sau khi gỡ cài đặt

02 - 03 - 2022

Bạn muốn loại bỏ dữ liệu WooCommerce ra khỏi trang web? Nếu bạn chỉ gỡ cài đặt plugin và...

Cách ẩn phạm vi giá cho các sản phẩm biến thể trong WooCommerce

Cách ẩn phạm vi giá cho các sản phẩm biến thể trong WooCommerce

12 - 12 - 2021

Bạn đang tìm cách ẩn phạm vi giá cho các sản phẩm biến thể trong WooCommerce? Theo mặc định, giá...

Làm thế nào để ẩn nút Thêm vào giỏ hàng hoặc Giá của WooCommerce cho người dùng chưa đăng nhập?

Làm thế nào để ẩn nút Thêm vào giỏ hàng hoặc Giá của WooCommerce cho người dùng chưa đăng nhập?

04 - 11 - 2021

Mình sẽ hướng dẫn cách ẩn nút Thêm vào giỏ hàng hoặc Giá sản phẩm của WooCommerce có điều...

0
Would love your thoughts, please comment.x