javascript - 从 woocommerce_add_to_cart_fragments 传回的 Woocommerce 错误片段

Question

我正在创建一个自定义 WooCommerce 购物车并更新购物车项目的数量工作正常。唯一的问题是它不会自动刷新，只能在页面加载后工作。
我当前的代码，它使用 woocommerce_add_to_cart_fragments Hook 并使用传入的 $fragments目的。根据我所看到的，这是正确的方法，但这不起作用，我已经调试过了，对我来说问题似乎是 $fragments我进入的钩子(Hook)没有我原来的 html，而是一个看起来像这样的 html:

<div class="widget_shopping_cart_content">

    <ul class="woocommerce-mini-cart cart_list product_list_widget ">
        <li class="woocommerce-mini-cart-item mini_cart_item">
            <a href="http://velosity-dev-wordpress.local/cart/?remove_item=92cc227532d17e56e07902b254dfad10&#038;_wpnonce=8ead5f2c51"
                class="remove remove_from_cart_button" aria-label="Remove this item" data-product_id="92"
                data-cart_item_key="92cc227532d17e56e07902b254dfad10" data-product_sku="">&times;</a> <a
                href="http://velosity-dev-wordpress.local/product/subber-one/">
                <img width="300" height="300"
                    src="http://velosity-dev-wordpress.local/wp-content/uploads/2021/09/mathilde-langevin-WxHJEMUnlIM-unsplash-300x300.jpg"
                    class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy"
                    srcset="http://velosity-dev-wordpress.local/wp-content/uploads/2021/09/mathilde-langevin-WxHJEMUnlIM-unsplash-300x300.jpg 300w, http://velosity-dev-wordpress.local/wp-content/uploads/2021/09/mathilde-langevin-WxHJEMUnlIM-unsplash-150x150.jpg 150w, http://velosity-dev-wordpress.local/wp-content/uploads/2021/09/mathilde-langevin-WxHJEMUnlIM-unsplash-100x100.jpg 100w"
                    sizes="(max-width: 300px) 100vw, 300px" />Subber One </a>
            <span class="quantity">2 &times; <span class="woocommerce-Price-amount amount"><bdi><span
                            class="woocommerce-Price-currencySymbol">&#36;</span>349.00</bdi></span></span>
        </li>
    </ul>

    <p class="woocommerce-mini-cart__total total">
        <strong>Subtotal:</strong> <span class="woocommerce-Price-amount amount"><bdi><span
                    class="woocommerce-Price-currencySymbol">&#36;</span>698.00</bdi></span>
    </p>


    <p class="woocommerce-mini-cart__buttons buttons"><a href="http://velosity-dev-wordpress.local/cart/"
            class="button wc-forward">View cart</a><a href="http://velosity-dev-wordpress.local/checkout/"
            class="button checkout wc-forward">Checkout</a></p>

我真的不知道如何将正确的“事件”html 传递给这个钩子(Hook)，所以任何指针都将不胜感激!非常感谢提前!
我的自定义购物车 html/php(在名为 header-shopping-cart.php 的文件中)

<div class="cart-items" id="cart-items">
    <?php foreach(WC()->cart->get_cart() as $cart_item_key => $cart_item) : ?>
    <div class="cart-item">
        <?php echo $cart_item['data']->get_image(); ?>
        <div>
            <h3><?php echo $cart_item['data']->get_title() ?></h3>
            <div class="quantity">
                <input type="number" id="quantity_614459a588590" class="input-text qty text" step="1" min="0" max=""
                    name="cart[<?php echo $cart_item_key ?>][qty]" value="<?php echo $cart_item['quantity']  ?>"
                    title="Qty" size="4" placeholder="" inputmode="numeric">
            </div>
            <div class="price"><?php echo $cart_item['data']->get_price_html() ?></div>
        </div>
    </div>
    <div class="divider"></div>
    <? endforeach; ?>
</div>

我的 JS 函数(在 custom.js 中)

jQuery(function ($) {
  $(document).on("change", "input.qty", function () {
    var $thisbutton = $(this);
    var cart_item_key = $(this)
      .attr("name")
      .replace(/cart\[([\w]+)\]\[qty\]/g, "$1");
    var item_quantity = $(this).val();
    var currentVal = parseFloat(item_quantity);

    $.ajax({
      type: "POST",
      url: cart_qty_ajax.ajax_url,
      data: {
        action: "my_cart_qty",
        cart_item_key: cart_item_key,
        quantity: currentVal,
      },
      success: function (response) {
        jQuery(document.body).trigger("added_to_cart", [response.fragments, response.cart_hash, $thisbutton]);
      },
    });
  });
});

