Cập nhật giỏ hàng Woocommerce sau khi thêm sản phẩm (jQuery)

Question

Ajax dường như hoạt động tốt nhưng nội dung giỏ hàng sẽ không làm mới như mong đợi. Tôi muốn nội dung của giỏ hàng được làm mới sau khi nhấp vào nút "thêm vào giỏ hàng". Hiện tại, tôi phải làm mới trang theo cách thủ công để xem các sản phẩm được thêm vào.

Tôi đang sử dụng chức năng này để thêm sản phẩm vào giỏ hàng woocommerce tôi:

 function addToCart(p_id) { 
      jQuery.ajax({ 
       type: 'POST', 
       url: '/wp/?post_type=product&add-to-cart='+p_id, 
       data: { 'product_id': p_id, 
       'quantity': amount}, 
       success: function(response, textStatus, jqXHR){ 
        console.log("Product added"); 
       }/*, 
       dataType: 'JSON'*/ 
      }); 
     } 

    jQuery('#addToCart').click(function(e) { 
     e.preventDefault(); 
     addToCart(prod_id["product_id"]); 
     return false; 
    }); 

Có thể làm mới chỉ giỏ hàng sau khi một sản phẩm đã được bổ sung?

Answer 1

Điều này có thể - bạn cần phải sử dụng một phiên bản sửa đổi của mã này:

http://docs.woothemes.com/document/show-cart-contents-total/

Edit - trong trường hợp của tương lai 404 của

<a class="cart-customlocation" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e('View your shopping cart'); ?>"><?php echo sprintf (_n('%d item', '%d items', WC()->cart->get_cart_contents_count()), WC()->cart->get_cart_contents_count()); ?> - <?php echo WC()->cart->get_cart_total(); ?></a> 

// Ensure cart contents update when products are added to the cart via AJAX (place the following in functions.php). 
// Used in conjunction with https://gist.github.com/DanielSantoro/1d0dc206e242239624eb71b2636ab148 
add_filter('add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment'); 

function woocommerce_header_add_to_cart_fragment($fragments) { 
    global $woocommerce; 

    ob_start(); 

    ?> 
    <a class="cart-customlocation" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a> 
    <?php 

    $fragments['a.cart-customlocation'] = ob_get_clean(); 

    return $fragments; 

} 

Answer 2

Bạn có phiền không nếu yêu cầu ajax "tự động" làm mới trang một mình? sau đó bạn có thể thử một cái gì đó như thế này ... (chưa được kiểm chứng).

function addToCart(p_id) { 
      jQuery.ajax({ 
       type: 'POST', 
       url: '/wp/?post_type=product&add-to-cart='+p_id, 
       data: { 'product_id': p_id, 
       'quantity': amount}, 
       success: function(response, textStatus, jqXHR){ 
        location.reload(true); 
       }/*, 
       dataType: 'JSON'*/ 
      }); 
     } 

Answer 3

Quan sát đầu tiên html trong giỏ hàng là gì và tất cả thông tin bạn yêu cầu để đáp ứng điều đó. Ví dụ giỏ hàng của bạn có thể trông giống như thế này:

<div id="cart"> 
    <form action="checkout" method="POST" id="cart_checkout_form"> 
    <table id="cart_table"> 
     <tr> 
     <td> Product </td> 
     <td> Qty </td> 
     <td> Price </td> 
     </tr> 
     <tr> 
     <td> <input type="hidden" name="product_id" value="221321"/> Product 1</td> 
     <td> 2</td> 
     <td> 200 $</td> 
     </tr> 

    </table> 

    </form> 
</div> 

Bây giờ mã của bạn nên chứa những thay đổi sau đây để phản ánh sản phẩm:

function addToCart(p_id) { 
     jQuery.ajax({ 
      type: 'POST', 
      url: '/wp/?post_type=product&add-to-cart='+p_id, 
      data: { 'product_id': p_id, 
      'quantity': amount}, 
      success: function(response, textStatus, jqXHR){ 
       /* response should contain details required for adding to cart 

        like price quantity name etc in the json response */ 

       var new_product_html = "<tr><td><input type='hidden' value='"+ response.product_id +"' name="product_id"/>"+ response.product_name +" </td><td>"+response.product_qty+"</td><td>"+ response.product_price +"</td></tr>"; 

       $("#cart_table").append(new_product_html); 

       console.log("Product added"); 

      }/*, 
      dataType: 'JSON'*/ 
     }); 
    } 

jQuery('#addToCart').click(function(e) { 
    e.preventDefault(); 
    addToCart(prod_id["product_id"]); 
    return false; 
}); 

này sẽ phản ánh trong việc có được sản phẩm thêm vào giỏ hàng. Vui lòng đọc các liên kết sau nếu bạn thấy nó khó hiểu. Tutorial Ngoài ra jquery nối thêm và chức năng ajax chi tiết hơn tại jquery.com