Built on WIX Headless

Docs Widgets Dynamic-Page-Widget

Dynamic-Page-Widget

Zeigen Sie ein CMS-Collection-Item pro URL mit Layouts und SEO pro Item auf Wix Harmony.

Das Dynamic Page-Widget zeigt ein Collection-Item pro URL (zum Beispiel /fruits/apple). Die URL entscheidet, welches Item das Layout füllt.

Legen Sie die Seite als native Wix Dynamic Page an. Das Dynamic-Page-Widget und Links von Repeater, Table, Slideshow, Media Gallery und Calendar öffnen diese URLs.

Create the page

  1. Öffnen Sie die Collection.
  2. Wählen Sie More actions → Add collection page.
  3. Wix fügt eine native Dynamic Page hinzu. Notieren Sie den Pfad — den Teil vor dem Item-Slug. Eine Fruits-Collection kann fruits für URLs wie /fruits/apple verwenden.

Wix speichert den Slug jedes Items im Feld Item slug.

Schritt für Schritt: So richten Sie Dynamic Pages ein.

Mit einer nativen Wix-Dynamic-Page verbinden

Am Dynamic-Page-Widget und an jedem Repeater, Table, Slideshow, Media Gallery oder Calendar, der diese Item-URLs öffnen soll:

  1. Verbinden Sie dieselbe Collection.
  2. Setzen Sie Page path auf den nativen Seitenpfad (fruits im Beispiel). Ohne führenden Schrägstrich.
  3. Setzen Sie Page link field auf Item slug — das Wix-Slug-Feld. Eine Collection, die für eine ältere /item-Seite eingerichtet wurde, kann zusätzlich ein Feld Dynamic page slug haben; wählen Sie es auf einer neuen nativen Seite nicht.

Page path auf den nativen Seitenpfad und Page link field auf Item slug

Verwenden Sie denselben Page path und dasselbe Page link field am Dynamic-Page-Widget und an jedem Widget, das auf diese Seite verlinkt. Platzieren Sie das Dynamic-Page-Widget auf der nativen Collection Page, wenn diese Seite das Item anzeigen soll.

Layouts

Wählen Sie einen Layout-Mode:

  • Preset — Hero-, Split-, Stack- oder Minimal-Anordnungen
  • Custom — Felder auf einem Raster ziehen (Arrange fields), wie bei benutzerdefinierten Repeater-Karten
  • HTML / CSS — vollständig eigenes Markup und Styles

Felder

Verbinden Sie beliebige anzeigbare Collection-Felder, einschließlich Bilder, Videos, Galerien, Links, References, Address und Color.

Date-&-time-Felder

Unter Formatting aktivieren Sie Show timezone, um die lokale Zeitzonenabkürzung des Besuchers anzuhängen (zum Beispiel EST oder GMT+2).

Payments

Mit aktivierten Katalogzahlungen auf der Collection (Pro) schalten Sie Show payment actions für Add to cart / Buy now auf der Item-Seite ein.

Address-Felder

Unter Formatting setzen Sie Display as:

  • Text — formatierte Adresszeile
  • Map — interaktiver OpenStreetMap-Pin (Koordinaten am Wert erforderlich)
  • Text and map — beides

Sie können auch die Kartenhöhe festlegen. Wenn der Map-Modus gewählt ist, aber Koordinaten fehlen, fällt das Widget auf Text zurück, sofern verfügbar.

Video-Felder

Für Video-Felder (und Videos in Galerien) setzen Sie Video playback auf Öffnen im Modal, Inline-Wiedergabe per Klick oder stummes Autoplay.

Color-Felder

Unter Formatting setzen Sie Display as auf Swatch, Hex oder Swatch and hex und passen Sie optional die Swatch-Größe an.

Reference-Felder

Für Reference- / Multi-reference-Felder wählen Sie ein Display field aus der verknüpften Collection für das Label auf der Seite.

Data refresh

Unter Data refresh schalten Sie Show refresh button und/oder Auto-refresh ein, damit Besucher das aktuelle Item neu laden können, ohne die Seite zu verlassen. Auto-refresh pausiert, wenn der Tab ausgeblendet ist. Ein Form auf derselben Seite mit Update displays on this page kann dieses Widget nach dem Absenden ebenfalls neu laden, wenn dieselbe Collection genutzt wird.

SEO pro Item

Ordnen Sie Titel, Beschreibung und Share-Image aus Collection-Feldern zu, damit jedes Item eine eigene Such- und Social-Vorschau haben kann.

Einrichtung

Widgets, einschließlich Dynamic Page, fügen Sie über Add → Elements → Installed Apps hinzu — siehe Widgets hinzufügen. Platzieren Sie Dynamic Page auf der nativen Collection-Seite.

Nutzen Sie AI setup im Panel für einen Start in Alltagssprache und verfeinern Sie danach in Manual. Details: AI setup.

  1. Erstellen Sie eine native Dynamic Page für die Collection (More actions → Add collection page).
  2. Fügen Sie auf dieser Seite Dynamic Page hinzu und öffnen Sie Settings.
  3. Verbinden Sie die Collection und wählen Sie Felder / Layout.
  4. Setzen Sie Page path und Page link field wie unter Mit einer nativen Wix-Dynamic-Page verbinden.
  5. Aktivieren Sie optional Data refresh.
  6. SEO-Felder zuordnen (empfohlen).

Eine bereits vorhandene /item-Seite

  1. Setzen Sie Page path auf das Präfix dieser Seite — item für /item/jane-doe, oder item-1 / item-2 für eine Seite aus einer früheren Version.
  2. Setzen Sie Page link field auf Dynamic page slug.
  3. Wählen Sie optional ein Preview item. Live-Seiten verwenden immer den URL-Slug.

Make dynamic wurde entfernt, daher erstellt oder bearbeitet die App das Feld Dynamic page slug nicht mehr. Das Feld bleibt in der Collection, und Wix füllt es für neue Items weiterhin aus. Um zu ändern, wie Slugs gebildet werden, stellen Sie die Collection auf eine native Collection-Seite um.

Weitere Collection

Jede Collection erhält eine eigene native Dynamic Page: More actions → Add collection page, Dynamic Page hinzufügen und Page path auf den Pfad dieser Seite setzen.

Von Displays verlinken

Auf Repeater, Table, Slideshow, Media Gallery oder Calendar aktivieren Sie Link to item page (dieselbe Collection und derselbe Page path wie das Dynamic Page), damit Klicks die Item-URL auf der Vorlage öffnen.