Conflict with woocommerce checkout

[dstaver]

I'm developing a site using Timber and Woocommerce.

When updating cart quantities on the cart page the contents are duplicated after update.

The woocommerce javascript apparently looks for something like $form = $('.woocommerce > form') and since the HTML of the page seems to be repeated in the debug info the jquery selector returns two elements instead of one, causing the duplication. Disabling the plugin solves the problem.

[gchtr]

I can confirm this issue.

WooCommerce is a little weird, because it does a normal page request for the cart through AJAX (not a normal WordPress-AJAX-request) and then replaces the contents of the cart.

I’m not sure if this is really an issue in the Timber Debug Bar, but more of an issue of how WooCommerce updates the cart contents. But anyways, here’s a fix you can put into your functions.php:

/**
 * Fix conflict of Timber Debug Bar with WooCommerce cart page.
 *
 * Removes the Timber Debug Bar panel when an AJAX request is made on the WooCommerce cart page.
 */
add_filter( 'debug_bar_panels', function( $panels ) {
    // Bailout.
    if (
        ! class_exists( 'Debug_Bar_Timber' )
        || ! is_cart()
        || empty( $_SERVER['HTTP_X_REQUESTED_WITH'] )
        || strtolower( $_SERVER['HTTP_X_REQUESTED_WITH'] ) !== 'xmlhttprequest'
    ) {
        return $panels;
    }

    // Remove Timber panel from panels.
    foreach ( $panels as $key => $panel ) {
        if ( is_a( $panel, 'Debug_Bar_Timber' ) ) {
            unset( $panels[ $key ] );
        }
    }

    return $panels;
}, 11 );

[manzwebdesigns]

@gchtr and/or @dstaver is this still an issue?

[manzwebdesigns]

I am closing this issue due to inactivity, feel free to contact me if it arises again.