Portal-Suche-Widget Seitenreferenz

Das Portal-Suche-Widget ist ein Suchfeld für die SiMedia Tourismusportale. Ab drei Zeichen schlägt es passende Unterkünfte, Orte, Regionen und Sehenswürdigkeiten des Portals vor. Nach der Suche führt es den Besucher zur Ergebnisliste des Portals und übergibt den gewählten Vorschlag als Filter. Betriebe richten das Widget nicht selbst ein. Es wird für jedes Portal im Portalsystem konfiguriert und auf der Portalseite eingebunden.

Einbindung

Das Widget besteht aus einem Skript, einer CSS-Datei und dem Element <search-widget>. Die Optionen stehen im globalen Objekt window.GLOBAL_SI_PORTAL_WIDGETS unter derselben ID wie im Attribut portal-widget-id.

<script
  type="module"
  defer
  src="https://widgets.cloud.anex.is/portals/search-widget/search-widget.js"
></script>
<link
  rel="stylesheet"
  href="https://widgets.cloud.anex.is/portals/search-widget/search-widget.css"
/>

<script>
  window.GLOBAL_SI_PORTAL_WIDGETS = window.GLOBAL_SI_PORTAL_WIDGETS || {}
  window.GLOBAL_SI_PORTAL_WIDGETS[1] = {
    apiKey: '<Konfigurations-ID>::1',
    listPath: { 1: '/de/liste', 2: '/it/lista' },
  }
</script>
<search-widget portal-widget-id="1"></search-widget>

Die Testversion liegt unter https://widgets.cloud.anex.is/portals/TESTS/search-widget/.

Attribut

Attribut	Gültige Werte	Hinweise
`portal-widget-id`	Text	Pflicht. Schlüssel in `window.GLOBAL_SI_PORTAL_WIDGETS`. Fehlt das Attribut, startet das Widget nicht.

Optionen

Anders als beim Angebotsliste-Widget schreibst du die Optionen in camelCase.

Option	Gültige Werte	Hinweise
`apiKey`	`<Konfigurations-ID>::<Portalsprache>`	Pflicht. Ohne gültigen Schlüssel startet das Widget nicht. Die Zahl nach `::` legt die Sprache fest: 1 = Deutsch, 2 = Italienisch, 3 = Englisch, alle anderen auf Englisch.
`listPath`	Objekt `{ <Portalsprache>: "<Pfad>" }`	Pflicht. Seite mit der Ergebnisliste je Sprache. Fehlt die Sprache, gilt der deutsche Eintrag (1). Ein Wert mit `#` am Anfang springt zu einem Anker auf der aktuellen Seite.
`styleVariables`	Objekt mit CSS-Variablen	Farben der Schaltfläche, siehe Farben.

Farben

CSS-Variable	Standard
`--searchButton-backgroundColor`	`#39383d`
`--searchButton-borderColor`	`#39383d`
`--searchButton-textColor`	`#ffffff`
`--searchButton-hover-backgroundColor`	`#2c2b30`
`--searchButton-hover-borderColor`	`#2c2b30`
`--searchButton-hover-textColor`	`#ffffff`

Darstellung

Element	Hinweise
Suchfeld	Platzhalter „z.B. Hotel, Ort, Museum, See,…“. Ab drei Zeichen erscheinen Vorschläge. Das X im Feld leert die Suche.
suchen	Startet die Suche. Ist das Widget schmaler als 500 Pixel, steht die Schaltfläche unter dem Suchfeld.
Vorschläge	Je Vorschlag Titel, Beschreibung und ein Symbol für die Art: Unterkunft, Ort, Region oder Sehenswürdigkeit.
Keine Treffer	„Keine Treffer gefunden“, wenn nichts passt.
Fehler	„Etwas ist schiefgegangen, bitte versuchen Sie es erneut“, wenn das Portalsystem nicht innerhalb von zehn Sekunden antwortet.

Besucher bedienen die Vorschläge auch mit der Tastatur: Pfeiltasten wählen, Enter übernimmt, Esc schließt die Liste.

Verhalten nach der Suche

Wählt der Besucher einen Vorschlag oder klickt er auf suchen, öffnet das Widget die Seite aus listPath mit dem Parameter termId. Die Ergebnisliste des Portals filtert damit.
Klickt der Besucher auf suchen, ohne einen Vorschlag zu wählen, übernimmt das Widget den ersten Vorschlag.
Gibt es keinen Vorschlag, öffnet das Widget die Ergebnisliste ohne Filter.
Ist die Ergebnisliste die aktuelle Seite, lädt die Seite nicht neu. Das Widget ändert nur die Adresse.

Mandant

Allgemein

SiMedia Tourismusportale

BOOKED!

Portalverwaltung

CONNECT!

VOUCHER!

Einstellungen

Portal-Suche-Widget Seitenreferenz

Einbindung

Attribut

Optionen

Farben

Darstellung

Verhalten nach der Suche

Verwandte Artikel

​Einbindung

​Attribut

​Optionen

​Farben

​Darstellung

​Verhalten nach der Suche

​Verwandte Artikel

Einbindung

Attribut

Optionen

Farben

Darstellung

Verhalten nach der Suche

Verwandte Artikel