尝试更新并保存 woocommerce 购物车上的产品元数据的值

Question

I've been trying to figure out how can I make the value on the product meta data shown on the cart to be editable and saved when clicking the update quote button. When I try to update the value on the BOP field for each product, it does not reflect properly

I've made some work in progress but can never seem to make it work

cart.php

    <?php
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
    $_product   = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
    $product_id = apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key );

    if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_cart_item_visible', true, $cart_item, $cart_item_key ) ) {
        $product_permalink = apply_filters( 'woocommerce_cart_item_permalink', $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '', $cart_item, $cart_item_key );
        ?>
        <tr class="woocommerce-cart-form__cart-item <?php echo esc_attr( apply_filters( 'woocommerce_cart_item_class', 'cart_item', $cart_item, $cart_item_key ) ); ?>">

            <td class="product-remove">
                <?php
                    echo apply_filters( // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
                        'woocommerce_cart_item_remove_link',
                        sprintf(
                            '<a href="%s" class="remove" aria-label="%s" data-product_id="%s" data-product_sku="%s">&times;</a>',
                            esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
                            esc_html__( 'Remove this item', 'woocommerce' ),
                            esc_attr( $product_id ),
                            esc_attr( $_product->get_sku() )
                        ),
                        $cart_item_key
                    );
                ?>
            </td>

            <td class="product-thumbnail">
            <?php
            $thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );

            if ( ! $product_permalink ) {
                echo $thumbnail; // PHPCS: XSS ok.
            } else {
                printf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $thumbnail ); // PHPCS: XSS ok.
            }
            ?>
            </td>

            <td class="product-name" data-title="<?php esc_attr_e( 'Product', 'woocommerce' ); ?>">
            <?php
            if ( ! $product_permalink ) {
                echo wp_kses_post( apply_filters( 'woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key ) . '&nbsp;' );
            } else {
                echo wp_kses_post( apply_filters( 'woocommerce_cart_item_name', sprintf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $_product->get_name() ), $cart_item, $cart_item_key ) );
            }

            do_action( 'woocommerce_after_cart_item_name', $cart_item, $cart_item_key );

            ?>

            
            <?php 
            // Meta data.
            // echo wc_get_formatted_cart_item_data( $cart_item ); // PHPCS: XSS ok. ?>


            <div class="box-type-field">
                <span>BOP: <input class="box-type"  cart_item_key="<?php echo $cart_item['key'] ?>" type="number" value="<?php echo $cart_item['BOP'] ?>" /></span>
            </div>
            
            <?php

            // Backorder notification.
            if ( $_product->backorders_require_notification() && $_product->is_on_backorder( $cart_item['quantity'] ) ) {
                echo wp_kses_post( apply_filters( 'woocommerce_cart_item_backorder_notification', '<p class="backorder_notification">' . esc_html__( 'Available on backorder', 'woocommerce' ) . '</p>', $product_id ) );
            }
            ?>
            </td>

            

            <td class="product-quantity" data-title="<?php esc_attr_e( 'Quantity', 'woocommerce' ); ?>">
            <?php
            if ( $_product->is_sold_individually() ) {
                $product_quantity = sprintf( '1 <input type="hidden" name="cart[%s][qty]" value="1" />', $cart_item_key );
            } else {
                $product_quantity = woocommerce_quantity_input(
                    array(
                        'input_name'   => "cart[{$cart_item_key}][qty]",
                        'input_value'  => $cart_item['quantity'],
                        'max_value'    => $_product->get_max_purchase_quantity(),
                        'min_value'    => '0',
                        'product_name' => $_product->get_name(),
                    ),
                    $_product,
                    false
                );
            }

            echo apply_filters( 'woocommerce_cart_item_quantity', $product_quantity, $cart_item_key, $cart_item ); // PHPCS: XSS ok.
            ?>
            </td>

            
        </tr>
        <?php
    }
}
?>

---

JS

jQuery('.box-type-field .box-type').on('change', function () {

    var cartItemKey = jQuery(this).attr("cart_item_key");
    var boxType = jQuery(this).val();
    jQuery.ajax({
        type : "post", 
        url : '/wp-admin/admin-ajax.php',
        datatype: 'json',
        data : {
            action : "update_cart_boxtype",
            cart_item_key : cartItemKey,
            box_type : boxType,
        },
        success: function(cartItem) {
            cartItemKey = cartItem[0];
            cartItemQty = cartItem[1];
            if (cartItem) jQuery('input[name="cart['+cartItemKey+'][qty]"]').val(cartItemQty); // update quantity 

            jQuery('.woocommerce-cart-form button[type="submit"]').click(); // submit form
        }
    })
})

---

PHP (functions.php)

  function update_cart_boxtype_init() {
  if ( ! WC()->cart->is_empty() ) {
      $cart_item_key = (isset($_POST['cart_item_key']))?$_POST['cart_item_key'] : '';
      $cart_item = WC()->cart->cart_contents[ $cart_item_key ];
      $box_type = (isset($_POST['box_type']))?$_POST['box_type'] : '';
      $cart_updated = false;

      $cart_item_key_new = WC()->cart->generate_cart_id( $cart_item['product_id'], $cart_item['variation_id'], $cart_item['variation'], ['box-type'=>$box_type] );

      $found = WC()->cart->find_product_in_cart( $cart_item_key_new );

      if ($found != '') {
          $new_qty = $cart_item['quantity'] + WC()->cart->cart_contents[ $cart_item_key_new ]['quantity'];
          WC()->cart->remove_cart_item($cart_item_key);
          wp_send_json_success([$cart_item_key_new, $new_qty]);
      } else {
          WC()->cart->add_to_cart($cart_item['product_id'], $cart_item['quantity'], $cart_item['variation_id'], $cart_item['variation'], ['box-type' => $box_type]);
          $cart_updated = true;
          WC()->cart->remove_cart_item($cart_item_key);
          wp_send_json_success(false);
      }
  }
  wp_die();
}

add_action( 'wp_ajax_update_cart_boxtype', 'update_cart_boxtype_init' );
add_action( 'wp_ajax_nopriv_update_cart_boxtype', 'update_cart_boxtype_init' );

---

Some errors indicated:

1.) When I try to update the value it returns 404 on the console as shown below

Answer 1

Looking at your ajax function I will say that when you define this wp_send_json_success(false); your javascript is expecting an array of something and you are submitting a boolean.

if you are getting a 404 error then it seems like your ajax url is wrong:

you can define it on the page as a localize_script to an enqueued script

$args = array( 
    'ajaxurl' => admin_url( 'admin-ajax.php' )
);
wp_localize_script( 'YOUR_ENQUEUED_SCRIPT', 'ajax', $args );

and call it in your js:

ajax.ajaxurl

or defined in the theme:

<?php $ajax_url = admin_url( 'admin-ajax.php' ); ?>
<?php echo $ajax_url; ?>