PrestaShop Produktseiten-Tabs — Dokumentation
Das Produktseiten-Tab-Modul installieren, konfigurieren und nutzen: Geltungsbereiche, HTML- oder CMS-Inhalt, Drag & Drop und mobiles Akkordeon.
Mit diesem Modul erstellen Sie benutzerdefinierte Tabs auf der Produktseite Ihres PrestaShop-8- oder -9-Shops. Jeder Tab kann alle Produkte, bestimmte Kategorien oder eine genaue Produktauswahl ansprechen, Rich-HTML-Inhalt oder eine CMS-Seite anzeigen und sich auf Mobilgeräten in ein Akkordeon verwandeln. Diese Dokumentation behandelt Installation, Konfiguration und die tägliche Nutzung.
Installation
Das Modul wird wie jedes PrestaShop-Modul installiert, ohne Abhängigkeit oder besondere Serverkonfiguration.
- Öffnen Sie im Back-Office Module > Modul-Manager und klicken Sie auf Modul hochladen.
- Wählen Sie das ZIP-Archiv des Moduls und lassen Sie die Installation abschließen.
- Nach der Installation erscheint ein neuer Eintrag Katalog > DF Tabs Builder im Back-Office-Menü.
Das Modul erstellt fünf dedizierte Tabellen für seine Daten. Sie werden bei der Deinstallation automatisch entfernt und hinterlassen keine Rückstände in der Datenbank.
Allgemeine Einstellungen
Auf der Modulseite öffnet die Schaltfläche Konfigurieren die allgemeinen Einstellungen, die unabhängig von den Tabs selbst sind.
Mobiles Akkordeon
Diese Option aktiviert die automatische Umwandlung der Tabs in ein Akkordeon auf kleinen Bildschirmen. Ist sie aktiviert, wird die Tab-Reihe unterhalb einer bestimmten Bildschirmbreite zu einem Stapel aufklappbarer Kopfzeilen mit Einzelöffnung. Oberhalb dieser Breite werden die nativen Tabs Ihres Themes wie gewohnt angezeigt.
Breakpoint
Der Breakpoint definiert die Bildschirmbreite (in Pixeln), unterhalb der der Akkordeon-Modus aktiviert wird. Der Standardwert ist 768 Pixel, was dem Tablet/Mobil-Umschaltpunkt der meisten Themes entspricht. Sie können einen Wert zwischen 320 und 1920 Pixeln eingeben.
Einen Tab erstellen
Öffnen Sie Katalog > DF Tabs Builder und klicken Sie auf Neuen Tab hinzufügen. Das Bearbeitungsformular fasst alle Einstellungen eines Tabs zusammen.
Tab-Titel
Der Titel wird Sprache für Sprache eingegeben: Er ist die Beschriftung, die auf dem Tab, auf der Produktseite angezeigt wird. Füllen Sie ihn für jede Sprache Ihres Shops aus.
Status
Mit dem Schalter Aktiv können Sie den Tab aktivieren oder deaktivieren, ohne ihn zu löschen. Ein inaktiver Tab erscheint auf keiner Produktseite.
Die richtigen Produkte ansprechen
Das Feld Anzeigen auf bestimmt den Geltungsbereich des Tabs. Drei Optionen stehen zur Verfügung.
Alle Produkte
Der Tab ist global: Er erscheint auf jeder Produktseite des Shops. Das ist die ideale Wahl für einen Vertrauens-, Versand- oder gemeinsamen FAQ-Tab.
Bestimmte Kategorien
Der Tab wird nur bei Produkten aus den ausgewählten Kategorien angezeigt. Es erscheint dann ein Kategoriebaum mit Kontrollkästchen und Suche: Haken Sie eine oder mehrere Kategorien an. Ein Produkt, das einer der angehakten Kategorien zugeordnet ist, sieht den Tab.
Bestimmte Produkte
Der Tab spricht nur eine genaue Produktauswahl an. Es erscheint ein Suchfeld: Geben Sie mindestens zwei Zeichen ein, um ein Produkt nach Name, Referenz oder ID zu suchen. Klicken Sie auf ein Ergebnis, um es hinzuzufügen; es wird dann als Chip angezeigt. Klicken Sie auf das Kreuz eines Chips, um das Produkt aus der Auswahl zu entfernen.
Sie können einen Pflege-Tab über eine ganze Abteilung teilen, indem Sie ihn auf eine Kategorie ausrichten, und gleichzeitig einen technischen Tab über die Produktausrichtung für einige wenige genaue Referenzen reservieren.
Den Tab-Inhalt wählen
Das Feld Inhaltstyp bietet zwei Quellen.
Benutzerdefiniertes HTML
Sie verfassen den Inhalt direkt im integrierten Rich-Editor, Sprache für Sprache. Sie können formatierten Text, Listen, Bilder, Tabellen oder eingebettete Videos einfügen. Das ist der empfohlene Modus für tab-spezifischen Inhalt.
CMS-Seite
Sie verknüpfen eine bestehende CMS-Seite Ihres Shops. Ihr Inhalt wird dann im Tab in der Sprache des Besuchers angezeigt. Das ist praktisch, um eine bereits verfasste Rücksendungsrichtlinie oder Pflege-Charta wiederzuverwenden, ohne sie zu duplizieren: Jede Aktualisierung der CMS-Seite spiegelt sich automatisch im Tab wider.
Ein Tab, dessen aufgelöster Inhalt leer ist, wird auf der Produktseite nicht angezeigt. Das verhindert, dass ein leerer Tab erscheint, etwa wenn eine CMS-Seite deaktiviert ist.
Die Tabs neu ordnen
In der Tab-Liste können Sie die Tabs über eine Positionsspalte per Drag & Drop neu ordnen: Greifen Sie den Griff einer Zeile und verschieben Sie sie nach oben oder unten. Die hier festgelegte Reihenfolge ist genau die Reihenfolge, in der die Tabs auf der Produktseite von links nach rechts erscheinen.
Verhalten auf Mobilgeräten
Wenn das mobile Akkordeon in den allgemeinen Einstellungen aktiviert ist, verwandeln sich die Tabs unterhalb des definierten Breakpoints automatisch in ein Akkordeon. Jeder Tab wird zu einer anklickbaren Kopfzeile mit Chevron; das Öffnen einer Kopfzeile schließt die vorherige (Einzelöffnung). Oberhalb des Breakpoints werden die nativen Tabs Ihres Themes identisch wiederhergestellt: Das Verhalten ist zerstörungsfrei.
Das Akkordeon stützt sich auf das Standard-Tab-Markup des Themes. Bei einem Theme mit sehr atypischem Markup bleiben die Tabs, falls das Akkordeon nicht aufgebaut werden kann, wie gewohnt angezeigt: Es wird keine Regression eingeführt.
Deinstallation
Die Deinstallation über den Modul-Manager entfernt das Modul, seine Einstellungen und alle erstellten Tabs sowie die fünf zugehörigen Tabellen. Eine Bestätigung wird abgefragt, da dieser Vorgang alle Tabs dauerhaft löscht.
Fehlerbehebung
Meine Tabs erscheinen nicht auf der Produktseite
Prüfen Sie, ob der Tab aktiv ist, ob sein Geltungsbereich tatsächlich zum angesehenen Produkt passt (angesprochene Kategorie oder Produkt) und ob sein Inhalt nicht leer ist. Stellen Sie bei einem CMS-Seiten-Tab sicher, dass die verknüpfte CMS-Seite in der Sprache des Besuchers aktiv ist.
Das Akkordeon wird auf Mobilgeräten nicht ausgelöst
Stellen Sie sicher, dass die Option für das mobile Akkordeon in den allgemeinen Einstellungen aktiviert ist und dass Ihre Bildschirmbreite tatsächlich unter dem konfigurierten Breakpoint liegt. Leeren Sie nach jeder Einstellungsänderung den PrestaShop-Cache.
Ein Tab wird an der falschen Stelle angezeigt
Die Reihenfolge der Tabs wird durch die Positionsspalte in der Liste bestimmt. Ordnen Sie die Tabs per Drag & Drop neu und laden Sie dann die Produktseite neu, um es zu prüfen.