Nếu bạn muốn điều hành một doanh nghiệp thành công trong những ngày này, bạn cần đảm bảo rằng cửa hàng trực tuyến của bạn tự động cập nhật giỏ hàng. Ngoài ra, trang web sẽ làm mới mỗi khi người dùng thêm sản phẩm vào giỏ hàng, khiến quá trình mua hàng trở nên vô cùng chậm chạp và tăng khả năng người mua hàng từ bỏ giỏ hàng. Do đó, việc thêm tính năng thêm vào giỏ hàng của WooC Commerce Ajax vào doanh nghiệp của bạn có tầm quan trọng rất lớn
Chủ đề hôm nay sẽ cung cấp cho bạn các hướng dẫn toàn diện về cách thêm nút Ajax Thêm vào giỏ hàng trên trang sản phẩm WooC Commerce
Lợi ích của việc thêm nút Thêm vào giỏ hàng Ajax trên Trang sản phẩm WooC Commerce
AJAX, hay Javascript và XML không đồng bộ, là một tập hợp các kỹ thuật phát triển web cho phép trang web kết nối với máy chủ mà không cần tải lại trang
Khi khách hàng nhấp vào nút “Thêm vào giỏ hàng” trên cửa hàng trực tuyến của bạn, nút thêm vào giỏ hàng AJAX giúp quá trình mua hàng trở nên đơn giản, thoải mái và nhanh chóng
Dưới đây là tóm tắt một số lợi ích nổi bật mà bạn sẽ nhận được khi thêm nút “Ajax Add to Cart” vào trang sản phẩm WooC Commerce của mình
- Giảm việc từ bỏ giỏ hàng
- Giảm tải máy chủ và băng thông
- Đẩy nhanh quá trình mua hàng
- Cải thiện trải nghiệm của khách hàng
- Nâng cao tỷ lệ chuyển đổi
- Tăng doanh thu bán hàng của bạn
Làm cách nào để thêm nút Ajax Thêm vào giỏ hàng trên Trang sản phẩm WooC Commerce?
Trong phần này, chúng tôi sẽ chỉ cho bạn cách thêm nút Ajax Add to Cart trên trang sản phẩm WooC Commerce theo hai cách khác nhau. sử dụng plugin Quadlayers và sử dụng mã tùy chỉnh
Phương pháp 1. Sử dụng plugin
Nếu bạn không có bất kỳ kiến thức mã hóa nào và muốn một giải pháp đơn giản, sử dụng plugin là một lựa chọn tuyệt vời
Plugin chúng tôi đang sử dụng ở đây là một sản phẩm của QuadLayers, được gọi là AJAX thêm vào giỏ hàng WooC Commerce. Plugin này dễ sử dụng, miễn phí và có thể tìm thấy trong thư mục plugin WordPress
Công cụ này cho phép khách hàng thêm các mặt hàng đơn lẻ hoặc nhiều mặt hàng vào giỏ hàng của họ mà không phải tải lại trang web mỗi lần. Ngoài ra, nó hoạt động hoàn hảo với 99 phần trăm các chủ đề WordPress và nó sẽ sẵn sàng để sử dụng sau khi bạn đã cài đặt nó
Do đó, bạn chỉ cần tải xuống plugin từ liên kết này https. //wordpress. org/plugins/woo-ajax-add-to-cart/, hãy cài đặt nó và chương trình sẽ lo phần còn lại
Phương pháp 2. Sử dụng mã tùy chỉnh
Vì vậy, bạn là một lập trình viên và muốn thêm nút thêm vào giỏ hàng WooC Commerce AJAX của mình?
Bước 1. Cài đặt một chủ đề con
Trước hết, bạn cần tạo một chủ đề con. Nhiều plugin có thể giúp bạn làm điều đó, vì vậy hãy chọn plugin yêu thích của bạn, cài đặt và sử dụng nó để tạo chủ đề con của bạn
Trong trường hợp bạn thắc mắc tại sao nên sử dụng một chủ đề con, thay vì chủ đề chính? . Nhưng nếu bạn tùy chỉnh chủ đề con, các thay đổi sẽ không bị ghi đè
Bước 2. Thêm tệp Javascript [JS]
Thêm tệp JavaScript vào chức năng của chủ đề con. php bằng hook wp_enqueue_script. Đây là một trong những hook phổ biến nhất để tùy chỉnh trang web mà WordPress cung cấp. Bây giờ hãy xem tập lệnh chứa ajax thêm vào giỏ hàng. tập tin js
function ql_woocommerce_ajax_add_to_cart_js[] {
if [function_exists['is_product'] && is_product[]] {
wp_enqueue_script['custom_script', get_bloginfo['stylesheet_directory'] . '/js/ajax_add_to_cart.js', array['jquery'],'1.0' ];
}
}
add_action['wp_enqueue_scripts', 'ql_woocommerce_ajax_add_to_cart_js'];
Điều đáng chú ý là ở dòng 2 của điều kiện if [function_exists[‘is_product’] && is_product[]], bạn chỉ phải áp dụng JQuery trên trang sản phẩm
Bước 3. Tạo một tệp Javascript
Sau đó, tạo tệp mà bạn đã thêm ở bước trước. Chỉ cần điều hướng đến cPanel của bạn và thư mục chủ đề con. Sau đó, điều hướng đến nội dung wp /themes/thư mục. Tại đây bạn tạo một thư mục mới có tên là js trong theme con, đồng thời tạo một file bên trong nó với tên giống như trong hook ajax-add-to-cart. js
Hãy nhớ rằng ngay cả khi bạn sử dụng ứng dụng khách FTP, bạn vẫn có thể thực hiện việc này
Bạn có thể sử dụng thư mục JS hiện có trong chủ đề con của mình nếu có, thay vì tạo một thư mục mới
Bước 4. Thêm tập lệnh vào tệp JQuery
Ở bước này, bạn cần làm việc với tệp JQuery mà bạn vừa gửi cho chủ đề con của mình. Bạn cần thêm tập lệnh vào tệp đó vì tệp hiện đang trống
Trước hết, bạn cần ngăn nút thêm vào giỏ hàng làm mới trang. Để làm điều đó, hãy thêm tập lệnh sau
$['.single_add_to_cart_button'].on['click', function[e] {
e.preventDefault[];
}];
Xin lưu ý rằng khi nhấp vào nút thêm vào giỏ hàng, yêu cầu AJAX được kích hoạt bởi lệnh $[‘. bộ chọn nút thêm vào giỏ hàng’]. Bây giờ bạn phải thêm toàn bộ tập lệnh JQuery này để AJAX thêm vào giỏ hàng trên các sản phẩm đơn lẻ
jQuery[document].ready[function[$] {
$['.single_add_to_cart_button'].on['click', function[e]{
e.preventDefault[];
$thisbutton = $[this],
$form = $thisbutton.closest['form.cart'],
id = $thisbutton.val[],
product_qty = $form.find['input[name=quantity]'].val[] || 1,
product_id = $form.find['input[name=product_id]'].val[] || id,
variation_id = $form.find['input[name=variation_id]'].val[] || 0;
var data = {
action: 'ql_woocommerce_ajax_add_to_cart',
product_id: product_id,
product_sku: '',
quantity: product_qty,
variation_id: variation_id,
};
$.ajax[{
type: 'post',
url: wc_add_to_cart_params.ajax_url,
data: data,
beforeSend: function [response] {
$thisbutton.removeClass['added'].addClass['loading'];
},
complete: function [response] {
$thisbutton.addClass['added'].removeClass['loading'];
},
success: function [response] {
if [response.error & response.product_url] {
window.location = response.product_url;
return;
} else {
$[document.body].trigger['added_to_cart', [response.fragments, response.cart_hash, $thisbutton]];
}
},
}];
}];
}];
Bước 5. thêm PHP
Sau đó, bạn sẽ cần trình xử lý PHP. Để triển khai tính năng thêm vào giỏ hàng của bạn, phương pháp đơn giản nhất là tận dụng một số hook bộ lọc WooC Commerce. Bạn sẽ làm lại, nhưng lần này sử dụng AJAX
Bạn chỉ cần sao chép và dán đoạn mã sau bên dưới đoạn mã trước mà chúng tôi đã sử dụng để thêm tệp JS vào các hàm. tập tin php của chủ đề con
add_action['wp_ajax_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart'];
add_action['wp_ajax_nopriv_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart'];
function ql_woocommerce_ajax_add_to_cart[] {
$product_id = apply_filters['ql_woocommerce_add_to_cart_product_id', absint[$_POST['product_id']]];
$quantity = empty[$_POST['quantity']] ? 1 : wc_stock_amount[$_POST['quantity']];
$variation_id = absint[$_POST['variation_id']];
$passed_validation = apply_filters['ql_woocommerce_add_to_cart_validation', true, $product_id, $quantity];
$product_status = get_post_status[$product_id];
if [$passed_validation && WC[]->cart->add_to_cart[$product_id, $quantity, $variation_id] && 'publish' === $product_status] {
do_action['ql_woocommerce_ajax_added_to_cart', $product_id];
if ['yes' === get_option['ql_woocommerce_cart_redirect_after_add']] {
wc_add_to_cart_message[array[$product_id => $quantity], true];
}
WC_AJAX :: get_refreshed_fragments[];
} else {
$data = array[
'error' => true,
'product_url' => apply_filters['ql_woocommerce_cart_redirect_after_error', get_permalink[$product_id], $product_id]];
echo wp_send_json[$data];
}
wp_die[];
}
Bước 6. Kiểm tra mã
Bạn có thể kiểm tra mã để xem bạn đã thực hiện đúng chưa bằng cách nhấp vào nút thêm vào giỏ hàng. Nếu sản phẩm có thể được thêm vào giỏ hàng mà không cần tải lại trang, thì bạn đã tạo thành công ** nút thêm vào giỏ hàng AJAX của WooC Commerce**
Nhưng nếu không, hãy đảm bảo bạn kiểm tra lại tất cả các bước trên một lần nữa
Nếu sau đó nó vẫn không hoạt động, bạn nên làm theo phương pháp đầu tiên là sử dụng plugin hoặc liên hệ với nhà phát triển để được hỗ trợ
Từ cuối cùng
Nhìn chung, bạn nên thêm nút thêm vào giỏ hàng WooC Commerce AJAX vào trang sản phẩm WooC Commerce của mình nếu bạn muốn tối ưu hóa cửa hàng trực tuyến của mình. Bạn có thể làm điều này bằng cách sử dụng plugin WooC Commerce bổ sung vào giỏ hàng AJAX hoặc áp dụng một số mã tùy chỉnh