Booking search widget
Booking Search Widget
The Booking Search Widget allows users to search for products that match specific criteria entered in a search form. The results are displayed as product cards, making it easy for users to explore and choose from the available options.
By default, if no search criteria are specified, all products with at least one available time slot are listed.
Key Features
-
Customizable Search Experience Users can search based on criteria like difficulty, duration, quantities, and locations.
-
Dynamic Product Listings Displays matching products as visually appealing cards with configurable colors.
-
Responsive Design Adapts to different screen sizes, ensuring a seamless user experience on any device.
-
Alternate Product Card Colors Customize the colors of the product cards in the list to alternate between specified styles for better visual distinction.
How to Use
Add the widget to your webpage using the HTML snippet below. Customize its properties as needed.
Example:
<bilberry-booking-search></bilberry-booking-search>Widget Properties
| Property | Description | Default Value | Required |
|---|---|---|---|
num-xs | Number of cards visible per row on extra small screens (mobile). | 1 | No |
num-sm | Number of cards visible per row on small screens (tablets). | 2 | No |
num-md | Number of cards visible per row on medium screens (small desktop screens). | 2 | No |
num-lg | Number of cards visible per row on large screens (large desktop screens). | 3 | No |
background-colors | Comma-separated list of HTML color codes for alternating product card background colors. | Unset | No |
text-colors | Comma-separated list of HTML color codes for alternating product card text colors. | Unset | No |
primary-colors | Comma-separated list of HTML color codes for alternating primary colors on product cards. | Unset | No |
primary-text-colors | Comma-separated list of HTML color codes for alternating primary text colors on product cards. | Unset | No |
accent-colors | Comma-separated list of HTML color codes for alternating accent colors on product cards. | Unset | No |
accent-text-colors | Comma-separated list of HTML color codes for alternating accent text colors on product cards. | Unset | No |
hide-difficulty | Hides the difficulty field in the search form. Options: yes, no. | no | No |
hide-duration | Hides the duration field in the search form. Options: yes, no. | no | No |
hide-quantities | Hides the quantities field in the search form. Options: yes, no. | no | No |
limit-to-products | Comma-separated list of product IDs to limit the search to. Searches all products if unset. | All products | No |
exclude-products | Comma-separated list of product IDs to exclude from the search. Ignored if limit-to-products is set. | All products | No |
locations | Comma-separated list of locations to limit the search to. Hides the field if unset. Locations must match locations defined in Bilberry Backoffice | All locations | No |
lazy-load | Set to yes to defer loading the widget content until it is visible in the viewport. Options: yes, no. | no | No |
Configuring Alternating Product Card Colors
You can configure alternating colors for the product cards to enhance visual distinction. Ensure that all the color-related properties (background-colors, text-colors, primary-colors, primary-text-colors, accent-colors, accent-text-colors) have the same number of colors specified to maintain consistency.
Setting Up on Wix
If you’re using Wix as your website builder, follow these steps to configure the widget:
- Access the Configuration Guide: Refer to the relevant guide in these docs for general widget setup on Wix.
- Use the Following Values:
- Server URL:
https://bilberry-widgets.b-cdn.net/v4/wix-wrappers/WixBilberryBookingSearch.js - Tag Name:
wix-bilberry-booking-search
- Server URL:
Tips for Effective Integration
- Customize Card Layout: Adjust the
num-*properties to control the number of cards displayed per row on different screen sizes. - Apply Color Themes: Use alternating colors for product cards to make your listing visually engaging.
- Tailor Search Options: Hide unnecessary fields like difficulty or duration to simplify the search process.
- Focus the Search: Use
limit-to-productsorlocationsto narrow the search to specific products or areas. - Mobile Responsiveness: Test the widget on various devices to ensure a smooth user experience.
By integrating the Booking Search Widget, you can provide an intuitive and visually appealing way for users to find and book products on your website.