jquery - Updated_cart_totals 触发器在清空购物车后不起作用

Question

目前，我想在单击购物车页面上的 update_cart 按钮后更改 div 内的文本。

现在我使用 jQuery 来触发一个操作以使其工作。

jQuery( document.body ).on( 'updated_cart_totals', function(){
    var sum = 0;
    jQuery(".qty").each(function(){
        sum += +jQuery(this).val();
    });
        
    if(sum > 0 || sum != ''){   
        jQuery('#text_block-14-124, #text_block-179-47').text(sum);
    }else{
        jQuery('#text_block-14-124, #text_block-179-47').text('0'); // does not run
    }
});

它的工作原理类似于 super 按钮，但是当我将数量更改为 0 并单击 update_cart 按钮并将我的购物车清空时，我的脚本不仅在上面有产品时才运行。我可以在单击 update_cart 按钮时运行脚本来更改文本，然后我的购物车清空。

我不使用购物车片段来使其工作，完全是手动代码。

Answer 1

updated_cart_totals 仅在 .woocommerce-cart-form 发现时触发，因此当您更新数量 0 购物车表单时已删除，因此在这种情况下您需要使用 wc_cart_emptied 触发器。

function add_custom_js(){
    ?>
    <script type="text/javascript">
        (function($){
            jQuery( document.body ).on( 'updated_cart_totals', function(){
                var sum = 0;
                jQuery(".qty").each(function(){
                    sum += +jQuery(this).val();
                });
                if(sum > 0 || sum != ''){   
                    jQuery('#text_block-14-124, #text_block-179-47').text(sum);
                }else{
                    jQuery('#text_block-14-124, #text_block-179-47').text('0'); // does not run
                }
            });

            jQuery( document.body ).on( 'wc_cart_emptied', function(){
                var sum = 0;
                jQuery(".qty").each(function(){
                    sum += +jQuery(this).val();
                });
                if(sum > 0 || sum != ''){   
                    jQuery('#text_block-14-124, #text_block-179-47').text(sum);
                }else{
                    jQuery('#text_block-14-124, #text_block-179-47').text('0'); // does not run
                }
            });
        })(jQuery);
    </script>
    <?php
}

add_action( 'wp_footer', 'add_custom_js', 10, 1 );

供引用 WooCommerce cart.js。您可以在下面看到如何以及何时调用触发器。

/**
 * Update the .woocommerce div with a string of HTML.
 *
 * @param {String} html_str The HTML string with which to replace the div.
 * @param {bool} preserve_notices Should notices be kept? False by default.
 */
var update_wc_div = function( html_str, preserve_notices ) {
    var $html       = $.parseHTML( html_str );
    var $new_form   = $( '.woocommerce-cart-form', $html );
    var $new_totals = $( '.cart_totals', $html );
    var $notices    = $( '.woocommerce-error, .woocommerce-message, .woocommerce-info', $html );

    // No form, cannot do this.
    if ( $( '.woocommerce-cart-form' ).length === 0 ) {
        window.location.reload();
        return;
    }

    // Remove errors
    if ( ! preserve_notices ) {
        $( '.woocommerce-error, .woocommerce-message, .woocommerce-info' ).remove();
    }

    if ( $new_form.length === 0 ) {
        // If the checkout is also displayed on this page, trigger reload instead.
        if ( $( '.woocommerce-checkout' ).length ) {
            window.location.reload();
            return;
        }

        // No items to display now! Replace all cart content.
        var $cart_html = $( '.cart-empty', $html ).closest( '.woocommerce' );
        $( '.woocommerce-cart-form__contents' ).closest( '.woocommerce' ).replaceWith( $cart_html );

        // Display errors
        if ( $notices.length > 0 ) {
            show_notice( $notices );
        }

        // Notify plugins that the cart was emptied.
        $( document.body ).trigger( 'wc_cart_emptied' );
    } else {
        // If the checkout is also displayed on this page, trigger update event.
        if ( $( '.woocommerce-checkout' ).length ) {
            $( document.body ).trigger( 'update_checkout' );
        }

        $( '.woocommerce-cart-form' ).replaceWith( $new_form );
        $( '.woocommerce-cart-form' ).find( ':input[name="update_cart"]' ).prop( 'disabled', true ).attr( 'aria-disabled', true );

        if ( $notices.length > 0 ) {
            show_notice( $notices );
        }

        update_cart_totals_div( $new_totals );
    }

    $( document.body ).trigger( 'updated_wc_div' );
};

/**
 * Update the .cart_totals div with a string of html.
 *
 * @param {String} html_str The HTML string with which to replace the div.
 */
var update_cart_totals_div = function( html_str ) {
    $( '.cart_totals' ).replaceWith( html_str );
    $( document.body ).trigger( 'updated_cart_totals' );
};