Bắt sự kiện add to cart để update giỏ hàng minicart

18/10/2021 13:49 517

Trong quá trình custom woocommerce anh chị muốn làm chức năng cập nhật minicart thì làm cách nào. Sau đây tôi xin chia sẽ cách làm

Table of Contents

1. Sự kiện khi add to cart thành công

<script>
jQuery(function($){
	$('body').on('added_to_cart',function(){
		var submit_data = {
		action:	 'dongnam_update_cart',
		};
		console.log(submit_data);
		$.ajax({
			type: 'POST',
			url: '<?php echo admin_url('admin-ajax.php'); ?>',
			//url: kitimportelementor_vars.ajax_url, 
			data: submit_data,
			success: function ( response ) {
				console.log(response);
				if (response.success ) {
					$('ul.cart_list.product_list_widget').html(response.data.cart);
					$('#cart .cart-popup .total-cart .total-price span.woocommerce-Price-amount.amount').html(response.data.cart_total);
					$('a.dropdown-toggle.cart-icon').trigger('click');
					//alert("Đã thêm sản phẩm vào giỏ hàng!");
				}
			}				
		});
		
		
	});	
});
</script>

jQuery(function($){

$('body').on('added_to_cart',function(){

var submit_data = {

action: 'dongnam_update_cart',

};

console.log(submit_data);

$.ajax({

type: 'POST',

url: '<?php echo admin_url('admin-ajax.php'); ?>',

//url: kitimportelementor_vars.ajax_url,

data: submit_data,

success: function ( response ) {

console.log(response);

if (response.success ) {

$('ul.cart_list.product_list_widget').html(response.data.cart);

$('#cart .cart-popup .total-cart .total-price span.woocommerce-Price-amount.amount').html(response.data.cart_total);

$('a.dropdown-toggle.cart-icon').trigger('click');

//alert("Đã thêm sản phẩm vào giỏ hàng!");

}

});

</script>

2. Code php truy vấn minicart

Code dùng trong object

add_action("wp_ajax_dongnam_update_cart", array($this,"dongnam_update_cart"));
add_action("wp_ajax_nopriv_dongnam_update_cart", array($this,"dongnam_update_cart"));
function dongnam_update_cart(){
    $html = '';
    if ( sizeof( WC()->cart->get_cart() ) > 0 ) :
        foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) :
            $_product = $cart_item['data'];
            // Chỉ hiển thị nếu cho phép
            if ( ! apply_filters('woocommerce_widget_cart_item_visible', true, $cart_item, $cart_item_key ) || ! $_product->exists() || $cart_item['quantity'] == 0 )continue;
            // Lấy price
            $product_price = get_option( 'woocommerce_display_cart_prices_excluding_tax' ) == 'yes' || WC()->customer->is_vat_exempt() ? $_product->get_price_excluding_tax() : $_product->get_price();
            $product_price = apply_filters( 'woocommerce_cart_item_price_html', wc_price( $product_price ), $cart_item, $cart_item_key );
            $html .='<li class="mini_cart_item">';
            $html .='<a href="'.wc_get_cart_remove_url( $cart_item_key ).'" class="remove" title="Remove this item" data-product_id="200" data-product_sku=""><i class="fa fa-trash-o"></i></a>';
            $html .='<a href="" class="product-image">'.$_product->get_image().'</a>';
            $html .='<a href="" class="product-name">'.$_product->get_title().'</a>';	
            $html .='<div class="quantity">'.$cart_item['quantity'].' × <span class="woocommerce-Price-amount amount"><bdi>'.$product_price.'</bdi></span></div></li>';
        endforeach; 
    else: 
    	$html .='<li class="mini_cart_item"></li>';
    endif; 
    $results['cart'] = $html;
    $results['cart_total'] = WC()->cart->get_cart_total();
    wp_send_json_success($results);
}

add_action("wp_ajax_dongnam_update_cart", array($this,"dongnam_update_cart"));

add_action("wp_ajax_nopriv_dongnam_update_cart", array($this,"dongnam_update_cart"));

function dongnam_update_cart(){

$html = '';

if ( sizeof( WC()->cart->get_cart() ) > 0 ) :

foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) :

$_product = $cart_item['data'];

// Chỉ hiển thị nếu cho phép

if ( ! apply_filters('woocommerce_widget_cart_item_visible', true, $cart_item, $cart_item_key ) || ! $_product->exists() || $cart_item['quantity'] == 0 )continue;

// Lấy price

$product_price = get_option( 'woocommerce_display_cart_prices_excluding_tax' ) == 'yes' || WC()->customer->is_vat_exempt() ? $_product->get_price_excluding_tax() : $_product->get_price();

$product_price = apply_filters( 'woocommerce_cart_item_price_html', wc_price( $product_price ), $cart_item, $cart_item_key );

$html .='<li class="mini_cart_item">';

$html .='<a href="'.wc_get_cart_remove_url( $cart_item_key ).'" class="remove" title="Remove this item" data-product_id="200" data-product_sku=""><i class="fa fa-trash-o"></i></a>';

$html .='<a href="" class="product-image">'.$_product->get_image().'</a>';

$html .='<a href="" class="product-name">'.$_product->get_title().'</a>';

$html .='<div class="quantity">'.$cart_item['quantity'].' × <span class="woocommerce-Price-amount amount"><bdi>'.$product_price.'</bdi></span></div></li>';

endforeach;

else:

$html .='<li class="mini_cart_item"></li>';

endif;

$results['cart'] = $html;

$results['cart_total'] = WC()->cart->get_cart_total();

wp_send_json_success($results);

}

3. Khắc phục lỗi add to cart ajax ở trang chủ không hoạt đông

Chỉ cần add class woocommerce vào body là được, sau đây là code:

function custom_class_home( $classes ) {
    if ( is_front_page()  ) {
        $classes[] = 'woocommerce';
    }
    return $classes;
}	
add_filter( 'body_class', array($this,'custom_class_home') );

function custom_class_home( $classes ) {

if ( is_front_page() ) {

$classes[] = 'woocommerce';

}

return $classes;

}

add_filter( 'body_class', array($this,'custom_class_home') );

5/5 (1 Đánh giá)

Các bài viết khác có thể hữu ích với bạn

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Function xử lý upload to media wordpress [ 18/07/2022 11:11 ]
Hiệu ứng hover slide image siêu đẹp [ 26/06/2022 13:47 ]
Cách làm sản phẩm đã xem woocommerce [ 25/06/2022 09:31 ]
Thêm “Liên hệ” vào price woocommerce khi không nhập giá cũng như hết hàng [ 09/05/2022 03:38 ]
Tạo bộ lọc sản phẩm woocommerce theo meta key [ 23/04/2022 04:28 ]
Thêm phone cho user và lấy nó ra trong network multisite wordpress [ 19/11/2021 07:14 ]
Thêm trường first name và last name vào trang account page woocommerce [ 18/10/2021 13:41 ]
Cách sử dụng wc_get_products [ 14/10/2021 13:51 ]
Css counter code mẫu [ 14/10/2021 07:50 ]
Cài đặt ssl cho vBulletin 4.x [ 13/10/2021 01:03 ]

Bắt sự kiện add to cart để update giỏ hàng minicart

1. Sự kiện khi add to cart thành công

2. Code php truy vấn minicart

3. Khắc phục lỗi add to cart ajax ở trang chủ không hoạt đông

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)