Ajax’owa zmiana danych z koszyka i wybór liczby produktów – WooCommerce

W przypadku, gdy stworzymy własny przycisk koszyka, bądź wyświetlamy dowolne informacje na temat zawartości koszyka, chcemy również, aby były one na bieżąco odświeżane. Mianowicie po dodaniu danej liczby produktów do koszyka. Oto sposób, by tego dokonać:

WYBÓR LICZBY PRODUKTÓW PRZY DODAWANIU DO KOSZYKA

Na początek musimy umożliwić wybór liczby produktów. W tym celu, zastępujemy standardowy przycisk własnym, dodając kod do functions.php:

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 ); 

function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) { 
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        $html = '<form action="'.esc_url( $product->add_to_cart_url() ).'" class="cart" method="post" enctype="multipart/form-data">'; 
        $html .= woocommerce_quantity_input( array(), $product, false ); 
        $html .= '<button type="submit" data-quantity="1" data-product_id="'.$product->id.'" class="button alt ajax_add_to_cart add_to_cart_button product_type_simple">'.__('Add to cart', 'woocommerce').'</button> </form>'; 
    } 
    return $html;
}

WYŚWIETLANIE INFORMACJI NA TEMAT ZAWARTOŚCI KOSZYKA…

…na przykładzie własnego przycisku ‘koszyka’.

<div class="cart-info-container"> 
    <a class="cart-link" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"> 
        <?php _e('Cart', 'woocommerce'); ?> (<?php echo sprintf ( _n( '%d', '%d', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?>) 
    </a> 
</div>

Następnie dodajemy funkcję w functions.php umożliwiającą pobranie danych ponownie, po dodaniu do koszyka, czyli kod naszego przycisku:

function theme_slug_dynamic_fragment() {
   $output = '';
   $output .= '<span class="cart-info">';
   $output .= '<a class="cart-link" href="';
   $output .= wc_get_cart_url().'" title="'.__( "View your shopping cart" ).'">';
   $output .= __('Cart', 'woocommerce');
   $output .= sprintf ( _n( '( %d', '( %d', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ) ;
   $output .= ')</a>';
   $output .= '</span>'; 
  
   echo $output;
   die;
}
add_action('wp_ajax_my_ajax_cart', 'theme_slug_dynamic_fragment');
add_action('wp_ajax_nopriv_my_ajax_cart', 'theme_slug_dynamic_fragment');

Aktualizacja danych po dodaniu produktu do koszyka, bądź usunięciu produktu z karty

Ostatnim etapem jest dodanie w odpowiednie miejsce kodu JavaScipt, odpowiedzialnego za zmianę liczby produktów w formularzu ‘dodawania do koszyka’ oraz za podmianę informacji zaraz po dodaniu produktów:

jQuery(function ($) {
 
  $(document).ready(function() {
     // resetowanie liczby po odświeżeniu strony
     $('form input.qty').val(1);
    
     // podstawienie wybranej liczby
     $("form.cart").on("change", "input.qty", function() {
       if (this.value === "0")
         this.value = "1";
       $(this.form).find("button[data-quantity]").data("quantity", this.value);
     });
   
     // dynamiczne odświeżenie informacji po dodaiu do koszyka oraz przy usunięciu produktów z karty
     $(document.body).on("added_to_cart updated_cart_totals updated_wc_div", function() {
  
       var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
       $.ajax({
         url: ajaxurl , 
           data: {
           'action': 'my_ajax_cart' // nazwa naszej funkcji 
         },
         success:function(data) {
           $('.cart-info').html(data);
         },
         error: function(errorThrown){
           console.log(errorThrown);
         }
         });
  
    });
   
  });
});