woocommerce 结帐页面产品数量下拉更新为 ajax jQuery？

Question

我在子主题 function.php 中添加了代码，以便在结帐页面中添加下拉数量，以便客户可以更改产品数量，并且每次选择数字时价格都会自动更新。

问题是当我更改结帐页面中的数量值时，价格不会更新。 https://ibb.co/6JNDWgj 。

将下拉菜单添加到结帐页面的代码是

function woocommerce_quantity_input( $args = array(), $product = null, $echo = true ) {
  
   if ( is_null( $product ) ) {
      $product = $GLOBALS['product'];
   }
 
   $defaults = array(
      'input_id' => uniqid( 'quantity_' ),
      'input_name' => 'quantity',
      'input_value' => '1',
      'classes' => apply_filters( 'woocommerce_quantity_input_classes', array( 'input-text', 'qty', 'text' ), $product ),
      'max_value' => apply_filters( 'woocommerce_quantity_input_max', -1, $product ),
      'min_value' => apply_filters( 'woocommerce_quantity_input_min', 0, $product ),
      'step' => apply_filters( 'woocommerce_quantity_input_step', 1, $product ),
      'pattern' => apply_filters( 'woocommerce_quantity_input_pattern', has_filter( 'woocommerce_stock_amount', 'intval' ) ? '[0-9]*' : '' ),
      'inputmode' => apply_filters( 'woocommerce_quantity_input_inputmode', has_filter( 'woocommerce_stock_amount', 'intval' ) ? 'numeric' : '' ),
      'product_name' => $product ? $product->get_title() : '',
   );
 
   $args = apply_filters( 'woocommerce_quantity_input_args', wp_parse_args( $args, $defaults ), $product );
  
   // Apply sanity to min/max args - min cannot be lower than 0.
   $args['min_value'] = max( $args['min_value'], 0 );
   // Note: change 20 to whatever you like
   $args['max_value'] = 0 < $args['max_value'] ? $args['max_value'] : 15;
 
   // Max cannot be lower than min if defined.
   if ( '' !== $args['max_value'] && $args['max_value'] < $args['min_value'] ) {
      $args['max_value'] = $args['min_value'];
   }
  
   $options = '';
    
   for ( $count = $args['min_value']; $count <= $args['max_value']; $count = $count + $args['step'] ) {
 
      // Cart item quantity defined?
      if ( '' !== $args['input_value'] && $args['input_value'] >= 1 && $count == $args['input_value'] ) {
        $selected = 'selected';      
      } else $selected = '';
 
      $options .= '<option value="' . $count . '"' . $selected . '>' . $count . '</option>';
 
   }
     
   $string = '<div class="quantity"><span>Qty</span><select name="' . $args['input_name'] . '">' . $options . '</select></div>';
 
   if ( $echo ) {
      echo $string;
   } else {
      return $string;
   }
  
}

在结帐页面中添加字段的代码：

* It will remove the selected quantity count from checkout page table.
*/
function webroom_remove_quantity_count( $cart_item, $cart_item_key ) {
   $product_quantity= '';
   return $product_quantity;
}

add_filter ('woocommerce_checkout_cart_item_quantity', 'webroom_remove_quantity_count', 10, 2 );

/*
 * It will add Delete button, Quanitity field on the checkout page Your Order Table.
 */
