添加產品後更新Woocommerce購物車（jQuery）

Question

Ajax似乎正常工作，但購物車內容不會按預期刷新。我希望點擊「添加到購物車」按鈕後，可以刷新購物車的內容。 現在，我必須手動刷新頁面以查看添加的產品。

我使用這個功能的產品添加到我的woocommerce購物車：

 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; 
    }); 

是否有可能加入一個產品後，只刷新購物車？

Answer 1

這是可能的 - 你需要使用這個代碼的修改版本：

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

編輯 - 在未來404的

<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

情況下，你不介意Ajax請求「自動」刷新頁面？那麼你可以嘗試像這樣...（未經測試）。

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

首先觀察購物車中的html是什麼以及您需要什麼信息才能實現。例如你的車可能是這個樣子：

<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> 

現在您的代碼應包含以下變化來體現產品：

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; 
}); 

這將被添加到該購物車中的產品反映。如果您覺得混亂，請閱讀以下鏈接。 Tutorial另外jquery append和ajax功能在jquery.com更詳細