页面初始加载无法找到元素，窗口Resize后正常，WooCommerce购物车代码问题

Hey there! Let's break down why your code works on window resize but not on initial load, and fix it step by step.

Why This Happens #

The core issue here is that your target elements (.woocommerce-mini-cart, etc.) are likely loaded dynamically after the $(document).ready() event fires. WooCommerce's mini cart often uses AJAX/fragment loading to render content asynchronously—meaning when your initial maybeAdjustCartClass() runs, those elements don't exist in the DOM yet. When you resize the window later, the elements have already loaded, so the function works as expected.

Also, I spotted a typo in your original code: woocommmerce-mini-cart-wrapper (missing an "e" in "woocommerce")—that could also be contributing to element-not-found errors on initial load!

Solutions #

Here are two reliable fixes, starting with the WooCommerce-specific approach (most recommended):

1. Use WooCommerce's Built-in AJAX Events #

WooCommerce triggers specific events when the mini cart is updated or loaded. We can hook into wc_fragment_refreshed (the event that fires when mini cart fragments are updated) to run your function whenever the cart content is ready.

$(document).ready(function(){
  function maybeAdjustCartClass() {
    // Fixed the typo here: "woocommerce" instead of "woocommmerce"
    let cartWrapper = $( '.woocommerce-mini-cart-wrapper' );
    let cart = $( '.woocommerce-mini-cart' );
    let cartHeight = cart.height();
    let cartLength = cart.length;
    let cartContainerHeight = $( '.widget_shopping_cart_content' ).height();

    if ( cartLength < 1 || cartHeight < cartContainerHeight ) {
      // Add your class logic here
      cartWrapper.addClass('cart-shorter-than-container');
    } else {
      // Remove class if condition isn't met
      cartWrapper.removeClass('cart-shorter-than-container');
    }
  }

  // Try running once on initial load (in case elements are already present)
  maybeAdjustCartClass();

  // Trigger when WooCommerce refreshes mini cart fragments
  $(document).on('wc_fragment_refreshed', function() {
    maybeAdjustCartClass();
  });

  // Keep your resize listener
  $(window).on('resize', function() {
    maybeAdjustCartClass();
  });
});

2. Use MutationObserver (Universal Dynamic Element Detection) #

If the WooCommerce event doesn't cover all cases (e.g., custom cart loading logic), use MutationObserver to watch for changes in the DOM and run your function when the target elements appear.

$(document).ready(function(){
  function maybeAdjustCartClass() {
    let cartWrapper = $( '.woocommerce-mini-cart-wrapper' );
    let cart = $( '.woocommerce-mini-cart' );
    let cartHeight = cart.height();
    let cartLength = cart.length;
    let cartContainerHeight = $( '.widget_shopping_cart_content' ).height();

    if ( cartLength < 1 || cartHeight < cartContainerHeight ) {
      cartWrapper.addClass('cart-shorter-than-container');
    } else {
      cartWrapper.removeClass('cart-shorter-than-container');
    }
  }

  // Initial run
  maybeAdjustCartClass();

  // Set up observer to watch for dynamic element addition
  const cartContainer = document.querySelector('.widget_shopping_cart_content');
  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      // Check if the mini cart was added to the DOM
      if ($(mutation.addedNodes).find('.woocommerce-mini-cart').length || $(mutation.addedNodes).is('.woocommerce-mini-cart')) {
        maybeAdjustCartClass();
      }
    });
  });

  // Start observing the cart container for child changes
  observer.observe(cartContainer, {
    childList: true,
    subtree: true
  });

  // Resize listener
  $(window).on('resize', maybeAdjustCartClass);
});

Key Notes #

• Always double-check element selectors for typos (like the missing "e" in your original code)—small mistakes like this are easy to miss but break everything!
• The WooCommerce event approach is cleaner because it's tailored to how the mini cart works, but MutationObserver is a great fallback for custom setups.

内容的提问来源于stack exchange，提问作者user3486605