Search bar
The search bar allows your travelers to search for your travel products. It supports filtering by destinations, date range, and travelers. The search will be limited to products with instances within the supplied date range. The search bar widget does not show any search results by itself; it only controls the search filter values. We designed the search bar to work in concert with the search results widget.
The search bar provides different filters to allow travelers to search for products. These filters are:
- Destinations: Allows travelers to filter products by destination.
- Categories: Allows travelers to filter products by categories you define, e.g. “beach”, “mountain”, “city”, etc.
- Date range: Allows travelers to filter products to a certain date range (as provided by the product’s sales periods)
Using the search bar widget’s attributes you can turn on or off the destinations and categories filters. You may also preselect a destination and/or list of categories.
Attributes
| Attribute | Description | Required | Example | Default |
|---|---|---|---|---|
start-date | Default start date for product search | No | '2023-01-01' | Today |
end-date | Default end date for product search | No | '2024-01-01' | One year from now |
enable-destinations | Enable or disable the destinations filter | No | true | true |
enable-categories | Enable or disable the categories filter | No | true | false |
destination | Default desintation for product search | No | 16 | undefined |
categories | Default list of preselected category IDs for product search | No | 457,458 or [457,458] | undefined |
Example
<blend-search-bar></blend-search-bar>
<!-- With dates -->
<blend-search-bar start-date="2023-01-01" end-date="2024-01-01"></blend-search-bar>
<!-- With categories and destinations enabled (destinations enabled by default) -->
<blend-search-bar enable-categories="true"></blend-search-bar>
<!-- With default destination and default categories selected -->
<blend-search-bar enable-categories="true" destination="16" categories="547,548"></blend-search-bar>
Demo
Query Parameters
The query parameters can be used to set default values to the widget on page load. All query parameters are optional and will be modified as the traveler is using the widgets. Note that the query parameters will work regardless of whether the search bar widget is present on the page. If you want to use the search results widget to list filtered collection products you can use the query parameters to set the default filter values.
bw-startDate
Controls the start date of the search bar.
The value should be a valid iso date string in the format YYYY-MM-DD.
Iso Date Time strings are also supported in which case the time will be ignored.
Examples:
?bw-startDate=2022-11-11?bw-startDate=2022-11-11T20%3A00%3A00.000%2B01%3A00
bw-endDate
Controls the end date of the search bar.
The value should be a valid iso date string in the format YYYY-MM-DD.
Iso Date Time strings are also supported in which case the time will be ignored.
Examples:
?bw-startDate=2022-11-11?bw-startDate=2022-11-11T20%3A00%3A00.000%2B01%3A00
bw-adults
Controls the number of adults for the search bar traveler input.
If not set 1 adult is used as default.
Examples:
?bw-adults=2?bw-adults=0
bw-childrenAges
Controls the number and ages of children for the search bar traveler input. If not set no children are used as default.
Examples:
?bw-childrenAges=5%2C10?bw-childrenAges=
bw-destination
Controls the destination filter in the search bar. If set the search bar will default to the destination matching the provided id. You can see a list of destinations in Blend App. If you go to a specific destination you can see the id in the URL.
Examples:
?bw-destination=150
bw-tagIds
Controls the category filter in the search bar. If you specify a comma-separated list of category ids, the search bar will select the categories matching the provided ids. You can URL encode the comma-separated list of category ids to ensure it is correctly interpreted by the browser.
You can see a list of categories in Blend App.
If you inspect the network log you’ll find the list of categories (and their IDs) in the https://blend-app-api.blendbooking.com/product-tags response.
Examples:
?bw-tagIds=100?bw-tagIds=100%2C101%2C103