function webroom_add_delete_and_quantity_on_checkout( $product_title, $cart_item, $cart_item_key ) {

/* Checkout page check */
if (  is_checkout() ) {
    /* Get Cart of the user */
    $cart     = WC()->cart->get_cart();
        foreach ( $cart as $cart_key => $cart_value ){
           if ( $cart_key == $cart_item_key ){
                $product_id = $cart_item['product_id'];
                $_product   = $cart_item['data'] ;
                
                /* Step 1 : Add delete icon */
                $return_value = sprintf(
                  '<a href="%s" class="remove" title="%s" data-product_id="%s" data-product_sku="%s">&times;</a>',
                  esc_url( wc_get_cart_remove_url( $cart_key ) ),
                  __( 'Delete', 'woocommerce' ),
                  esc_attr( $product_id ),
                  esc_attr( $_product->get_sku() )
                );
                
                /* Step 2 : Add product name */
                $return_value .= '&nbsp; <span class = "product_name" >' . $product_title . '</span>' ;
                
                /* Step 3 : Add quantity selector */
                if ( $_product->is_sold_individually() ) {
                  $return_value .= sprintf( ' <input type="hidden" name="cart[%s][qty]" value="1" />', $cart_key );
                } else {
                  $return_value .= woocommerce_quantity_input( array(
                      'input_name'  => "cart[{$cart_key}][qty]",
                      'input_value' => $cart_item['quantity'],
                      'max_value'   => $_product->backorders_allowed() ? '' : $_product->get_stock_quantity(),
                      'min_value'   => '1'
                      ), $_product, false );
                }
                return $return_value;
            }
        }
}else{
    /*
     * It will return the product name on the cart page.
     * As the filter used on checkout and cart are same.
     */
    $_product   = $cart_item['data'] ;
    $product_permalink = $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '';
    if ( ! $product_permalink ) {
        $return_value = $_product->get_title() . '&nbsp;';
    } else {
        $return_value = sprintf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $_product->get_title());
    }
    return $return_value;
  }
}

add_filter ('woocommerce_cart_item_name', 'webroom_add_delete_and_quantity_on_checkout' , 10, 3 );


/* Add js at the footer */
function webroom_add_quanity_js(){
  if ( is_checkout() ) {
    wp_enqueue_script( 'checkout_script', get_stylesheet_directory_uri() . '/js/add_quantity.js', '', '', false );
    $localize_script = array(
      'ajax_url' => admin_url( 'admin-ajax.php' )
    );
    wp_localize_script( 'checkout_script', 'add_quantity', $localize_script );
  }
}
add_action( 'wp_footer', 'webroom_add_quanity_js', 10 );
function webroom_load_ajax() {
  if ( !is_user_logged_in() ){
      add_action( 'wp_ajax_nopriv_update_order_review', 'webroom_update_order_review' );
  } else{
      add_action( 'wp_ajax_update_order_review', 'webroom_update_order_review' );
  }
}
add_action( 'init', 'webroom_load_ajax' );
function webroom_update_order_review() {
  $values = array();
  parse_str($_POST['post_data'], $values);
  $cart = $values['cart'];
  foreach ( $cart as $cart_key => $cart_value ){
      WC()->cart->set_quantity( $cart_key, $cart_value['qty'], false );
      WC()->cart->calculate_totals();
      woocommerce_cart_totals();
  }
  wp_die();
}

“/js/add_quantity.js”中的代码：

jQuery(function( $ ) {
    $( "form.checkout" ).on( "click", "input.qty", function( e ) {
      var data = {
      action: 'update_order_review',
      security: wc_checkout_params.update_order_review_nonce,
      post_data: $( 'form.checkout' ).serialize()
    };

    jQuery.post( add_quantity.ajax_url, data, function( response )
    {
      $( 'body' ).trigger( 'update_checkout' );
    });
  });
});

我将行更改为上面的 with.change

$( "form.checkout" ).change( function( e ) {

我结束了无限循环。 该命令每 2 秒自动刷新一次。 如何解决数量变化时价格只更新一次的问题？

Answer 1

我能够通过在发布的第一个代码中为 div 提供一个 ID 并在 JS 文件中进行一些小的更改来实现它。

代码是：

$string = '<div class="quantity"><span>Qty</span><select name="' . $args['input_name'] . '">' . $options . '</select></div>';

我在代码中添加了 ID #sb-qty：

$string = '<div id="sb-qty" class="quantity"><span>Qty</span><select name="' . $args['input_name'] . '">' . $options . '</select></div>';

JS 代码的第一行是：

$( "form.checkout" ).on( "click", "input.qty", function( e ) {

我改为：

$( "form.checkout" ).on('change', '#sb-qty', function( e ) {

到目前为止，下拉菜单工作正常，只有在数量发生变化时才会更新。

Answer 2

设置Function跟我来

function webroom_update_order_review() {
  parse_str($_POST['post_data'], $values);
  $cart = $values['cart'];
global $woocommerce;
  foreach ( $cart  as $cart_key => $cart_value ){
            $woocommerce->cart->set_quantity( $cart_key, $cart_value['qty'], true );
        }
  exit();
}