Funnels im Liquid-Theme unterstützen

Inhalte und Logik eines Funnels pflegen Kunden im Funnel-Modul – das Theme bestimmt nur das Aussehen. Der Builder rendert alle Schritte als HTML in die statische Seite, eine Runtime schaltet sie im Browser um. Ein eigenes Script brauchst du nicht.

Minimal-Section

<section class="funnel funnel--{{ section.settings.layout | default: 'inline' }}">
  {% funnel section.settings.funnel class: 'funnel__root' %}
    {% render 'funnel-progress', funnel: funnel, settings: section.settings %}
    {% for step in funnel.steps %}
      {% render 'funnel-step', step: step, funnel: funnel, settings: section.settings %}
    {% endfor %}
  {% endfunnel %}
</section>

{% schema %}
{
  "name": "Funnel",
  "enabled_on": { "groups": ["body"] },
  "settings": [
    { "type": "funnel", "id": "funnel", "label": "Funnel" },
    { "type": "select", "id": "layout", "label": "Darstellung", "default": "inline",
      "options": [ { "value": "inline", "label": "Karte" }, { "value": "fullscreen", "label": "Vollbild" } ] },
    { "type": "select", "id": "progress", "label": "Fortschritt", "default": "bar",
      "options": [ { "value": "bar", "label": "Balken" }, { "value": "steps", "label": "Prozent" }, { "value": "none", "label": "Aus" } ] }
  ],
  "presets": [ { "name": "Funnel" } ]
}
{% endschema %}

Der Wert des funnel-Settings ist die Funnel-ID. Nur über Settings dieses Typs findet der Builder die Funnels einer Seite – eine fest eingetragene ID wird nicht geladen.
Ist kein, ein archivierter oder unveröffentlichter Funnel gewählt, gibt das Tag live nichts aus, im Editor einen Hinweis.
Funnel-Sections gehören in den Body (enabled_on).
HTML-IDs immer aus funnel.uid bilden – derselbe Funnel darf mehrfach auf einer Seite stehen.

Snippets überschreiben

Fehlt ein Snippet im Theme, nutzt der Builder die Plattform-Fassung samt Basis-CSS. Jedes Snippet ist einzeln überschreibbar:

Snippet	Zweck
`funnel-step`	Schritt mit Überschrift, Typ-Snippet, Datenschutzhinweis, Fehler, Navigation
`funnel-question-choice`	Einfach-, Mehrfach-, Bildauswahl, Ja/Nein
`funnel-question-input`	Text, Zahl, Schieberegler, Bewertung, Datum
`funnel-question-contact`	Kontaktfelder
`funnel-content`, `funnel-end`	Inhaltsschritt, Abschluss
`funnel-nav`, `funnel-progress`	Zurück/Weiter, Fortschritt

Mit eigenem funnel-step entfällt das Plattform-CSS – dann stylst du alles selbst. Das Basis-CSS nutzt --color-primary, --color-primary-text, --color-text, --color-background und --border-radius.

Runtime-Vertrag

Attribut	Wo
`data-funnel-step="{{ step.id }}"`	Schritt-Element; Start mit `.is-active`, alle anderen `hidden`
`data-funnel-headline`	Überschrift, bekommt beim Wechsel den Fokus
`data-funnel-option="{{ option.id }}"`	Button je Option
`data-funnel-input="{{ step.key }}"`	Eingabefeld; Kontakt: `{{ field.name }}`
`data-funnel-next` / `data-funnel-back`	Navigation
`data-funnel-error`	Fehlertext des Schritts bzw. Felds
`data-funnel-progress`	Fortschritt über `--funnel-progress` (0–1)
`data-funnel-consent`	Einwilligungs-Checkbox

Die Runtime löst Events aus, die du z. B. für Tracking nutzen kannst – ohne personenbezogene Werte im detail:

document.addEventListener('funnel:complete', (e) => console.log(e.detail.outcome))

Vollbild-Funnels

// templates/page.funnel.json
{
  "name": "Funnel (ohne Header und Footer)",
  "layout": "funnel",
  "sections": { "funnel-1": { "type": "funnel", "label": "Funnel", "settings": { "layout": "fullscreen" } } },
  "order": ["funnel-1"]
}

Das Layout layout/funnel.liquid verzichtet auf content_for_header/content_for_footer, muss aber {% consent_banner %}, {% consent_link %} und Links auf Impressum und Datenschutz enthalten. „Seite mit Funnel anlegen“ im Funnel-Editor nutzt dieses Template automatisch.