Frontend Prototype
API Meeting Planner / Favorites
Get Item data
Whenever the user opens the watch list, we'll make a request to get additional information needed to display.
Request
POST /your/script
Payload JSON:
{
"istemIds": ["id1", "id3"],
"language": "de"
}
Answer
{
"pages": [
{
"id": "id1",
"type": "Accommodation",
"name": "Haus Schönstatt",
"info": "Brig",
"img": "https://media.myswitzerland.com/image/fetch/w_{w},h_{h},c_fill,g_auto,f_auto,q_auto/https://flximg.com/auto/myswitzerland/0 250x150",
"url": "",
"detail": [
{
"name": "Beschreibung",
"type": "facts",
"lead": " Accusamus sed minima deleniti ratione voluptatem veniam ullam nemo sit vel aut rerum. unde modi aliquam facilis et est dolor repellendus saepe. quis ut inventore delectus quis aspernatur voluptatibus ut doloribus. praesentium amet recusandae tenetur eos nisi porro quo impedit. molestiae nam nesciunt quos tenetur et possimus. est qui consectetur molestiae eos rem hic officia rerum dolor commodi. beatae deserunt quasi explicabo delectus",
"facts": [
{
"key": "Räumlichkeiten",
"value": "26"
},
{
"key": "Anzahl Personen",
"value": "20-3000"
},
{
"key": "Infrastruktur",
"value": "Verfügbar"
}
]
},
{
"name": "Säle",
"type": "rooms",
"rooms": [
{
"name": "Boston 1",
"equipment": [
{
"type": "wifi",
"available": true,
"label": "Kostenloses W-LAN"
},
{
"type": "microphone",
"available": true,
"label": "Mikrofon auf Anfrage"
},
{
"type": "camera",
"available": true,
"label": "Projektionsanlage vorhanden"
},
{
"type": "speakers",
"available": true,
"label": "Simultandolmetscheranlage auf Anfrage"
}
],
"concert": 218,
"seminar": 120,
"banquet": 0,
"area": "160 m2"
}
]
},
{
"name": "Kontakt",
"type": "contact",
"address": {
"name": "Congress Center",
"street": "Webergasse 222",
"city": "9000 St. Gallen",
"phone": "+41 (0)71 233 44 10",
"website": "https://www.hoteldom.ch",
"email": "info@hoteldom.ch"
}
}
]
},
{
"id": "id3",
"type": "Experience",
"name": "Hotel Saubrunn",
"info": "Brig",
"img": "https://media.myswitzerland.com/image/fetch/w_{w},h_{h},c_fill,g_auto,f_auto,q_auto/https://flximg.com/auto/myswitzerland/2 250x150",
"url": "",
"detail": [
{
"name": "Beschreibung",
"type": "facts",
"lead": " Amet est voluptatem nobis veniam. dolores impedit facere dolorum similique impedit temporibus sed omnis aut. et hic veritatis rerum est ut voluptas velit",
"facts": [
{
"key": "Sprachen",
"value": "Deutsch, Französisch, Englisch"
},
{
"key": "Anzahl Personen",
"value": "20-3000"
},
{
"key": "Saison",
"value": "Frühling - Herbst"
},
{
"key": "Preis pro Person",
"value": "CHF 180"
}
]
},
{
"type": "rooms",
... see location ...
},
{
"type": "contact",
... see location ...
}
]
}
]
}
We differentiate all types into two groups: location | activity (only needed for Meeting Planner)
The type grouping can be set in HTML:
<div
class="Watchlist"
data-js-watchlist
data-watchlist-config='{"dataPath":"/your/script", "entryTypes":{"location":["Restaurant","Accommodation"],"activity":["Experience"]}}'
>
The URL can be set in the HTML:
<div
class="Watchlist"
data-js-watchlist
data-watchlist-config='{"dataPath":"/your/script"}'
>
Form PDF
Request
- list: JSON
Example JSON:
{
"id": 1513755877809,
"title": "Meine Merkliste",
"items": [{
"id": 11,
"comment": "",
"type": "Restaurant"
}, {
"id": 17,
"comment": "",
"type": "Experience"
}, {
"id": 23,
"comment": "Ein sehr schönes Hotel.",
"type": "Accommodation"
}]
}
The scrpipt URL can be set in the Vue-Template (part of the HTML page):
_c("form",{attrs:{action:"/your/script",method:"POST"}
Answer
A PDF document.
Form Email
Request
- list: JSON (see form PDF)
- additonal fields: vorname, nachname, firma, e_mail, mitteilung, g-recaptcha-response –– the naming can be changed by modifying the Vue-template.
The scrpipt URL can be set in the Vue-Template (part of the HTML page):
_c("form",{attrs:{action:"/your/script",method:"POST"}
Answer
An HTML page saying: «Thanks, we'll send the email»
Form Offer
Request
- list: JSON (see form PDF)
Answer
An HTML page like this: https://build.hinderlingvolkart.com/myswitzerland/website/master/20180214/pages/99_unsorted/offer-form-1.html
(opens in a new tab, because we set target="_blank" on the form tag)