JavaScript Widget Helpers Guide

This guide explains how to use JavaScript helpers to enhance widget functionality on your website. These helpers solve common display issues and add useful features to your Buying Buddy widgets.

Widget Display in Tabs

Problem

When widgets are placed in tabs, they may not display correctly when a tab is opened after the page loads. This particularly affects:

• Gallery widgets
• List widgets
• Map widgets

Solution for Gallery and List Widgets

The general approach is to trigger a resize event when a tab is selected. While the concept is straightforward, the implementation depends on your specific environment and tab system.

You can trigger the resize in different ways:

• Attach to a tab's onclick function directly
• Listen for clicks on any tab in a container
• Use your framework's tab selection events
• Add custom timing delays if needed

The examples below show common implementations, but you may need to modify them based on:

• Your website's tab implementation
• Page load timing requirements
• Framework or library dependencies
• Specific widget behavior needs
• Tab system load order
• User interaction patterns

Common Implementation Scenarios

1. Simple Tab Click Handler

document.querySelectorAll('[tab-header-class]').forEach(tab => {
    tab.addEventListener('click', () => {
        window.dispatchEvent(new Event('resize'));
    });
});

Replace [tab-header-class] with your tab container's class (example: fl-tabs-label). This straightforward approach works well for simple tab implementations where you want to capture all tab clicks in a specific container.

2. Tab Handler with Timing Delays

document.querySelectorAll('[role="tab"]').forEach(tab => {
    tab.addEventListener('click', () => {
        setTimeout(() => window.dispatchEvent(new Event('resize')), 50);
        setTimeout(() => window.dispatchEvent(new Event('resize')), 200);
    });
});

This more sophisticated implementation includes two timed resize calls (at 50ms and 200ms) to handle complex page load scenarios. The multiple resize events at different intervals help ensure proper widget rendering across various environments and load conditions. You may need to adjust these delay values based on your specific needs and page load behavior.

Additional Implementation Tips

1. Timing Considerations

1. Test different delay values if widgets don't resize properly
2. Consider adding multiple resize calls for complex layouts
3. Watch for conflicts with other page load events

2. Troubleshooting Common Issues

1. If widgets don't resize, verify the tab class/selector
2. Check that the script loads after your tab system
3. Ensure jQuery (mbbQuery) is available when the code runs
4. Monitor browser console for any error messages

Solution for Map Widgets

Maps in hidden tabs require special handling because the Google Maps API needs a defined container to initialize properly. When a Map Widget is placed in a hidden tab, the container isn't defined during initial page load, which can prevent the map from displaying correctly.

To resolve this, we need to force the container definition when the tab becomes visible. Add this code above the map widget shortcode in the tab:

mbbQuery(".bfg-interactive-map").data("interactiveMap").refreshMap();
mbbQuery(".bfg-interactive-map").data("interactiveMap").centerMap();

Dedicated Agent Pages

Purpose

• Display a specific team member as the contact agent
• Show their information on Property Details
• Assign leads from the page to them

Implementation

Add this code to the bottom of the webpage:

document.addEventListener('mbb-widgets-loaded', function(){
    MBB.data.mbbagent = "[user-key-here]";
    MBB.cookie("mbbagent", "[user-key-here]" ,{ path: "/" });
    mbbQuery.ajaxSetup({ data: MBB.data });
});

Replace [user-key-here] with the agent's Buying Buddy API key

Deferred Widget Loading

Purpose

Load widgets only when needed, especially useful for pages with multiple widgets in tabs.

Supported Widgets

• Grid/Gallery Display Widget (standard, featured and carousel)
• List Display Widget

Implementation Steps

1. Create a placeholder for your widget:

<div class="[unique-class]" filter="[filter-here]"></div>

2. Add the JavaScript to load the widget:

MBB.getDisplayWidget("[unique-class]", "[widget-ID-to-load]");

Available Widget IDs:

• MBBv3_FeaturedGallery - For Grid or Carousel widgets
• MBBv3_FeaturedList - For List Display widgets

Example: Button-Triggered Widget

<a href="#" class="btn get-widget">Show Listings</a>
<div class="gallery-listings" filter="mls_id:demo+price_min:400000+price_max:500000"></div>

<script>
document.querySelector(".get-widget").addEventListener("click", function(e) {
    e.preventDefault();
    MBB.getDisplayWidget("gallery-listings", "MBBv3_FeaturedGallery");
});
</script>

Important Notes

• Place JavaScript code in the correct location relative to widget loading
• Test timing settings for your specific environment
• Ensure unique class names for deferred widgets on the same page
• Verify widget IDs match your intended display type