Search Result Plugin

A customisable search result component for displaying property search results.

Installation

1. Include the script in your HTML

<script 
  src="https://ipro-plugins.pages.dev/plugins/search-result/latest/search-result.iife.js" 
  data-container-id="search-result-container"
  data-google-maps-api-key="YOUR_GOOGLE_MAPS_API_KEY">
</script>

2. Add a container element

<div id="search-result-container"></div>

Configuration

The search result form can be configured using data attributes on the container element.

Basic Configuration

data-api-url

• Description: URL for the API endpoint to fetch search results
• Default: null
• Example:
  • data-api-url="https://api.example.com/search"

data-brand

• Description: Custom brand colors
• Default: { "primary": "#1976d2", "secondary": "#dc004e" }
• Example:
  • data-brand='{"primary": "#5dc186", "secondary": "#dc004e"}'

data-currency

• Description: Default currency for displaying prices
• Default: GBP
• Example:
  • data-currency="USD"

data-heading-text

• Description: Custom heading text for the search results
• Default: Search Results
• Example:
  • data-heading-text="Property Search Results"

data-show-count

• Description: Show or hide the result count
• Default: true
• Example:
  • data-show-count="false"

data-booking-url

• Description: Base URL for the booking checkout process
• Default: Uses the data-api-url value if not provided
• Example:
  • data-booking-url="https://example.com/booking"

data-show-wish-button

• Description: Show or hide the wishlist/favorite button on property cards
• Default: false
• Example:
  • data-show-wish-button="true"

Sorting Configuration

data-default-sort

• Description: Default sort order for search results
• Values:
  • propertyMaxRate:asc - Price: Low to High (default)
  • propertyMaxRate:desc - Price: High to Low
  • sleeps:asc - Sleeps: Ascending
  • sleeps:desc - Sleeps: Descending
  • bedrooms:asc - Bedrooms: Ascending
  • bedrooms:desc - Bedrooms: Descending
  • nodeName:asc - Property Name
  • propertyReference:asc - Property Reference
  • ourPick:asc - Our Pick
  • Default: propertyMaxRate:asc
• Example:
  • data-default-sort="bedrooms:desc"

Display Options

data-display

• Description: Layout mode for search results
• Values: rows or gallery
• Default: rows
• Example:
  • data-display="gallery"

data-price

• Description: Format for displaying prices
• Values: exact, from, range
• Default: exact
• Example:
  • data-price="from"

data-book

• Description: Show booking button on property cards
• Default: false
• Example:
  • data-book="true"

data-images

• Description: Number of images to display per property
• Range: 1-10
• Default: 1
• Example:
  • data-images="3"

Feature Options

data-amenities

• Description: Show property amenities with icons
• Default: true
• Example:
  • data-amenities="false"

data-summary

• Description: Show property summary/description text
• Default: false
• Example:
  • data-summary="true"

data-summary-length

• Description: Maximum length of summary text (0 = show full text)
• Default: 0
• Example:
  • data-summary-length="150"

Map Configuration

data-map

• Description: Configure map display
• Values:
  • false - No map (default)
  • true - Show map with 1/3 width
  • "w-1/3" - Map takes 1/3 of screen width
  • "w-1/2" - Map takes 1/2 of screen width
  • "w-2/3" - Map takes 2/3 of screen width
  • "onclick" - Map toggled by clicking a button
• Default: false
• Example:
  • data-map="w-1/2"

data-google-maps-api-key

• Description: Google Maps API key for displaying the map
• Default: A shared development key is used when empty (for testing only)
• Example:
  • data-google-maps-api-key="YOUR_GOOGLE_MAPS_API_KEY"

Important: You MUST provide your own Google Maps API key for production use. The default key is for development/testing only and has usage limitations.

Note: The map size determines the layout of search results. When using onclick mode, a toggle button appears to switch between map and listing views.

URL Parameters

The component reads and reacts to the following URL parameters:

• Location: Comma-separated location IDs
• CheckIn: Check-in date (YYYY-MM-DD)
• CheckOut: Check-out date (YYYY-MM-DD)
• Adults: Number of adults
• Children: Number of children
• Infants: Number of infants
• Pets: Number of pets
• Attributes: Comma-separated filter attributes
• Bedrooms: Minimum number of bedrooms
• Bathrooms: Minimum number of bathrooms
• PriceFilterType: Type of price filter (Nightly or Weekly)
• NightlyPriceRange: Min and max price for nightly rates
• WeeklyPriceRange: Min and max price for weekly rates
• Currency: Currency code for displaying prices

Complete Example

<div id="search-result-container">
  data-api-url="https://api.example.com/search" 
  data-brand='{"primary": "#5dc186", "secondary": "#dc004e"}'
  data-currency="USD"
  data-display="gallery"
  data-map="true"
  data-summary="true"
  data-summary-length="200"
  data-book="true"
</div>

<script src="https://ipro-plugins.pages.dev/plugins/search-result/latest/search-result.iife.js">
  data-container-id="search-result-container"
  data-google-maps-api-key="YOUR_GOOGLE_MAPS_API_KEY">
</script>

Features

• Responsive Layout: Adapts to different screen sizes
• Multiple Display Modes: Choose between row or gallery view
• Interactive Map: Optional map display with property markers
• Property Features: Shows property amenities with icons
• Customizable Appearance: Configure colors, layout, and displayed information
• URL Parameter Integration: Automatically reads search parameters from URL

Notes

• The script should be included after the container in the DOM.
• The component will read data attributes on load and initialise automatically.
• The component will listen for URL parameter changes and update the results accordingly.
• For advanced use cases, refer to the official plugin repository or contact support.