Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.
SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 17++ Năm (Từ 2006 đến Nay)
Ajax rất hữu ích và thú vị. Hầu hết mọi người thích ajax bởi vì nó tải một phần của trang web, người dùng có thể nhìn thấy nội dung ngay lập tức mà không cần phải tải lại trang hoặc chuyển hướng đến trang khác.
Trong bài này tôi sẽ giải thích cho bạn từng bước về việc làm thế nào để thêm 1 sản phẩm vào giỏ hàng với Ajax trong Woocommerce. Đây là bài viết dài vì vậy bạn cần theo dõi kỹ từng bước tôi làm để có thể hiểu một cách tốt nhất.
Contents
Việc đầu tiên mà bạn cần làm đó là dùng ảnh giỏ hàng mà bạn thích hoặc icon của font-awesome để hiển thị giỏ hàng một cách đẹp nhất. Bạn cũng có thể hiển thị số lượng giỏ hàng, đây là số sản phẩm hiện tại trong giỏ hàng và cũng có thể hiển thị số tiền của chúng. Đoạn code dưới đây sẽ hiển thị số lượng sản phẩm trong giỏ hàng và tổng tiền của chúng.
Trong code cũng đã hiển thị rất rõ ràng rồi nhưng ở đây tôi giải thích qua giúp các bạn dễ hình dung hơn.
Khi đã có hàm lấy ra số lượng sản phẩm ra rồi, giờ chúng ta cần xây dựng một chỗ mà người dùng đã đặt mua. Để làm được điều này chúng ta có đoạn code sau:
Xem thêm: Học CSS cơ bản ở đây
Bước tiếp theo là viết CSS cho phần giỏ hàng. Nhưng vì đây là phần cơ bản nên tôi không đề cập code ở đây, vì vậy bạn hãy style theo ý của mình và đây là cách hiển thị sản phẩm của tôi, bạn có thể tham khảo và làm theo.
Mặc định trong Woocommerce nếu người dùng click vào nút Thêm vào giỏ hàng trên trang single product, thì một sản phẩm sẽ được thêm vào giỏ hàng và sau đó sẽ có một thông báo hiển thị bên dưới tiêu đề cho biết sản phẩm đó đã được thêm vào giỏ hàng. Do đó hãy vô hiệu hóa toàn bộ và thay vào đó là một ajax riêng cho nút đó.
Thêm đoạn code này vào trong file js của bạn. Nếu bạn đang dùng child theme thì hãy sử dụng wp_enqueue_script() để thêm file js vào theme của bạn. Cũng nên sử dụng wp_localize_script để nhận địa chỉ admin-ajax.php trong cách gọi Ajax. Bạn thêm đoạn code này vào và kiểm tra xem file đó đã hoạt động ok chưa.
Để kiểm tra xem đoạn code js ở trên đã hoạt động hay chưa, bạn cần bug nó lên và bật sang cửa sổ Console. Nếu nó có gửi thông báo là chữ “clicked” thì đoạn js của bạn đã hoạt động rồi. Nếu không thì bạn cần xem lại chúng.
Sau khi chắc chắn rằng file js của bạn đã hoạt động, giờ chúng ta sẽ thêm đoạn code này vào để sau khi chúng ta nhấn nút submit thì sẽ tự động thêm các thông tin sản phẩm vào trong giỏ hàng mà không cần phải load lại trang hoặc link đến trang khác.
Xem thêm: Hướng dẫn học wordpress
Sau khi load ajax xong và gửi dữ liệu lên thanh url rồi thì giờ chúng ta sẽ lấy chúng xuống bằng cách vào functions.php và lấy chúng xuống và đổ dữ liệu ra. Cụ thể như sau:
Trên đây là tất cả những gì bạn cần làm để có thể thêm sản phẩm vào giỏ hàng mà không cần phải load lại trang hoặc link đến trang khác. Bạn cần theo dõi từng dòng code, vì tôi đã giải thích rất rõ ràng rồi. Rất mong bài viết này sẽ giúp ích được cho bạn.
Xem thêm: Dịch vụ thiết kế website chuyên nghiệp
Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...
VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...
Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...
Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...
Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...
Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...
Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...
Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...
Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...
Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...