DokumentationCommerceInhalt und Design

Karussell-Widget "Katalogereignisse"

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Einsteiger
  • Fortgeschrittener
  • Admin
  • Benutzende
Adobe Commerce-Funktion {width="20"} Ausschließliche Funktion nur in Adobe Commerce (Mehr erfahren)

Ein Karussell-Widget für Katalogereignisse zeigt einen Regler bevorstehender Ereignisse mit einem Countdown-Ticker für jedes Ereignis an. Sie können die Seiten und den Bereich des Seitenlayouts auswählen, in dem das Karussell angezeigt werden soll, und die Breite und Anzahl der gleichzeitig angezeigten Ereignisse steuern. Das Ergebnis hängt von Ihrem Design ab, wo es zur Anzeige auf der Seite positioniert ist, sowie von den von Ihnen gewählten Optionen.

Ereignis-Karussell in der linken Seitenleiste

Schritt 1: Aktivieren des Widgets "Katalog-Karussell"

Bevor Sie beginnen, befolgen Sie die Anweisungen , um das Widget Catalog Event so zu konfigurieren, dass es für die Storefront aktiviert ist.

Katalogereigniskonfiguration

Schritt 2: Widget erstellen

  1. Wechseln Sie in der Seitenleiste Admin zu Content > Elements>Widgets.

  2. Klicken Sie in der oberen rechten Ecke auf Add Widget.

  3. Gehen Sie im Abschnitt Settings ​wie folgt vor:

    • Setzen Sie Type auf Catalog Events Carousel.

    • Wählen Sie die Design Theme aus, die vom Store verwendet wird.

  4. Klicken Sie auf Continue.

    Widget-Einstellungen für ein Ereignis-Karussell {width="500" modal="regular"}

  5. Gehen Sie im Abschnitt Storefront Properties ​wie folgt vor:

    • Geben Sie für Widget Title einen beschreibenden Titel für das Widget ein.

      Dieser Titel ist nur in Admin sichtbar.

    • Wählen Sie für "Assign to Store Views"die Store-Ansichten aus, in denen das Widget sichtbar sein soll.

      Sie können eine bestimmte Store-Ansicht oder All Store Views auswählen. Um mehrere Ansichten auszuwählen, halten Sie die Strg-Taste (PC) oder die Befehlstaste (Mac) gedrückt und klicken Sie auf jede Option.

    • (Optional) Geben Sie für "Sort Order"eine Zahl ein, um die Reihenfolge zu bestimmen, in der dieses Element mit anderen im selben Teil der Seite angezeigt wird. (0 = first, 1 = second, 3 = third usw.)

      Eigenschaften der Widget-Storefront {width="600" modal="regular"}

3. Schritt: Speicherort auswählen

  1. Klicken Sie im Abschnitt Layout-Aktualisierungen auf Add Layout Update.

  2. Setzen Sie Display On auf Specified Page.

  3. Setzen Sie Page auf CMS Home Page.

  4. Legen Sie Container für eine der folgenden Optionen fest:

    • Main Content Area
    • Sidebar Additional
    • Sidebar Main
    note note
    NOTE
    Die Ergebnisse variieren je nach Thema und Seitenlayout. Sie müssen auch die Catalog Events Carousel Default Template ​in der Kategoriekonfiguration angeben.

  5. Wenn Sie möchten, dass das Ereigniskarussell an einer anderen Stelle in der Storefront angezeigt wird, klicken Sie auf Add Layout Update und wiederholen Sie diese Schritte für diesen Ort.

    Layout-Updates {width="600" modal="regular"}

  6. Klicken Sie auf Save and Continue Edit.

    Derzeit können Sie die Meldung ignorieren, dass der Cache aktualisiert werden soll.

Schritt 4: Optionen konfigurieren

  1. Wählen Sie im linken Bereich Widget Options aus.

  2. Geben Sie für "Frame Size"die Anzahl der Ereignisse, die Sie auflisten möchten, gleichzeitig im Regler ein.

    Um jeweils nur ein Ereignis anzuzeigen, geben Sie 1 ein.

  3. Geben Sie für "Scroll"die Anzahl der Ereignislisten ein, die pro Klick gescrollt werden sollen.

    Um zum nächsten Ereignis zu wechseln, geben Sie 1 ein.

  4. Geben Sie für eine benutzerdefinierte Breite die Anzahl der Pixel für Block Custom Width ein.

    Auf der folgenden Beispielseite wird die benutzerdefinierte Breite auf 250 Pixel festgelegt.

    Widget-Optionen für benutzerdefinierte Breite {width="400" modal="regular"}

  5. Klicken Sie nach Abschluss des Vorgangs auf Save.

  6. Wenn Sie aufgefordert werden, den Cache zu aktualisieren, klicken Sie auf den Link in der Meldung oben auf der Seite und befolgen Sie die Anweisungen.

recommendation-more-help
2b0136b4-ef75-405f-9734-60d741f198de