airport-one-widgets 0.3.1 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -29
- package/dist/airport-one-widgets.iife.js +11 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -82,18 +82,18 @@ the subscribing airport.
|
|
|
82
82
|
**Car** links FlyMyAirport's car rental page for the airport in a new tab, as the earlier
|
|
83
83
|
widget did.
|
|
84
84
|
|
|
85
|
-
| Attribute | Default | Description
|
|
86
|
-
| -------------------- | --------------------------------------------- |
|
|
87
|
-
| `skin` | `site` when `theme="dark"`, otherwise `light` | `site` (flymyairport.com dark glass), `light` (white card), `dark`, `brand` (tinted by `primary-color`), `none` (no card; the host supplies contrast)
|
|
88
|
-
| `labels` | `inside` | `outside` renders a visible label above each field for airports that need them
|
|
89
|
-
| `market-name` | `{City} ({IATA})` | The airport's display name in the header (AIR-1585)
|
|
90
|
-
| `primary-color` | `#0745A2` | Calendar route bar, destination tiles
|
|
91
|
-
| `secondary-color` | `#FC6322` | One-stop dot, nonstop dots and badge, Search once complete, focus ring
|
|
92
|
-
| `hide-branding` | `false` | Hides the FlyMyAirport wordmark and Powered by KAYAK
|
|
93
|
-
| `hide-fma-logo` | `false` | Hides only the FlyMyAirport wordmark; Powered by KAYAK stays. In the portal only Airport One administrators can set it
|
|
94
|
-
| `hide-car-button` | `false` | Hides the Flights / Car links
|
|
95
|
-
| `show-nonstops` | `false` | `true` lists the airport's nonstops in the destination dropdown before the traveler types
|
|
96
|
-
| `destination-groups` | none | Curated groups listed under the nonstops before the traveler types, as the JSON the portal saves: `[{"title":"Beach getaways","airports":[{"code":"CUN","name":"Cancún"}]}]`. A scheduled airport takes the schedule's city name, any other its `name`.
|
|
85
|
+
| Attribute | Default | Description |
|
|
86
|
+
| -------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
87
|
+
| `skin` | `site` when `theme="dark"`, otherwise `light` | `site` (flymyairport.com dark glass), `light` (white card), `dark`, `brand` (tinted by `primary-color`), `none` (no card; the host supplies contrast) |
|
|
88
|
+
| `labels` | `inside` | `outside` renders a visible label above each field for airports that need them |
|
|
89
|
+
| `market-name` | `{City} ({IATA})` | The airport's display name in the header (AIR-1585) |
|
|
90
|
+
| `primary-color` | `#0745A2` | Calendar route bar, destination tiles |
|
|
91
|
+
| `secondary-color` | `#FC6322` | One-stop dot, nonstop dots and badge, Search once complete, focus ring |
|
|
92
|
+
| `hide-branding` | `false` | Hides the FlyMyAirport wordmark and Powered by KAYAK |
|
|
93
|
+
| `hide-fma-logo` | `false` | Hides only the FlyMyAirport wordmark; Powered by KAYAK stays. In the portal only Airport One administrators can set it |
|
|
94
|
+
| `hide-car-button` | `false` | Hides the Flights / Car links |
|
|
95
|
+
| `show-nonstops` | `false` | `true` lists the airport's nonstops in the destination dropdown before the traveler types |
|
|
96
|
+
| `destination-groups` | none | Curated groups listed under the nonstops before the traveler types, as the JSON the portal saves: `[{"title":"Beach getaways","airports":[{"code":"CUN","name":"Cancún"}]}]`. A scheduled airport takes the schedule's city name, any other its `name`. Every airport in a group is listed, including one the schedule feed lacks; only with `airlines` set are unscheduled airports left out, since that search runs on one carrier |
|
|
97
97
|
|
|
98
98
|
Styling hooks: the `airfare-search-card` and `airfare-search-button` parts, and an
|
|
99
99
|
`--afs-font-family` custom property (the card otherwise inherits the host page's font).
|
|
@@ -296,14 +296,14 @@ On phones (viewport under 640px) the Airline, Traveling, and Hub menus open as a
|
|
|
296
296
|
|
|
297
297
|
Demo: `/demo/route-map.html` (`npm run dev`).
|
|
298
298
|
|
|
299
|
-
## Destination
|
|
299
|
+
## Destination Catalog
|
|
300
300
|
|
|
301
|
-
`fma-destination-
|
|
301
|
+
`fma-destination-catalog` (AIR-1798) shows an airport's destinations as cards, a list, portrait tiles, or a carousel. Data comes from `GET /v1/widget-instances/{id}/destination-catalog`: the route map's schedule data plus, when AirportOne has turned pricing on for the airport (portal General widget settings, platform admins only), fares seen in the last 48 hours. Photos come from the Asset Library: the airport's own pick for the route, then the destination's linked library images, then platform assets tagged with the destination IATA (never the legacy header-destinations files); a destination with none shows a tinted placeholder. Like the route map it renders only for an active instance allowlisted for the embedding site, or from `previewPayload` in the portal builder. Any number of instances can share a page.
|
|
302
302
|
|
|
303
303
|
```html
|
|
304
|
-
<fma-destination-
|
|
304
|
+
<fma-destination-catalog
|
|
305
305
|
data-widget-instance-id="YOUR-INSTANCE-ID"
|
|
306
|
-
></fma-destination-
|
|
306
|
+
></fma-destination-catalog>
|
|
307
307
|
```
|
|
308
308
|
|
|
309
309
|
It lays out by the width of its container, not the viewport (container queries, with a media-query fallback):
|
|
@@ -317,22 +317,23 @@ It lays out by the width of its container, not the viewport (container queries,
|
|
|
317
317
|
|
|
318
318
|
Attributes (each overrides the saved instance):
|
|
319
319
|
|
|
320
|
-
| Attribute | Default
|
|
321
|
-
| ----------------------------------------------------------------------------------- |
|
|
322
|
-
| `view` | `cards`
|
|
323
|
-
| `shows` | `featured`
|
|
324
|
-
| `featured-destinations` | promoted IATAs
|
|
325
|
-
| `per-page` | `6`
|
|
326
|
-
| `show-eyebrow` / `show-title` / `show-subheading` / `show-see-all` / `show-filters` | on
|
|
327
|
-
| `heading`
|
|
328
|
-
| `
|
|
329
|
-
| `
|
|
320
|
+
| Attribute | Default | Purpose |
|
|
321
|
+
| ----------------------------------------------------------------------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
322
|
+
| `view` | `cards` | `cards`, `list`, `tiles`, or `carousel`. Travelers never change it |
|
|
323
|
+
| `shows` | `featured` | `featured`, `nonstop`, `one-stop`, or `all` (Featured / Nonstop / 1-stop chips for the traveler) |
|
|
324
|
+
| `featured-destinations` | promoted IATAs | Comma-separated IATAs in display order. Unserved codes are dropped; none served falls back to the airport's promoted IATAs (Settings > Promoted IATAs), then to its nonstops |
|
|
325
|
+
| `per-page` | `6` | `3`, `6`, `8`, `9`, or `12`. List shows double; the carousel shows everything |
|
|
326
|
+
| `show-eyebrow` / `show-title` / `show-subheading` / `show-see-all` / `show-filters` | on | `false` hides that part. All of the first four off leaves a bare content block |
|
|
327
|
+
| `eyebrow` / `heading` / `subheading` | per filter | Replace the eyebrow, title, and subheading for every filter |
|
|
328
|
+
| `see-all-label` | `See all destinations` | Replaces the See all link text |
|
|
329
|
+
| `primary-color` / `cta-color` / `cta-hover-color` | airport brand | Links, day pills and the tile price badge / the "See current price" button and eyebrow / button hover (a darker CTA if unset) |
|
|
330
|
+
| `border-radius` | 16 | Card corner radius in px (0–32). Text uses the host page's font |
|
|
330
331
|
|
|
331
|
-
The card, tile, or row body opens the FlyMyAirport destination page; the button opens KAYAK through the redirect worker (`a1_wid` / `a1_wtype`) on the fare's dates, or, with no fare, the first day at least 14 days out that the route flies, for four nights. The KAYAK footnote always shows: the AIR-1034 wording with pricing on, "Powered by KAYAK." without. Segment events (under `consent-analytics`): `
|
|
332
|
+
The card, tile, or row body opens the FlyMyAirport destination page; the button opens KAYAK through the redirect worker (`a1_wid` / `a1_wtype`) on the fare's dates, or, with no fare, the first day at least 14 days out that the route flies, for four nights. The KAYAK footnote always shows: the AIR-1034 wording with pricing on, "Powered by KAYAK." without. Segment events (under `consent-analytics`): `destination_catalog_click`, `destination_catalog_filter`, `destination_catalog_sort`, `destination_catalog_more`, plus the shared `Widget V2 Mount` / `Widget V2 Public Config`.
|
|
332
333
|
|
|
333
|
-
CSS parts: `
|
|
334
|
+
CSS parts: `destination-catalog-container`, `destination-catalog-header`, `destination-catalog-chips`, `destination-catalog-item`, `destination-catalog-footnote`.
|
|
334
335
|
|
|
335
|
-
Demo: `/demo/destination-
|
|
336
|
+
Demo: `/demo/destination-catalog.html` (`npm run dev`) renders sample ATW data through `previewPayload` with controls for view, shows, pricing, and placement width.
|
|
336
337
|
|
|
337
338
|
## Carfare Search
|
|
338
339
|
|