Articles on: Advanced Settings

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. Access Widget Placement Settings


Navigate to Bird App Settings > Widget Placement in your Shopify admin.


Shows the Bird App Settings menu with Widget Placement option highlighted for easy navigation


2. Set Reinitialize Delay


Increase the reinitialize delay to ensure the widget loads after your cart fully renders. This setting waits X seconds 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


Displays the reinitialize delay configuration field with timing options for widget initialization


3. Configure Element Watching


Use element watching only if reinitialize 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


Shows the element selection interface for choosing which DOM element to monitor for changes


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.


Shows the CSS selector input field where users enter the element identifier to watch


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.



Updated on: 09/25/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!