Magento 2 Modul Zusätzliche Tabs auf der Produktseite (Custom Tabs)
- SKU
- M2-CUSTOM-TABS
Beschreibung / Magento 2 Modul Zusätzliche Tabs auf der Produktseite (Custom Tabs)
MAGENTO 2 · PRODUKTSEITE · ZUSÄTZLICHE INFORMATIONEN
Die richtigen Informationen im richtigen Produktbereich.
Kowal Custom Tab
Erweitern Sie Ihre Produktseite um eigene Tabs und Bereiche, deren Inhalte aus Attributen übernommen werden. Verwalten Sie Bezeichnungen, Reihenfolge und Sichtbarkeit im Magento-Admin-Panel.
Inhalte aus Attributen · Leere Bereiche ausgeblendet · Bezeichnungen je Store View
SO FUNKTIONIERT ES IN DER PRAXIS
01 · Eintrag erstellen
Sie legen Bezeichnung, Attribut, Status und Reihenfolge fest.
02 · Produkt ergänzen
Sie fügen den Inhalt im zugewiesenen Produktattribut hinzu.
03 · Produktseite zeigt die Informationen an
Das Modul zeigt den Eintrag nur dort an, wo Inhalt vorhanden ist.
Welche Vorteile bietet das Ihrem Shop?
Entdecken Sie die Funktionen, Einsatzmöglichkeiten und Einstellungen des Moduls.
Flexible Produkt-Tabs ohne Eingriff in das Template
Kowal Custom Tab ist ein Magento 2 Modul, mit dem Sie die Produktseite schnell um eigene dynamische Tabs erweitern können. Administratoren können zusätzliche Informationsbereiche erstellen, sie Produktattributen zuweisen und ihre Reihenfolge steuern, ohne Theme-Dateien bearbeiten zu müssen.
Das Modul eignet sich für Shops, die zusätzliche Produktinformationen strukturiert darstellen möchten: Größentabellen, Materialzusammensetzung, Gebrauchsanweisungen, technische Dateien, Versandinformationen, Garantieangaben, Zertifikate oder ausführliche produktabhängige Beschreibungen.
Die wichtigsten Funktionen
- Eigene Tabs auf der Produktseite hinzufügen.
- Tab-Inhalte aus einem ausgewählten Produktattribut übernehmen.
- Tabs automatisch ausblenden, wenn für das Produkt im zugewiesenen Attribut kein Inhalt hinterlegt ist.
- Anzeigereihenfolge der Tabs verwalten.
- Tabs über das Admin-Panel aktivieren und deaktivieren.
- HTML-Inhalte und CMS-Widgets unterstützen, die durch den Magento-Filter gerendert werden.
- Tab-Bezeichnungen je Store View gemäß dem Scope-Mechanismus von Magento übersetzen.
- Fallback auf den Standardwert, wenn die Bezeichnung für einen Store View nicht überschrieben wurde.
Vorteile für Ihren Shop
- Bessere Organisation der Informationen auf der Produktseite.
- Weniger Entwicklungsaufwand beim Hinzufügen wiederkehrender Produktbereiche.
- Einheitliche Darstellung zusätzlicher Daten in mehreren Produktkategorien.
- Anpassung der Tab-Bezeichnungen an verschiedene Sprachversionen des Shops.
- Geringeres Fehlerrisiko im Template, da die Konfiguration über das Admin-Panel erfolgt.
Anwendungsbeispiele
- Tab 'Technische Daten', dessen Inhalt aus einem Produktattribut übernommen wird.
- Tab 'Größentabelle', der nur bei Produkten mit hinterlegter Tabelle angezeigt wird.
- Tab 'Gebrauchsanweisung' für Produkte, die eine zusätzliche Beschreibung erfordern.
- Tab 'Material und Pflege' in einem Fashion-Shop.
- Tab 'Logistikdaten' in einem B2B-Shop.
- Separate Tab-Bezeichnungen für die polnische, englische und deutsche Shop-Version.
Für wen ist dieses Modul geeignet?
Das Modul ist für Magento 2 Shops vorgesehen, die ihre Produktseiten ohne individuelle Frontend-Anpassungen für jeden Tab um zusätzliche Informationen erweitern möchten. Es eignet sich besonders für mehrsprachige Shops, B2B-Kataloge und Implementierungen, bei denen Produktdaten in Magento-Attributen gepflegt werden.
Tabs, Bereiche und Full-Width-Layout
Ein Eintrag kann den Display Mode Tabs oder Section verwenden. Im Spaltenlayout wählen Sie einen Tab oder einen separaten Bereich. Im Product-Full-Width-Layout werden alle Einträge als Bereiche dargestellt.
Im Full-Width-Layout erstellt das Modul eine schwebende Navigation für die sichtbaren Bereiche. Im Feld Full Page Product - floating menu sections können Reihenfolge, Ziele und Menübezeichnungen festgelegt werden. Ein leeres Feld aktiviert wieder die automatische Erkennung.
Luma und optionaler Hyvä-Adapter
Das Paket enthält Kowal_CustomTabHyva. Aktivieren Sie für eine Hyvä-Storefront das Modul und die Einstellung Hyva compatibility. Das Rendering durch den Adapter ist standardmäßig deaktiviert. Eine Installation mit Luma erfordert Hyvä nicht.
In Hyvä werden sowohl Tabs als auch Section als native Karten der Produktbereiche angezeigt. Der Adapter behält Reihenfolge, Übersetzungen, das Ausblenden leerer Attribute und die Filterung von CMS-Inhalten bei. Das Full-Width-Menü funktioniert nur, wenn das jeweilige Theme dieses Layout bereitstellt.
Installation über Composer
Paket: kowal/module-customtab; Modul: Kowal_CustomTab. Nachdem Sie den Zugriff auf das Kowal-Repository konfiguriert haben, installieren Sie das Paket, aktivieren Sie das Modul, führen Sie das Magento-Upgrade aus und leeren Sie den Cache. Berücksichtigen Sie im Produktionsmodus die Kompilierung und Bereitstellung statischer Inhalte gemäß dem Prozess Ihres Shops.
Von der Konfiguration zum Ergebnis
1. Eintrag erstellen
Sie legen Bezeichnung, Attribut, Status und Reihenfolge fest.
2. Produkt ergänzen
Sie fügen den Inhalt im zugewiesenen Produktattribut hinzu.
3. Produktseite zeigt die Informationen an
Das Modul zeigt den Eintrag nur dort an, wo Inhalt vorhanden ist.
Die Größentabelle genau dort, wo sie benötigt wird
Beispiel: Sie erstellen den Tab 'Größentabelle' auf Grundlage eines Produktattributs. Kleidungsstücke mit einer hinterlegten Tabelle zeigen den Bereich an. Produkte ohne entsprechenden Inhalt zeigen keinen leeren Tab.
Die Bezeichnung können Sie separat an die polnische, englische und deutsche Shop-Version anpassen.
Strukturieren Sie zusätzliche Informationen auf der Produktseite
Möchten Sie das Modul an Ihren Shop anpassen? Fragen Sie nach der Implementierung von Kowal Custom Tab und besprechen Sie die Konfiguration oder benötigte Erweiterungen.
Weitere Informationen
| Hyva Theme | Hyva Theme Redy |
|---|---|
| Übereinstimmung mit der Vorlage | Gut, Luma / Leer, KOWAL |
Installationsanleitung für das Modul
Kowal Custom Tab - Installation und Konfiguration
Anforderungen
- Magento 2.4 oder neuer.
- Zugriff auf die Magento CLI.
- Composer ist für das Herunterladen privater Kowal-Pakete konfiguriert.
- Installiertes Basismodul
kowal/base. - Administratorrechte für das Magento-Admin-Panel.
Installation über Composer
Fügen Sie das Paket-Repository hinzu:
Die Zugangsdaten für das Composer-Repository, also die E-Mail-Adresse des Kunden und der Lizenz-Token, erhalten Sie nach dem Kauf per E-Mail. Sie sind nach der Anmeldung auf kowal.store auch im Kundenkonto verfügbar. Ersetzen Sie TWOJ_EMAIL_KLIENTA durch die E-Mail-Adresse Ihres Kontos und TWOJ_TOKEN durch den erhaltenen Token. Führen Sie die Befehle im Magento-Hauptverzeichnis aus.
composer config repositories.kowal composer https://repo.kowal.storeKonfigurieren Sie die Zugangsdaten für das Composer-Repository von Kowal:
composer config http-basic.repo.kowal.store 'TWOJ_EMAIL_KLIENTA' 'TWOJ_TOKEN'Installieren Sie das Modul:
composer require kowal/module-customtabFühren Sie das Magento-Upgrade aus:
php bin/magento setup:upgradeFühren Sie in der Produktionsumgebung die DI-Kompilierung und Bereitstellung statischer Ressourcen gemäß dem Prozess Ihres Projekts aus:
php bin/magento setup:di:compilephp bin/magento setup:static-content:deployLeeren Sie den Cache:
php bin/magento cache:flushInstallation überprüfen
Prüfen Sie, ob das Modul aktiviert ist:
php bin/magento module:status Kowal_CustomTabWenn das Modul deaktiviert ist, aktivieren Sie es:
php bin/magento module:enable Kowal_CustomTabphp bin/magento setup:upgradephp bin/magento cache:flushModulkonfiguration
Gehen Sie im Magento-Admin-Panel zu:
Stores > Configuration > Kowal > Custom Tab
Setzen Sie die Option Enable module auf Yes. Speichern Sie anschließend die Konfiguration und leeren Sie den Cache, wenn Magento Sie dazu auffordert.
Tabs verwalten
Gehen Sie im Admin-Panel zu:
Kowal > Custom Tabs > Custom Tab
Klicken Sie auf Add new CustomTab, um einen neuen Tab zu erstellen.
Füllen Sie die folgenden Felder aus:
Name- Bezeichnung des Tabs, die im Frontend angezeigt wird.Field type- Typ der Inhaltsquelle.Attribute code- Produktattribut, aus dem der Tab-Inhalt übernommen werden soll.Status- Aktivierungsstatus des Tabs.Sort Order- Anzeigereihenfolge des Tabs.
Speichern Sie den Tab.
Tab-Bezeichnung übersetzen
Die standardmäßige Tab-Bezeichnung wird für store_id = 0 gespeichert.
So fügen Sie eine Übersetzung für einen bestimmten Store View hinzu:
- Öffnen Sie einen vorhandenen Tab zur Bearbeitung.
- Verwenden Sie den Store-View-Umschalter oben rechts im Formular.
- Wählen Sie den Store View aus, für den Sie die Bezeichnung ändern möchten.
- Deaktivieren Sie
Use Default Valuebeim FeldName. - Geben Sie die Tab-Bezeichnung für die ausgewählte Sprachversion ein.
- Speichern Sie das Formular.
Wenn Use Default Value aktiviert bleibt, verwendet das Modul den Standardwert aus store_id = 0.
Funktionsweise im Frontend
Das Modul fügt Tabs zum Bereich mit den Produktdetails hinzu. Ein Tab wird nur angezeigt, wenn für das Produkt im in der Tab-Konfiguration angegebenen Attribut ein Wert hinterlegt ist.
Für die Tab-Bezeichnung verwendet das Modul folgenden Fallback:
- Bezeichnung für den aktuellen Store View.
- Standardbezeichnung aus
store_id = 0. - Wert aus der Haupttabelle der Tabs, der aus Kompatibilitätsgründen beibehalten wird.
Der Tab-Inhalt wird durch den CMS-Mechanismus von Magento gefiltert und kann daher von Magento unterstützte HTML-Tags und Widgets enthalten.
Vorhandene Installation aktualisieren
Führen Sie nach dem Update des Moduls auf eine Version mit Unterstützung für mehrere Sprachen Folgendes aus:
php bin/magento setup:upgradephp bin/magento cache:flushDie neue Tabelle mit Werten je Store View wird über das deklarative Schema von Magento hinzugefügt. Nach dem ersten Speichern eines vorhandenen Tabs wird dessen Standardbezeichnung auch als Datensatz für store_id = 0 gespeichert.
Fehlerbehebung
Wenn ein Tab im Frontend nicht angezeigt wird:
- Prüfen Sie, ob das Modul in der Konfiguration aktiviert ist.
- Prüfen Sie, ob
Statusfür den Tab aufYesgesetzt ist. - Prüfen Sie, ob für das Produkt im unter
Attribute codeangegebenen Attribut ein Wert hinterlegt ist. - Leeren Sie den Magento-Cache.
- Stellen Sie sicher, dass das Theme-Layout weiterhin den Block
product.info.detailsrendert.
Wenn die übersetzte Bezeichnung im Frontend nicht angezeigt wird:
- Prüfen Sie, ob Sie den richtigen Store View bearbeiten.
- Prüfen Sie, ob
Use Default Valuefür das FeldNamedeaktiviert ist. - Speichern Sie den Tab und leeren Sie den Cache.