[WooCommerce] Cập nhật giỏ hàng động khi thay đổi số lượng sản phẩm

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài [WooCommerce] Cập nhật giỏ hàng động khi thay đổi số lượng sản phẩm

Mặc định WooCommerce không cập nhật giỏ hàng khi bạn thay đổi số lượng mặt hàng trên giỏ hàng WooCommerce. Sử dụng nút cộng/trừ con số cho mỗi sản phẩm bạn có thêm vô giỏ hàng và để cập nhật mới giỏ hàng bạn cần nhấn nút cập nhật cạnh bên giỏ hàng. Tuy nhiên, nhiều bạn muốn cập nhật giỏ hàng động ngay sau khi khách hàng thêm hoặc bớt con số mặt hàng trên trang giỏ hàng. Trong bài viết này mình sẽ hướng dẫn các bạn thế nào để cập nhật giỏ hàng mà chẳng cần nhấn nút cập nhật.

Bạn thêm dòng sau vào tệp functions.php của bạn.

 //Enqueue Ajax Scripts function enqueue_cart_qty_ajax() { wp_register_script( 'cart-qty-ajax-js', get_template_directory_uri() . '/js/cart-qty-ajax.js', array( 'jquery' ), '', true ); wp_localize_script( 'cart-qty-ajax-js', 'cart_qty_ajax', array( 'ajax_url' =>  admin_url( 'admin-ajax.php' ) ) ); wp_enqueue_script( 'cart-qty-ajax-js' ); } add_action('wp_enqueue_scripts', 'enqueue_cart_qty_ajax'); function ajax_qty_cart() { // Set item key as the hash found in input.qty's name $cart_item_key = $_POST['hash']; // Get the array of values owned by the product we're updating $threeball_product_values = WC()-> cart-> get_cart_item( $cart_item_key ); // Get the quantity of the item in the cart $threeball_product_quantity = apply_filters( 'woocommerce_stock_amount_cart_item', apply_filters( 'woocommerce_stock_amount', preg_replace( "/[^0-9.]/", '', filter_var($_POST['quantity'], FILTER_SANITIZE_NUMBER_INT)) ), $cart_item_key ); // Update cart validation $passed_validation = apply_filters( 'woocommerce_update_cart_validation', true, $cart_item_key, $threeball_product_values, $threeball_product_quantity ); // Update the quantity of the item in the cart if ( $passed_validation ) { WC()-> cart-> set_quantity( $cart_item_key, $threeball_product_quantity, true ); } // Refresh the page echo do_shortcode( '[woocommerce_cart]' ); die(); } add_action('wp_ajax_qty_cart', 'ajax_qty_cart'); add_action('wp_ajax_nopriv_qty_cart', 'ajax_qty_cart');  

Tiếp đến, bạn tạo file cart-qty-ajax.js và chép vào nội dung dưới đây.

 jQuery( function( $ ) { $( document ).on( 'change', 'input.qty', function() { var item_hash = $( this ).attr( 'name' ).replace(/cart[([w]+)][qty]/g, "$1"); var item_quantity = $( this ).val(); var currentVal = parseFloat(item_quantity); function qty_cart() { $.ajax({ type: 'POST', url: cart_qty_ajax.ajax_url, data: { action: 'qty_cart', hash: item_hash, quantity: currentVal }, success: function(data) { $( '.view-cart-popup' ).html(data); } }); } qty_cart(); }); });  

Ok, bây giờ mỗi khi bạn thêm sản phẩm vào giỏ hàng và thay đổi con số mua sản phẩm trên giỏ hàng , các sản phẩm trên giỏ hàng sẽ tự động được cập nhật bằng công nghệ Ajax.

Bạn cũng muốn ẩn/xóa nút cập nhật đúng không? để xóa button này bạn cũng có thể tìm & mở template yourtemplate/woocommerce/cart/cart.php

 ..  <button type="submit" name="update_cart" value="  ">      ..  

Có nhiều phương pháp để bạn có thể xóa nút cập nhật giỏ hàng, cách dễ nhất mình sẽ xóa trực diện mã HTML trên hoặc nếu muốn sử dụng lại về sau, bạn thêm mã css để ẩn nút.

 .button[name=update_cart]{ display:none; }  

Chúc bạn thành công.

Nếu bạn thích bài viết này, hãy cỗ vũ chúng tôi bằng phương pháp đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng cũng có thể có thể theo dõi blog này trên Twitter và Facebook

Bài viết [WooCommerce] Cập nhật giỏ hàng động khi thay đổi số lượng sản phẩm đượ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