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

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

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. Bạn đang kinh doanh ngành xơ sợi Polyester dệt may? Bạn đang muốn quảng bá thương hiệu và khẳng định...
    20 giây trước
  2. Khi viết blog việc mắc phải những sai lầm là điều không thể tránh. Ai cũng có thể mắc những...
    15 giây trước
  3. Chất lượng tiêu đề bì viết có thể quyết định sự thành công cho nội dung bài viết của bạn....
    23 giây trước
  4. Viết thẻ mô tả chuẩn SEO là một trong những nội dung được quan tâm khi viết bài SEO bởi...
    7 giây trước
  5. AMP HTML là viết tắt của Accelerated Mobile Pages một dự án mã nguồn mở được sự hậu thuẫn và ủng...
    9 giây trước
  6. Làm thế nào để tăng lượng người dùng FaceBook Like Fanpage. Trên thế giới hiện nay có khoảng trên dưới...
    13 giây trước
  7. SEO Blog là rất cần thiết cho việc thúc đẩy thành công của bất kỳ doanh nghiệp nào. Và không...
    3 giây trước
  8. Trong xây dựng và phát triển trang web, có rất nhiều yếu tố quan trọng ảnh hưởng đến quy trình...
    12 giây trước
  9. Có lẽ bạn đã nghe đến sự diệu kỳ của blog kinh doanh và quyết định sử dụng blog để...
    24 giây trước
  10. Hai cô gái HotGirl Chụp ảnh ở Tuyệt tình cốc Thủy Nguyên, Hải Phòng, Việt Nam đã gây bão mạng...
    28 giây trước