Offer Selection Embed
The Offer Selection embed is an intuitive interface for selecting an offer, place properties and ancillaries for a given JourneyOfferSelection.
Provided with a booking id and offer id, the embed will display the all the available offers for the JourneyOfferSelection to which the provided offer belongs and allow the user to choose among available place properties and ancillaries. The embed will update the booking automatically, emitting the aa-offer-selection:change event when the user makes a selection and it has been confirmed.
Offers are categorized by service class, flexibility and comfort class. This makes it easier for the user to quickly find the offer that suits them. If place properties or anciallaries are available for the offer, they will be displayed as well.
The Offer Selection is fully responsive and will adapt to the screen size of the user. Scroll down to see an example of the Offer Selection in action.
Getting Started
To add the Offer Selection to your website, you first need to load the script. The script is a standard JavaScript module and can be loaded using the script tag.
Loading the script as module
The type attribute needs to be set to module for the script load properly.
html
<script
href="https://allaboard.eu/embed/aa-offer-selection.js"
type="module"></script><script
href="https://allaboard.eu/embed/aa-offer-selection.js"
type="module"></script>The script will register the Custom Element aa-offer-selection with the browser. The Custom Element can then be used in your HTML like any other HTML element.
html
<aa-offer-selection
publicApiKey="my-api-key"
booking="68fb7b20-e788-4b1d-b28d-a4ee3eff8a3c"
offer="cc76cdcf-d545-487c-9470-3355db079546">
</aa-offer-selection><aa-offer-selection
publicApiKey="my-api-key"
booking="574357f8-b7ac-4145-a930-6fe8e7d1b8a6"
offer="86b7bf37-f5a7-4a53-b261-2c16d8240653">
</aa-offer-selection>Attributes
The Offer Selection embed communicates with the All Aboard API to display the available offers and to save any changes made by the user. To know which offers to display in the list you need to configure the element with some attributes. The <aa-offer-selection> element can be configured by setting attributes on the element.
| Name | Description | Required |
|---|---|---|
publicApiKey | Your public API key. You can find your API key in the All Aboard Dashboard. | Yes |
booking | The booking id to use when calling the API. | Yes |
offer | The currently selected offer id of the JourneyOfferSelection for which to display available offers. | Yes |
sessionId | The session ID to use when calling the API. Can be any unique string that identifies the session. Used for analytics and troubleshooting. | No |
language | The language to use for the list and modal. For example, en or sv. | No |
Events
To listen for events from the Offer Selection, you can use the addEventListener method. This is usefull if you want to e.g. update the booking total price when an offer is selected.
| Name | Description |
|---|---|
aa-offer-selection:change | Emitted when an offer, property or ancillary is selected. The event detail will contain the offerId. Fetching the booking will show that this offer is now selected. |
aa-offer-selection:error | Emitted when an error occurs. The event detail will contain the error property which can be used to display an error message. |
Slots
Custom elements use slots to display custom markup inside the element.
error
You can also use the error slot to display an error message when the offer selection fails to load or a selection could not be confirmed.
html
<aa-offer-selection
publicApiKey="my-api-key"
booking="351efacb-2cc9-4a9f-ab67-603a2bd933bf"
offer="b41e1443-155c-4e5d-aa8c-dfdf457090a5">
<p slot="error">Failed to update booking</p>
</aa-offer-selection><aa-offer-selection
publicApiKey="my-api-key"
booking="5442d7b9-db5a-448d-a8bb-7c934410e3c1"
offer="fd490308-10cb-41c4-a87b-d528fde06f87">
<p slot="error">Failed to update booking</p>
</aa-offer-selection>Example
See an example implemention of the Journey List bellow. Try changing the origin, destination, currency and language to see the results update.