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í 15++ Năm (Từ 2006 đến Nay)

Ajax trong Woocommerce Thêm AddtoCart load tự động

4.8/5 - (10 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.

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

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

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

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. Gần đây tôi đã tìm hiểu về những cách mà SEO và tiếp thị nội dung có thể làm việc cùng...
    18 giây trước
  2. Hàng năm, Google thường tung ra khá nhiều những thay đổi lớn và trong khi đó, số cập nhật lớn...
    11 giây trước
  3. Hiện nay, có 2 chiến lược Marketing trực tuyến phổ biến nhất là SEO và PPC. Chúng có tác động theo những...
    17 giây trước
  4. Nếu bạn có một trang web, blog hoặc bất kỳ hình thức hiện diện nào khác trên mạng Internet, thì...
    3 giây trước
  5. Kiếm tiền online (Make Money Online - MMO) là xu hướng mới để lập nghiệp những năm gần đây. Nếu...
    12 giây trước
  6. Khi các bạn đọc trong các thiết kế web của các nhà cung cấp chuyên nghiệp hay các nhà cung...
    8 giây trước
  7. Tại sao bạn nên sử dụng trang đích thay vì trang web của bạn. Hãy cùng tìm hiểu 5 lý...
    27 giây trước
  8. Nhiều Blog, chuyên gia kinh doanh, nhà tiếp thị và quản trị web đặt câu hỏi này: Điều quan trọng...
    9 giây trước
  9. Bạn là một doanh nhân, bạn đang có nhu cầu xây dựng và quảng cáo thương hiệu của mình. Nhưng...
    8 giây trước
  10. Google SERP (Kết quả Trang Công cụ Tìm kiếm) đã trở thành một môi trường cực kỳ năng động trong...
    14 giây trước