Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

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 trong Woocommerce Thêm AddtoCart load tự động

4.5/5 - (11 bình chọn)

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

Thêm biểu tượng giỏ hàng trong header

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.

Ajax trong Woocommerce Thêm AddtoCart load tự động them-vao-gio-hang-1024x159

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.

  • echo wc_get_cart_url(): lấy ra link của cart
  • WC()->cart->get_cart_contents_count(): Lấy ra số lượng sản phẩm trong giỏ hàng.

Thêm phần hiển thị cho sản phẩm trong giỏ hàng

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:

Ajax trong Woocommerce Thêm AddtoCart load tự động them-vao-gio-hang-voi-ajax-1024x968

Xem thêm: Học CSS cơ bản ở đây

Viết CSS cho phần hiển thị giỏ hàng.

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.

Ajax trong Woocommerce Thêm AddtoCart load tự động anh-them-san-pham-vao-gio-hang

Thêm Js cho Woocommerce để hiển thị giỏ hàng

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.

Ajax trong Woocommerce Thêm AddtoCart load tự động them-vao-gio-hang-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.

Ajax trong Woocommerce Thêm AddtoCart load tự động kiem-tra-js-trong-woocommerce

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.

Ajax trong Woocommerce Thêm AddtoCart load tự động them-vao-gio-hang-voi-ajax-b-1024x713

Xem thêm: Hướng dẫn học wordpress

Hiển thị thông tin sản phẩm ra ngoài front-end

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:

Ajax trong Woocommerce Thêm AddtoCart load tự động them-vao-gio-hang-voi-ajax-c

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

Tin mới nhất

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

Tin được yêu thích

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

Khách đang xem

  1. Nếu thế giới có mạng internet thì có thể không có ứng dụng hoặc trò chơi nhưng không thể không...
    19 giây trước
  2. Như các bạn đã biết, một website chuẩn SEO là một trong những yêu cầu vô cùng quan trọng. Bởi...
    2 giây trước
  3. Sức mạnh chính của AMP không chỉ là nó làm cho trang web tải nhanh mà còn khiến các trang...
    14 giây trước
  4. Mọi người thường nghĩ, người viết nội dung và người viết quảng cáo là như nhau, vì họ đều viết...
    12 giây trước
  5. Trong bài trước chúng ta đã được học về các thẻ heading và thẻ paragragh. Hôm nay mình xin giới...
    19 giây trước
  6. Với mỗi SEOer các công cụ hay các phần mềm SEO là điều không thể thiếu trong quá trình làm...
    29 giây trước
  7. Xin chào mọi người, tuần trước ở phần 1 chúng ta đã hiểu được Mảng là gì?  Có những kiểu mảng nào trong PHP?......
    20 giây trước
  8. SEO không hề dễ dàng đối với bất kỳ công ty nào. Nhưng SEO sẽ trở nên đặc biệt phức tạp khi...
    3 giây trước
  9. Việt Nam hiện nay có tới hơn 33 triệu người dùng Internet, mọi thông tin đa phần đều được tìm...
    2 giây trước
  10. Một Website có tốc độ load trang quá chậm sẽ làm bạn mất rất nhiều lưu lượng truy cập, khách...
    3 giây trước