Product Booking Offer
Figma Component: 21560-194640
GitHub Issue: #76
Last modified with commit 3aca9a5 on
by Aljaž.
The Product Booking Offer component displays pricing and booking options for a product or experience. Shows package options with pricing, inclusions, and booking buttons.
Functional Documentation
| Role | Scenario | Description |
|---|---|---|
| system | Display booking options | Shows available booking packages or pricing tiers with features and pricing information. |
| system | Display package details | Each package shows name, price, inclusions list, and booking button. |
| system | Collapse description with "Prikaži več" | On desktop, the description is truncated to 4 lines by default and an ellipsis ("...") + the "Prikaži več" button are shown to expand it. In the right part of the component (pricing column) where content is grouped in categories with bullet lists, the system shows two bullet items per category by default and then shows an ellipsis ("...") + the "Prikaži več" button. On mobile, the description is hidden by default and only the ellipsis ("...") + the "Prikaži več" button are visible; in the right part bullet lists, only one bullet item per category is shown by default. |
| system | Inherit contingent tag badge | If the product template defines a current contingent (e.g., Super Early Bird, Early Bird), the component automatically pulls and displays the corresponding tag badge (label + styling) from the product template. |
| system | Highlight featured offer(s) in list | When rendering a list of Product Booking Offer entries, the system can wrap selected products with the featured-banner-container to visually emphasize them as featured choices. |
| system | Render ecommerce vs catalog columns | On ecommerce pages, the right pricing + CTA column is rendered with a fixed width. In catalog contexts, this column is not rendered and the middle content stretches to fill the remaining space. |
| editor | Configure booking packages | Each package requires name, price, inclusions list, and booking button URL. Packages can be reordered. Optional featured package highlighting. |
| editor | Select accommodation tags | Accommodation tags are defined in advance by the system. Editor selects accommodation tags from a predefined list; number of persons and location are entered manually - those values will not be selected from the tag list. |
| editor | Configure available upgrades | For upgrades (nadgradnje), editor chooses which offer-list-item entries are available to users by selecting them from a predefined list. |
| editor | Set featured products in list | Editor can mark product booking offers as featured (e.g., via a boolean toggle). The system then renders those items using featured-banner-container in the offers list. |
| user | Select package | Click booking button to proceed with selected package. Button shows hover state on hover. |
| user | Expand description | User clicks "Prikaži več" to reveal the full description text and expand the bullet lists in the right column. |
Properties
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |
Layout
| Value | Example |
|---|---|
| Collegium | |
| Mondial |  |