Ajax – Tạo nút thêm giỏ hàng động với woocommerce

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Ajax – Tạo nút thêm giỏ hàng động với woocommerce

Trong bài hôm nay mình sẽ chỉ dẫn các bạn cách sử lý nút add to cart động trong website bán hàng sử dụng wordpress với plugin woocommerce.

Kích hoạt AJAX cho nút Add to cart

Woocommerce có 2 chế độ khi người dùng nhấn nút thêm mặt hàng vào giỏ hàng: load trang và sử dụng công nghệ ajax. Mặc định woocommerce kích hoạt chọn lựa Ajax cho nút add to cart hiện ở bên dưới hình ảnh đại diện cho từng sản phẩm.
nút thêm động giỏ hàng - woocommerce

Nếu website của bạn chưa bật tính năng này, thì vào WooCommerce-> Settings chuyển sang tab Products .
Tại dòng Add to cart, checkbox vô “Enable AJAX add to cart buttons on archives”. Kéo xuống phía dưới cùng và nhấn Save changes để lưu lại.

Lúc này, bạn bấm vào nút Add to cart để thêm mặt hàng vào giỏ hàng, chúng ta sẽ thấy trang vẫn không thay đổi , ảnh động loading..bao tin tức mặt hàng chứa nút add to cart, hiện ra một vài giây và widget cart có thay đổi. Sản phẩm mới hoặc cập nhật thêm mặt hàng cũ vào widget giỏ hàng.

Thêm dữ liệu vào widget cart

Woocommerce cho phép chúng ta thêm dữ liệu động bổ xung vào widget cart. Sửa nội dung thành phần đã có trong widget giỏ hàng hay thêm mới dữ liệu.
Thêm widget cart vào website :
Kéo widget cart từ vùng widgets vào sidebar trong wordpress. Truy cập menu Appearance -> Widgets.
widget cart woocommerce

Bằng cách sử dụng hook add_to_cart_fragments , chúng ta cũng có thể thực thi sự kiện khi người sử dụng nhấn thêm mặt hàng vào giỏ hàng.
Override template custom-mini-cart.php , bạn copy file trong folder /plugins/woocommerce/cart/custom-mini-cart.php vào thư mục theme của bạn nhớ dữ nguyên cấu trúc thư mục. Đây là file chứa nội dung widget cart.

Ví dụ, mình sẽ thêm dữ liệu thông báo tổng cộng sản phẩm đã mua và giá phải trả. Thêm đoạn HTML sau vào custom-mini-cart.php sau dòng

   

Thêm vào:

   

Mục đích: Dữ liệu được tạo động vào thẻ div có >

 add_filter('add_to_cart_fragments', 'woocommerce_header_add_to_cartplus_fragment'); function woocommerce_header_add_to_cartplus_fragment( $fragments ) { global $woocommerce; ob_start(); ?>    cart-> cart_contents_count, 'woocommerce'), $woocommerce-> cart-> cart_contents_count);?>  -   cart-> get_cart_total(); ?>   <?php $fragments['div.cartinfo'] = ob_get_clean();//a.cartplus-contents,a.cart-button ob_end_clean(); return $fragments; }  

Lưu ý: Filter add_to_cart_fragments chỉ hoạt động khi bật tính năng “ajax add to cart buttons..”. Nội dung trả về chứa phần tử HTML bởi jquery selector và nội dung tương ứng vào HTML container đó. Ví dụ, đoạn code trên sử dụng cấu trúc lựa chọn HTML của jquery: div.cartinfo .

Nội dung sẽ tự động cập nhật vào HTML được chỉ định, có khai báo trong file custom-mini-cart.php
Nhấn nút add to cart vào sản phẩm mới để thấy rõ Kết quả:
dynamic-widget-cart-woo

Bạn cũng cũng có thể sửa lại nội dung của các thẻ html đã có trước đấy trong custom-mini-cart.php tạo bởi woocommerce. Chỉ cần thêm nội dung các fragments và chỉ định html tag muốn thay đổi.

  $fragments['p.total'] ="modified by hoangweb.com";  

Ngoài ra, cũng có thể có thể tạo dữ liệu sử dụng với mục tiêu riêng, bằng phương pháp chẳng những định tag HTML. VD:

 $fragments['abc'] ="ABC";  

Sự kiện jQuery add to cart

Khi nhấn nút thêm mặt hàng vô giỏ hàng, sự kiện jquery added_to_cart được kích hoạt. Truyền dữ liệu fragments kể cả dữ liệu mới thiết lập bởi hook add_to_cart_fragments phía trên vào sự kiện.

 $('body').on('added_to_cart',function(e,data) { console.log(data); });  

Tham số data chứa dữ liệu mảng $fragments . Ví dụ, tôi lấy dữ liệu bởi key ‘abc’.

 $('body').on('added_to_cart',function(e,data) { console.log(data["abc"]); });  

Bài tập

