Angebotsliste

Die veröffentlichten Angebote einer Saison, wie Ihre fepli-Website sie zeigt: ihre Angebotskarten und ihr Filter für Suche, Kategorie, Zeitraum, Alter und Kosten.

Ausprobieren

Wählen Sie Optionen. Vorschau und Snippet aktualisieren sich.

<script type="module" src="https://example.fepli.eu/embed.js" data-key="pk_9f3a2c71e4b05d18a6c2e7f0"></script>

<fepli-offers edition="herbstferien-2026"></fepli-offers>

Attribute

• Name

  edition

  Typ

  string

  Pflicht

  erforderlich

  Beschreibung

  Der Alias der Saison, zum Beispiel herbstferien-2026. Mehrere Aliasse, durch Kommas getrennt, ergeben eine Liste: edition="herbstferien-2026,winterferien-2026".

• Name

  category

  Typ

  string

  Beschreibung

  Öffnet mit dieser Kategorie (Alias) gewählt; im Filter lassen sich weitere hinzunehmen.

• Name

  age

  Typ

  number

  Beschreibung

  Nur Angebote, die für dieses Alter geeignet sind; im Filter zu sehen und dort zu entfernen.

• Name

  layout

  Typ

  "list" | "grid"

  Standard:

  list

  Beschreibung

  Die Angebotskarten der Website untereinander, das Bild daneben, oder in Kacheln.

• Name

  filters

  Typ

  boolean

  Standard:

  true

  Beschreibung

  Zeigt den Filter der Website über den Angeboten: Suche, Kategorien, Zeitraum, Alter und Kosten.

• Name

  lang

  Typ

  "de" | "en"

  Beschreibung

  Sprache des Bausteins. Standard ist das Attribut lang Ihrer Seite.

Ein Angebot öffnen

Wer ein Angebot auswählt, öffnet es in einem Dialog auf Ihrer Seite, mit Terminen, Beitrag, Plätzen und dem Knopf zum Anmelden: das Angebot mit allen Angaben, direkt an Ort und Stelle. Der Knopf führt auf die Seite des Angebots in fepli.

Um das Angebot stattdessen selbst zu zeigen, auf einer eigenen Seite oder in einem eigenen Dialog, hören Sie auf fepli-offer-select und brechen Sie das Ereignis ab. Das Ereignis steigt aus dem Element auf und trägt die uuid des Angebots und die url seiner Seite in fepli.

document.addEventListener('fepli-offer-select', (event) => {
  event.preventDefault()
  location.href = `/ferienprogramm/angebot?id=${event.detail.uuid}`
})

Eine Auswahl mit gedrückter Zusatztaste oder mit der mittleren Maustaste folgt dem Link nach fepli wie jeder Link.

Gestaltung

Setzen Sie diese CSS-Variablen am Element oder an einem übergeordneten Element. Alles andere richtet sich nach Ihrer Seite.

• Name

  --fepli-accent

  Typ

  color

  Standard:

  oklch(0.60 0.22 29)

  Beschreibung

  Ihre Markenfarbe, wie eingegeben: Links, Termine und der Knopf zum Anmelden. Wie im fepli-Admin wird der Knopf bei einer roten Markenfarbe dunkel, damit er nicht wie eine Warnung wirkt, und bei einer zu hellen so weit abgedunkelt, dass weiße Schrift sich liest.

• Name

  --fepli-radius

  Typ

  length

  Standard:

  8px

  Beschreibung

  Ecken von Schaltflächen, Feldern und Filtern; Karten und der Dialog nehmen das Anderthalbfache, Abzeichen drei Viertel. 0 macht alles eckig.

• Name

  --fepli-shadow

  Typ

  0 | 1

  Standard:

  1

  Beschreibung

  Schatten: 1 die leichten der fepli-Website, 0 keine; Dialoge behalten etwas.

• Name

  --fepli-font

  Typ

  font-family

  Standard:

  inherit

  Beschreibung

  Schrift des Bausteins. Standard ist die Schrift Ihrer Seite.

• Name

  --fepli-text

  Typ

  color

  Standard:

  Mist 900

  Beschreibung

  Farbe der Schrift auf Karten und im Dialog.

• Name

  --fepli-surface

  Typ

  color

  Standard:

  white

  Beschreibung

  Hintergrund der Karten und des Dialogs, in dem sich ein Angebot öffnet; standardmäßig weiß. Setzen Sie ihn zusammen mit --fepli-text, wenn Ihre Seite dunkel ist.

• Name

  color-scheme

  Typ

  light | dark

  Standard:

  inherit

  Beschreibung

  Standard-CSS. Auf einer dunklen Seite setzen Sie color-scheme: dark; Grautöne und Statusfarben drehen sich wie im dunklen Admin.