我的 php 函数(在 functions.php 中)

<?php    
function enqueue_cart_qty_ajax() {
        wp_register_script( 'my_cart_qty-ajax-js', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '', true );
        wp_localize_script( 'my_cart_qty-ajax-js', 'cart_qty_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
        wp_enqueue_script( 'my_cart_qty-ajax-js' );
    }
    add_action('wp_enqueue_scripts', 'enqueue_cart_qty_ajax');
    
    function ajax_my_cart_qty() {
        // Set item key as the hash found in input.qty's name
        $cart_item_key = $_POST['cart_item_key'];
        $quantity = $_POST['quantity'];
    
        // Get the array of values owned by the product we're updating
        $threeball_product_values = WC()->cart->get_cart_item( $cart_item_key );
        // Get the quantity of the item in the cart
        $threeball_product_quantity = apply_filters( 'woocommerce_stock_amount_cart_item', apply_filters( 'woocommerce_stock_amount', preg_replace( "/[^0-9\.]/", '', filter_var($_POST['quantity'], FILTER_SANITIZE_NUMBER_INT)) ), $cart_item_key );
        // Update cart validation
        $passed_validation  = apply_filters( 'woocommerce_update_cart_validation', true, $cart_item_key, $threeball_product_values, $threeball_product_quantity );
    
        // Update the quantity of the item in the cart
        if ( $passed_validation ) {
            WC()->cart->set_quantity( $cart_item_key, $threeball_product_quantity, true );
        }
    
        // Refresh the page
        echo do_shortcode( '[woocommerce_cart]' );
    
        die();
    }
    add_action('wp_ajax_my_cart_qty', 'ajax_my_cart_qty');
    add_action('wp_ajax_nopriv_my_cart_qty', 'ajax_my_cart_qty');
    
    //Responsive cart
    add_filter( 'woocommerce_add_to_cart_fragments', 'ajaxify_components', 10, 1 );
    function ajaxify_components( $fragments ) {
        ob_start();
    ?>
    <div class="cart-items" id="cart-items">
        <?php foreach(WC()->cart->get_cart() as $cart_item_key => $cart_item) : ?>
        <div class="cart-item">
            <?php echo $cart_item['data']->get_image(); ?>
            <div>
                <h3><?php echo $cart_item['data']->get_title() ?></h3>
                <div class="quantity">
                    <input type="number" id="quantity_614459a588590" class="input-text qty text" step="1" min="0" max=""
                        name="cart[<?php echo $cart_item_key ?>][qty]" value="<?php echo $cart_item['quantity']  ?>"
                        title="Qty" size="4" placeholder="" inputmode="numeric">
                </div>
                <div class="price"><?php echo $cart_item['data']->get_price_html() ?></div>
            </div>
        </div>
        <div class="divider"></div>
        <? endforeach; ?>
    </div>
    <?php
        $fragments['#cart-items'] = ob_get_clean();
    
        return $fragments;
    }

希望有人能给我一个正确方向的指针。谢谢!

Answer 1

我刚刚测试了您的代码，它似乎有效:

单击时，会生成 ajax 并更新我的购物车内容

echo do_shortcode( '[woocommerce_cart]' );无法使用 atm，因为它认为购物车是空的(并返回“空购物车”HTML 消息)。但我不明白为什么你需要完整的 woocommerce 购物车 HTML 作为这里的响应。此外，您使用 tour JS 中的响应作为对象，但返回 do_shortcode将仅返回原始 HTML 字符串。

AJAX 结束，然后 jQuery(document.body).trigger("added_to_cart")被调用，触发 Woocommere 购物车片段刷新。由于 AJAX 调用简码响应“错误”，响应对象不正确，但我们仍然可以触发事件。只需确保您的自定义监听器处理“无参数”情况

使用您的自定义 HTML 刷新购物车片段

照顾好您的 <? endforeach; ?>错过了 <?php .

编辑:经过快速测试，似乎 woocommerce_cart短代码输出使用 woocommerce 模板。因此，您可以尝试编辑子主题中的 Woocommerce Cart 模板文件以更改 HTML 输出。 (如果您真的需要购物车 HTML 作为对自定义 ajax 调用的响应)。