Aktualizacja koszyka Woocommerce po dodaniu produktu (jQuery)

Question

Ajax wydaje się działać dobrze, ale zawartość koszyka nie będzie odświeżać zgodnie z oczekiwaniami. Chcę, aby zawartość koszyka była odświeżana po kliknięciu przycisku "dodaj do koszyka". Tak jak obecnie, muszę ręcznie odświeżyć stronę, aby zobaczyć dodane produkty.

używam tej funkcji, aby dodać produkt do mojego koszyka 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; 
    }); 

Czy to możliwe, aby odświeżyć tylko wózek po dodano produkt?

Answer 1

Jest to możliwe - trzeba użyć zmodyfikowanej wersji tego kodu:

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

Edit - w razie przyszłość 404 na

<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

Czy przeszkadza jeżeli żądanie ajax "automatycznie" odświeża stronę samodzielnie? możesz spróbować czegoś takiego ... (niesprawdzonego).

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

Najpierw należy obserwować, co jest html w koszyku i jakie są wszystkie informacje, które są wymagane do tego. Przykład Twój koszyk może wyglądać mniej więcej tak:

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

Teraz Twój kod powinien zawierać następujące zmiany w celu odzwierciedlenia produkt:

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

To będzie odzwierciedlać w uzyskaniu Produkt został dodany do koszyka. Przeczytaj poniższe linki, jeśli uznasz to za mylące. Tutorial Również funkcje jQuery i append są bardziej szczegółowo dostępne pod adresem jquery.com