Product Grid

Zeigen Sie einige Ihrer Produkte in einem Grid an.

Item-ID: 07-002

Beispielansicht   Anleitung   Verhalten


Beispielansicht


Anleitung

Wichtige Vorab-Informationen:

  • Die Funktionsweise der Produktübersichten ähnelt der Logik der Blog-Administration oder der Reiseseiten. Das bedeutet konkret: Bevor Sie ein Product Grid anlegen können, benötigen Sie die einzelnen Produkt-Unterseiten, aus denen das Widget Product Grid seine Auswahl speisen kann. Wie man Produktseiten anlegt, haben wir im allgemeinen Tutorial zu Seiten/Navigation anlegen für Sie aufbereitet.
  • Was Sie in jedem Fall analog der Blog-Administration beachten müssen: Bearbeiten Sie die Seiteneigentschaften Ressourcen: Dieser Reiter ist für Produkt-Teaserkarten relevant, da hier ein Teaserbild für die Darstellung in den Image-Karten separat ausgewählt werden muss (Buttons Neue Relation erstellen/Dateien auswählen und hochladen).

Product Grid anlegen

  • Klicken Sie auf den Button Inhalt, um eine automatisierte Produktübersicht anzulegen.
  • Im Reiter Widgets wählen Sie Productgrid. 

Produktauswahl I

  • Im Dropdown-Menü Product Selection wählen Sie aus einer der drei Optionen manual, subpages of selected pages oder by category.
  • By category: Hier wählen Sie ggf. die im Vorfeld vergebenen und zutreffenden Produkt-Kategorien, die der Zuordnung und Filterung automatisierter Produkt-Elemente dient. 
  • Oben genannte Kategorien müssen im Vorfeld angelegt werden. Das Tutorial für Reise-Kategorien gilt hierbei exemplarisch als Richtlinie für das Anlegen aller Kategorien in TYPO3.

Produktauswahl II

  • Nach dem Klick auf Seite öffnet sich das Fenster der Datensatzauswahl.
  • Manual: Wählen Sie einzelne Produktseiten mit einzelnen Klicks auf die gewünschte Seite aus. In unserem Beispiel steht eine Auswahl von »Produkt 1« bis »Produkt 8« zur Verfügung.
  • Subpages of selected pages: Diese Option wählen Sie, wenn Sie Ihre Produkte unterhalb einer Landing Page oder z.B. eines Ordners (siehe Screenshot: Ordner Produkte) sortiert haben. Klicken Sie einzig auf diese übergeordnete Seite und die darunter befindlichen Produktseiten ordnen sich automatisch ein.

Verhalten

Das Product Grid verhält sich analog zu Image Cards, wenn bis zu vier Produkte und damit bis zu vier Schaltflächen nebeneinander im Frontend ausgespielt werden: jeweils einem Bild mit einem automatischen Seitenverhältnis von 16:9 und einer Beschriftung. Der dazugehörige Link macht das gesamte Element jeweils zu einer Schaltfläche. 

Besonderheit: Wenn Sie mehr als vier Produktseiten darstellen/verlinken, reihen sich alle weiteren Produkte in neuen Viererreihen ein. Bei einer Darstellung von zum Beispiel sieben Produkten, werden eine Viererreihe und darunter eine Dreierreihe ausgespielt.

Responsive: Auf kleiner werdenden Endgeräten werden die Viererreihen in zwei Zeilen dargestellt. Auf kleinen Darstellungsflächen werden alle Schaltflächen untereinander angezeigt.

Diese Webseite verwendet Cookies

Wir verwenden Cookies, um Inhalte zu personalisieren und die Zugriffe auf unsere Website zu analysieren. Weitere Informationen finden Sie in unserer Datenschutzerklärung.
OK