Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
acf-taxonomy
acf-post-type

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

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?

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

 

 

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. Rất đơn giản nhưng web của bạn trong có vẻ chuyên nghiệp hơn 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.

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.

Đ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.

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

Hy 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. Chúc a/e thành công!

Trong quá trình làm việc có vấn đề hay thắc mắc cần giúp đỡ hãy nhắn tin cho mình, hãy chia sẻ bài viết này nếu bạn cảm thấy nó hữu ích. Xin cảm ơn!

 

 

 

Xem thêm bài viết

TEMPLATES

PLUGIN

MỜI CAFE

ủng hộ tôi