Trước đây mình ít khi dụng đến AJAX và thường tránh dùng vì một phần vì thấy các câu lệnh có vẻ rất cao siêu và khó hiểu tuy nhiên khi tìm hiểu thực tế và thực hành thì thực ra nó không khó như vậy. Chỉ cần các bạn nắm rõ cấu trúc và cách dùng thì sẽ thấy AJAX rất đễ sử dụng và tiện lợi. Cùng codfe tìm hiểu AJAX Là gì? và ví dụ dùng AJAX trong WordPress nhé!
AJAX là gì?
AJAX là chữ viết tắt của cụm từ Asynchronous Javascript and XML. AJAX là phương thức trao đổi dữ liệu với máy chủ và cập nhật một hay nhiều phần của trang web, hoàn toàn không reload lại toàn bộ trang. Ajax được viết bằng Javascript chạy trên client, tức là mỗi browser sẽ chạy độc lập hoàn toàn không ảnh hưởng lẫn nhau. Về mặt kỹ thuật, nó đề cập đến việc sử dụng các đối tượng XmlHttpRequest để tương tác với một máy chủ web thông qua Javascript.
Lợi ích khi sử dụng AJAX
Trong định nghĩa trên ta thấy lợi ích lớn nhất của Ajax là sẽ thực hiện một thao tác thay đổi dữ liệu trên một phần giao diện website mà không phải load lại toàn bộ trang, nâng cao trải nghiệm người dùng.
Chúng ta sẽ thấy trong WordPress Ajax sẽ được sử dụng nhiều trong trang giỏ hàng và thanh toán của woocommerce, các thao tác thay đổi số lượng thì giá sẽ được cập nhật trực tiếp trên trang mà không cần phải load lại toàn bộ trang
Ví dụ về sử dung AJAX trong wordpress
Trong ví dụ này mình sẽ demo hàm Ajax cho nút “Thêm vào giỏ hàng” với nhiệm vụ: khi click sẽ thêm vào giỏ hàng một danh sách các sản phẩm (dạng combo sản phẩm) đồng thời cập nhật trạng thái icon giỏ hàng.
Để sử dụng AJAX trong WordPress chúng ta cần thực hiện các bước như sau:
B1: HTML trên giao diện
|
1 2 3 4 |
<div class="content-widget"> <button type="submit" class="cf_single_add_to_cart_button button alt ">Thêm vào giỏ hàng</button> <input type="hidden" class="cf_variation_id" value="1,2,3"> </div> |
B2: Khai báo:
Thường chúng ta sẽ khai báo file JS chứa code JS sử dụng Ajax và đường dẫn của file admin-ajax.php nhé. Trong ví dụ dưới sẽ khai báo file js tại vị trí /assets/js/myjs.js trong theme con và dường dẫn đến file admin-ajax.php
|
1 2 3 4 5 6 7 8 9 |
//Codfe.com khai bao js và url ajax function codfe_register_scripts() { wp_enqueue_script( 'ajax-script', get_theme_file_uri( '/assets/js/myjs.js' ) , array(), '1.0', true ); //Javascript, Thư viện jQuery wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) ); } add_action( 'wp_enqueue_scripts', 'codfe_register_scripts' ); |
B3: Phương thức Ajax
Trong ví dụ sau chúng ta sẽ tạo 1 phương thức Ajax (trong file myjs.js) lấy danh sách id của sản phẩm trong class=”cf_variation_id” truyền vào back end để xử lý. Trong ví dụ bên dưới đã có đầy đủ mô tả cho các hàm, trong đó chú ý biến ajax_url đã được khai báo trong B2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
jQuery(document).ready(function( $ ){ $(".cf_single_add_to_cart_button").click(function() { let product_ids = document.getElementsByClassName("cf_variation_id"); //let cf_btn = document.getElementsByClassName("cf_variation_id"); var submit_butt = jQuery(this); $.ajax({ // Hàm ajax type : "post", //Phương thức truyền post hoặc get dataType : "html", //Dạng dữ liệu trả về xml, json, script, or html url : my_ajax_object.ajax_url, // Nơi xử lý dữ liệu data : { action: "add_item_from_cart", //Tên action, dữ liệu gởi lên cho server product_ids: product_ids[0].getAttribute('value'), }, beforeSend: function(){ // Có thể thực hiện công việc load hình ảnh quay quay trước khi đổ dữ liệu ra submit_butt.toggleClass('loading'); }, success: function(response) { //Làm gì đó khi dữ liệu đã được xử lý //$('.cf-message').html(response); // Đổ dữ liệu trả về vào thẻ <div class="display-post"></div> submit_butt.toggleClass('loading'); //update header cart count $('.header-cart-icon')[0].setAttribute("data-icon-label", response); }, error: function( jqXHR, textStatus, errorThrown ){ //Làm gì đó khi có lỗi xảy ra $('.cf-message').html('Có lỗi xảy ra'); console.log( 'The following error occured: ' + textStatus, errorThrown ); } }); }); }); |
B4: Hàm xử lý các yêu cầu của Ajax (trong function.php)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/** ajax lấy danh sách sản phẩm cần thềm vào cart**/ add_action('wp_ajax_add_item_from_cart', 'add_item_from_cart'); add_action('wp_ajax_nopriv_add_item_from_cart', 'add_item_from_cart'); function add_item_from_cart() { $ids = (isset($_POST['product_ids']))?esc_attr($_POST['product_ids']) : ''; //echo $product_ids; $product_ids = explode(',', $ids); foreach ($product_ids as $product_id) { WC()->cart->add_to_cart( intval($product_id), 1, 0, array(), array() ); // WC()->cart->add_to_cart( $product_id = 0, $quantity = 1, $variation_id = 0, $variation = array(), $cart_item_data = array() ); } //return cart count echo WC()->cart->cart_contents_count; die(); } |
Mình sẽ không giải thích nhiều vì đã ghi chú trong code. Chúc các bạn thành công nhé!
