Results Widget

The Results widget should be placed on your designated "results" page in your website as part of the foundation page setup, and will display the properties resulting from a search. This widget is mobile- and container-responsive and will adjust for device sizes and expand to fill any container space made available in your website page design.

Widget Type: data-type="ListingResults"

Foundation Page: This is a foundation widget that should be placed on your designated results page. To configure this foundation page in your Buying Buddy dashboard: Menu Settings > Foundation Pages > Results Page

Key Features

• Displays search results in multiple presentation modes
• Container-responsive design optimized for all screen sizes
• Interactive map integration with property markers
• Grid layout for property listings with pagination
• Full-screen mode capability
• Automatic pagination handling

Layout and Responsive Design

Container Responsive Design:

• This widget is mobile responsive and will expand to fill any container / space made available in your website page design. Uses container queries for dynamic adaptation to any placement context
• Optimized for mobile display with support for containers as narrow as 280px
• Typical layout breakpoint occurs at 768px
• Ensures consistent user experience across all digital environments

Presentation Modes:

• Split Screen: Shows the map and properties side by side (initial default view)
• Grid Layout: Properties displayed in a grid layout when map is hidden
• Map Only: Full map view with property markers

Colors and Theming

• Widget Themes can be used to apply predefined or custom color schemes
• Background: Uses 'Widget Background' color from the applied widget theme

Basic Implementation

<bb-widget data-type="ListingResults"></bb-widget>

[mbb_widget data-type="ListingResults"]

Parameters and Filters

Required Parameters

data-type="ListingResults"
This defines the widget to be a Results widget

Widget-Specific Filters

All filters are applied using data-filter="parameter:value" format. Multiple filters can be combined using the + symbol.

data-filter Options

Use the Wizard to discover and set these options as the data-filter option as part of the widget short code.

• hideMap:true
  Hides the map by default when results load. The default view displays results in a split-screen layout with a map, but users can click the Hide Map button to remove the map from view.
• header-menu:false
  Hides the 'menu' icon and the 'save-search' button in the header

Map Position and Zoom Filters
Set the initial map view center point and zoom level. This filter requires latitude and longitude values, so use the LAC Wizard to create these filter values. Remember the view of the map does not affect the result, just the view.

Custom Height (Inline style)

When the map loads, the widget height will be adjusted to fit inside the browser. The height can be manually set by using inline CSS styles as part of the widget code. Setting the height will apply to the widget only when showing the map.

<bb-widget data-type="ListingResults" style="height:500px"></bb-widget>

[mbb_widget data-type="ListingResults" style="height:500px"]

When the map loads, the widget height will be adjusted to fit inside the browser. The height can be manually set by using inline CSS styles as part of the widget code. Setting the height will apply to the widget only when showing the map.

Page Header Offset

When the Results widget is displayed in sticky/split-screen mode, the map and property list panels stick to the very top of the browser as you scroll. If your website has a fixed or sticky header (such as a navigation bar), the widget needs to know the height of that header so it can position itself correctly beneath it.

In the example shown below, the header is 70px high. Without any adjustments, the top of the widget will be covered by the website header when scrolling.

Set "header offset" in Dashboard Settings (Recommended)

The recommended approach is to configure the widget header offset in your Buying Buddy dashboard. This allows you to set different values for each screen size to match your website's responsive header behavior.

To configure: Menu Settings > Website Settings > main tab -- Widget Header Offset

You can specify the height (in pixels) of your website's header for each screen size:

• Mobile (below 768px): Header height for phones and small screens. Note that sticky mode is not active on mobile, but this value is stored for future use.
• Tablet (768px – 991px): Header height for tablet-sized screens. If a Desktop value is not set, this value will also be used for desktop screens.
• Desktop (992px and above): Header height for desktop screens. If not set, the Tablet value is used.

IMPORTANT: Make sure you clear your caches (website cache, server cache, browser cache etc) in order to see the new setting take effect.

Header Offset Filter Parameter

Alternatively, a single offset value can be set using the topOffset filter parameter directly in the widget code. This applies the same value to both Tablet and Desktop screen sizes.

<bb-widget data-type="ListingResults" data-filter="topOffset:70"></bb-widget>

[mbb_widget data-type="ListingResults" data-filter="topOffset:70"]

Limitations

• The Map Widget cannot be combined on a page with the Results widget
• The maximum number of property results that can be displayed on the map is 2500. If you use a shape in a filter then be aware that a large number of vertices will slow down the query.
• Only one polygon can be shown on the map

Foundation Page Setup

To configure this foundation page in your Buying Buddy dashboard: Menu Settings > Foundation Pages > Results Page

Related Articles

• Search Widget Reference
• Property Details Widget Reference
• Map Display Widget Reference
• Results Widget as a Display Widget
• Filter Parameters Reference