> ## 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. # Angebotsliste-Widget Seitenreferenz > Das Angebotsliste-Widget (offerlist-widget) für die SiMedia Tourismusportale: Einbindung, alle Optionen, Darstellung der Angebotskarten, Datumsfilter und Anfrage-Overlay mit eAssistant-Anfrageformular. Das Angebotsliste-Widget zeigt auf einer Seite eines SiMedia Tourismusportals die Angebote (Pauschalen) der Betriebe als Karten. Besucher können nach Zeitraum filtern, weitere Angebote nachladen und ein Angebot entweder direkt beim Betrieb öffnen oder in einem Overlay ansehen und dort anfragen. Die Angebote stammen aus der Seite [Angebote](https://docs.cloud.anex.is/de/eassistant/portals/offers.md), die die Betriebe im Mandant-Dashboard pflegen. 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 ``. Die Optionen stehen im globalen Objekt `window.GLOBAL_SI_PORTAL_WIDGETS` unter derselben ID wie im Attribut `portal-widget-id`. ```html theme={null} ``` Die Testversion liegt unter `https://widgets.cloud.anex.is/portals/TESTS/offerlist-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 Die Optionen schreibst du in Kleinbuchstaben mit Unterstrich, außer `showFilter`. | Option | Gültige Werte | Hinweise | | - | - | - | | `api_key` | `::` | Pflicht. Ohne gültigen Schlüssel werden keine Angebote geladen. Die Zahl nach `::` legt die Sprache fest, siehe [Sprachen](#sprachen). | | `type` | `click`, `request` | Standard: `click`. Bei `click` öffnet die Karte die Angebotsseite des Betriebs in einem neuen Tab. Bei `request` öffnet die Karte das Anfrage-Overlay. | | `showFilter` | `true`, `false` | Standard: `false`. Blendet den Datumsfilter ein. | | `static` | `true`, `false` | Standard: `false`. Bei `true` sind Filter, **Weitere laden** und die Trefferzahl ausgeblendet. Es erscheint nur die erste Seite. | | `page_size` | Ganzzahl | Standard: 3. Anzahl Angebote pro Seite. | | `sorting` | Objekt `{ type: }` | Standard: `{ type: 1 }`. Wird unverändert an das Portalsystem übergeben. | | `detail_paths` | Objekt `{ : "" }` | Pfad zur Detailseite der Unterkunft je Sprache, mit den Platzhaltern `[id]` und `[rewrite_key]`. Ohne Eintrag fehlt im Overlay der Link **Details der Unterkunft**. | | `style_variables` | Objekt mit CSS-Variablen | `--ctaButton-bg` (Standard `#2c2b30`) und `--ctaButton-color` (Standard `#fff`) für die Schaltflächen. | ## Sprachen Das Widget zeigt seine Texte auf Deutsch, Italienisch oder Englisch. Die Sprache ergibt sich aus der Portalsprache in `api_key`: 1 = Deutsch, 2 = Italienisch, 3 = Englisch. Österreich (9) und Schweiz (10) erscheinen auf Deutsch, alle anderen Portalsprachen auf Englisch. ## Darstellung ### Filter Nur mit `showFilter: true`. | Element | Hinweise | | - | - | | **Anreise und Abreise** | Kalender für den Zeitraum, ab heute. Sobald An- und Abreise gewählt sind, lädt die Liste neu. | | **Suchen** | Ohne eigene Funktion. Die Liste lädt bereits nach der Datumsauswahl. | | **Filter löschen** | Erscheint nach dem Filtern und setzt den Zeitraum zurück. | Über der Liste steht die Trefferzahl, z. B. „Es wurden 12 Angebote gefunden“, oder „Es wurden keine Angebote gefunden“. ### Angebotskarte | Bereich | Inhalt | | - | - | | **Bild** | Erstes Bild des Angebots. | | **Angebot** | Titel und Vorschautext (höchstens drei Zeilen). | | **Betrieb** | Klassifizierung (Sterne, Sonnen oder Blumen, ggf. „Superior“), Name, CIN-Codes und Ort. | | **Zeitraum** | Erster Zeitraum des Angebots, bei mehreren zusätzlich z. B. „(2 alternative Zeiträume)“. | | **Preis** | Z. B. „7 Nächte ab 840 € pro Person“. | | **Schaltfläche** | **Zum Angebot** bei `type: click` (öffnet die Angebotsseite des Betriebs in einem neuen Tab), **Alle Details** bei `type: request` (öffnet das Overlay). | Unter der Liste lädt **Weitere laden** die nächste Seite nach, solange es weitere Angebote gibt. ### Anfrage-Overlay Nur bei `type: request`. Das Overlay zeigt untereinander: 1. Titel, Bild und Vorschautext des Angebots. 2. **Zeiträume:** alle Zeiträume mit Nächten und Preis ab. 3. **Anfragen:** springt zum Anfrageformular weiter unten. 4. **Inklusivleistungen:** die im Angebot enthaltenen Leistungen. 5. **Beschreibung:** der Detailtext des Angebots. 6. Bilder, Klassifizierung, Name und Ort des Betriebs und der Link **Details der Unterkunft** (neuer Tab, nur mit `detail_paths`). 7. Das Anfrageformular des Betriebs aus dem eAssistant. Im Kommentarfeld stehen bereits Titel, Vorschautext und Zeiträume des Angebots. Das **X** oben rechts oder ein Klick neben das Overlay schließt es. ## Abhängigkeiten * Das Widget zeigt nur Angebote, die die Betriebe auf der Seite [Angebote](https://docs.cloud.anex.is/de/eassistant/portals/offers.md) veröffentlicht haben. * Antwortet das Portalsystem mit einem Fehler, zeigt das Widget „Es wurden keine Angebote gefunden“. Eine eigene Fehlermeldung gibt es nicht. * Geladene Angebote und der gewählte Zeitraum werden zehn Minuten im Browser des Besuchers zwischengespeichert. Änderungen an Angeboten erscheinen deshalb mit bis zu zehn Minuten Verzögerung. ## Verwandte Artikel * [Portal-Suche-Widget Seitenreferenz](https://docs.cloud.anex.is/de/admin/portals/search-widget.md) -- Suchfeld mit Vorschlägen für die Portale * [Angebote Seitenreferenz](https://docs.cloud.anex.is/de/eassistant/portals/offers.md) -- Angebote der Betriebe * [Ein Angebot erstellen](https://docs.cloud.anex.is/de/eassistant/portals/create-offer.md) -- Schritt-für-Schritt-Anleitung für Betriebe * [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.