商品（jQuery）を追加した後のWoocommerceカートの更新

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

これは可能です - あなたはこのコードの修正バージョンを使用する必要があります： - AJAXリクエストあれば、将来の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

の場合には、あなたが気にしてください

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

編集を「自動的に」ページを独自に更新しますか？このようなものを試すことができます...（テストされていない）。

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とそれを実現するために必要なすべての情報を確認します。これは、カートに追加製品を得ることに反映されます

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

：

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

今、あなたのコードは、製品を反映するために、以下の変更が含まれている必要があります。例、あなたのカートにはこのようなものに見えるかもしれません。混乱する場合は、次のリンクをお読みください。 Tutorialまた、jquery appendとajax関数の詳細については、jquery.com