:
Bài tập 1 : tạo message, thông báo sản phẩm vừa mới thêm vào giỏ hàng.
Hook add_to_cart_fragments gọi trong action của form, do đó chúng ta sẽ xác định được sản phẩm mà người sử dụng vừa thêm vào giỏ hàng thông qua biến $_POST. Trong đó ID của sản phẩm có mức giá trị là $_POST["product_id"] . Thêm fragment mới trong filter add_to_cart_fragments như sau:

 add_filter('add_to_cart_fragments', 'woocommerce_header_add_to_cartplus_fragment'); function woocommerce_header_add_to_cartplus_fragment( $fragments ) { global $woocommerce; $product_id = (int) apply_filters('woocommerce_add_to_cart_product_product_added_product']=get_post($product_id)-> post_title; return $fragments; }  

Hàm get_post của wordpress, trả về dữ liệu cho mọi kiểu post type với ID duy nhất. Dựa vào đó, chúng ta lấy tên sản phẩm.
Bước tiếp theo, đến phần sử lý buổi lễ added_to_cart.

 jQuery(document).ready(function($) { $('body').on('added_to_cart',function(e,data) { if(!data['added_product']) data['added_product']=''; //empty string $.toast('Bạn vừa thêm mặt hàng   "'+data['added_product']+'"   vào giỏ hàng.'); }); });  

Mỗi khi người mua hàng nhấn nút add to cart để bỏ thêm mặt hàng của họ vào giỏ hàng, sẽ hiện lên tên sản phẩm họ vừa mới mua thêm. Ở đây, mình dùng jquery plugin toast . Giả lập giống tính năng hiện lời nhắn toast trong android. Xem cách cài đặt sử dụng jquery toast tại đây . Thêm một plugin hiển thị message là Toastr – ( Demo ).

Bài tập 2 : Tạo dropdown menu thông báo trạng thái giỏ hàng, nằm ngoài widget cart.
Với bài toán này chúng ta sẽ sử dụng thêm widget cart thứ 2, chèn ngoài sidebar sử dụng hàm the_widget và kết hợp thêm filter add_to_cart_fragments với buổi lễ jquery add to cart event, để cập nhật nhãn và nội dung cho nút dropdown menu.
Kết quả làm được, giống như thế này.
dynamic-widget-cart-woo1

Trước tiên, tạo nút và nội dung dropdown của nút. Khi nhấn vào nút phần nội dung ẩn chứa thông tin giỏ hàng sẽ có hiển ra. Thêm code php và đoạn html cấu tạo nút:

   cart-> get_cart_item_quantities(); if(!$cart_stt || count($cart_stt)==0) $cart_stt='Giỏ hàng rỗng'; else{ $cart_stt=WC()-> cart-> cart_contents_count;//array_sum($cart_stt); $cart_stt.=' '.__('sản phẩm' ,'hwtheme').' cho '.WC()-> cart-> get_cart_total(); } ?>              

Thêm ID cho thẻ html chứa tiêu đề nút, chúng ta sẽ sửa lại nhãn cho đồng bộ với tổng số lượng mặt hàng có trong giỏ hàng.

Phần chi tiết giỏ hàng, đổ xuống khi nhấn vô nút. Chèn tiếp đoạn code dưới đây, ngay sau code nhãn nút ở trên.

  
'','after_widget'=> '','before_title'=> '','after_title'=> '')); $cart=ob_get_contents(); ob_end_clean(); if(trim($cart)) echo $cart;else echo __('Chưa có mặt hàng nào trong giỏ hàng.','hoangwebtheme'); ?>

Giả sử đã tạo javascript kết nối giữa nút và nội dung dropdown, mình không bàn thêm cách làm “toggle button” nữa.
Bạn có thể sử dụng nhiều WC Widget Cart trên một trang, mà không khiến xung đột. Chúng ta có hàm the_widget, cũng có thể có thể sử dụng hàm này nếu bạn biết tên class widget và chèn vào bất kỳ địa làm sao có thể trong template.

Khởi tạo nội dung cho nhãn tại thời điểm mới load trang. Sử dụng 2 hàm woocommerce, trong đó:
WC()-> cart-> get_cart_item_quantities() : trả về tổng cộng mặt hàng có trong cart.
WC()-> cart-> cart_contents_count : tính chất lưu tổng giá trị số chi phí của các mặt hàng trong giỏ hàng.

Bước tiếp theo, tạo nội dung động thay thế cho tiêu đề nút mỗi khi khách hàng click vào add to cart.

   cart-> cart_contents_count){ $fragments['hw_cart_status']=$woocommerce-> cart-> cart_contents_count.' '.__('sản phẩm','hwtheme').' cho '.$woocommerce-> cart-> get_cart_total(); } return $fragments; } ?>   

Để ý hàm WC() tương đương với global $woocommerce , Là cách sử dụng khác của nhau.

Chèn code Sửa lại tiêu đề nút ở buổi lễ jquery added_to_cart.

 jQuery(document).ready(function($) { $('body').on('added_to_cart',function(e,data) { if(data['hw_cart_status']) $('#cart_status_label').html(data['hw_cart_status']); }); });  

Chú ý: Bạn nên viết javascript vào chung file .js ngoài, có thể sẽ tốt hơn.

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng cũng có thể có thể nhận được sự trợ giúp trên Twitter và Facebook

Bài viết Ajax – Tạo nút thêm giỏ hàng động với woocommerce được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang