Обновите корзину Woocommerce после добавления продукта (jQuery)

Кажется, что 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;
    });

Можно ли обновить корзину только после того, как товар был добавлен?


javascript jquery woocommerce
person estrar    schedule 18.12.2012    source источник
comment
Вам необходимо создать новый HTML-код для этого продукта и добавить его в HTML-код. Также измените количество товаров в корзине и, возможно, некоторые другие вещи. Попробуйте найти HTML-код, в котором создается корзина, и перевести его в javascript. Делайте это либо с помощью строкового конкатенации, либо с помощью шаблонов javascript (что так круто).   -  person ioan    schedule 10.05.2013

Ответы (3)


arrow_upward
7
arrow_downward

Это возможно - вам нужно использовать модифицированную версию этого кода:

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;

}
person user319940    schedule 23.12.2012
comment
Не могли бы вы уточнить модификацию? Например, могу ли я получить данные об элементе с помощью add_to_cart_fragments? - person Luc; 22.10.2014

arrow_upward
1
arrow_downward

Вы не возражаете, если запрос 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'*/
            }); 
      }
person klewis    schedule 10.05.2013

arrow_upward
0
arrow_downward

Сначала посмотрите, какой 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;
});

Это отразится на добавлении товара в корзину. Пожалуйста, прочтите следующие ссылки, если вас это смущает. Учебник Также подробнее о функциях jquery append и ajax см. jquery.com

person npradeetw    schedule 16.05.2013
comment
Спасибо. Это уже должна быть функция в woocommerce, которая этим занимается? Когда я нажимаю кнопки добавления в корзину, созданные woocommerce, продукт добавляется без перезагрузки страницы. Я как бы ищу эту функцию, чтобы я мог использовать ее сам для своей собственной настройки woocommerce, вместо того, чтобы изобретать что-то, что уже должно существовать. - person estrar; 17.05.2013