> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cloud.anex.is/llms.txt
> Use this file to discover all available pages before exploring further.

# Portal-Suche-Widget Seitenreferenz

> Das Portal-Suche-Widget (search-widget) für die SiMedia Tourismusportale: Einbindung, alle Optionen, Suchvorschläge für Unterkünfte, Orte, Regionen und Sehenswürdigkeiten und die Weiterleitung zur Ergebnisliste.

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`.

```html theme={null}
<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). |

### 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.

## Verwandte Artikel

* [Angebotsliste-Widget Seitenreferenz](https://docs.cloud.anex.is/de/admin/portals/offerlist-widget.md) -- Angebote der Betriebe auf den Portalen
* [Portale Seitenreferenz](https://docs.cloud.anex.is/de/admin/portals/portals.md) -- Portale anlegen und bearbeiten


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.