How to Fix Widget Loading Issues in Dynamic Carts

Fix widget loading issues in dynamic cart environments by configuring reinitialization settings.

The Bird Pickup & Delivery widget sometimes needs reinitialization when your cart updates dynamically without page reloads. This commonly happens with cart drawers and AJAX-powered shopping carts.

Configure Widget Reinitialization

1. Open Developer Settings

In the Bird app, go to Bird Settings > Developer > Widget reload or reinitialize. See Developer Settings.

This section only appears for stores still on the legacy widget. If Enable widget V2 is on, the section is hidden: the current widget reloads itself when the cart changes, so no setting is needed.

2. Set the Cart Drawer Delay

Increase Cart drawer delay (optional) so the widget loads after your cart fully renders. Bird waits this long after your cart loads before initializing the widget, preventing timing conflicts.

• Higher values give your cart more time to load
• Start with 1 second and adjust as needed

3. Set a Watch CSS Selector

Use Watch CSS selector (optional) only if the cart drawer delay doesn’t solve your issue.

• Select a parent element that contains your cart
• The widget monitors this element for changes
• When changes occur, the widget reinitializes automatically

4. Enter CSS Selector

Specify the CSS selector for your cart’s parent element.

• Use your theme’s cart container selector
• If nothing works, enter document.body as a fallback. Note: This may cause performance issues as it will watch for any change in the body.

Advanced: AJAX Cart Widget Re-rendering

For complex AJAX cart implementations only.

When the standard reinitialization settings don’t solve your issue, use the data-watch-ajax attribute for precise control over widget behavior during dynamic cart updates.

Implementation Steps

1. Add the Widget Container

Place this code in an AJAX-loaded page where the widget appears:

<div id="birdchime-slots-box" data-watch-ajax="#element-to-watch"></div>

Important: Keep the id="birdchime-slots-box" exactly as shown.

2. Choose Your Monitoring Strategy

Watch by Element ID:

<div id="birdchime-slots-box" data-watch-ajax="#cart-container"></div>

Watch by Element Class:

<div id="birdchime-slots-box" data-watch-ajax=".cart-wrapper"></div>

Note: Choose a parent element that contains your cart. The element should remain stable and not be completely replaced during updates, as it must persist across AJAX calls for the monitoring to work effectively.

How AJAX Re-rendering Works

The data-watch-ajax attribute tells the widget to monitor a specific parent element for changes. When that element updates through AJAX or dynamic content loading, the widget automatically reinitializes itself to maintain functionality.

Troubleshooting Tips

• Start with reinitialize delay first. This solves most timing issues without additional complexity.
• Use element watching sparingly. Only enable when delay settings prove insufficient.
• Test with document.body if needed. This monitors the entire page for changes as a last resort.
• Implement AJAX re-rendering last. Use this advanced method only when other solutions fail.

Related Articles

• How to Change Shopify’s Cart Type
• The widget seems to conflict with our theme’s cart drawer, making it hard to scroll. How can we fix this?
• Why isn’t the Bird widget showing on my cart page?