Menü

Erstellt: 26.03.2019Zuletzt geändert: 03.04.2019568x angesehen

Artikel Tab Manager - Tabs frei definieren

Shopansicht Tabs Config Beispiel
Admin Textbausteine für Tab-Namen
Admin Grundeinstellung für Plugin
Admin Artikelverwaltung mit Freitextfelder zum Plugin
Admin Artikelverwaltung und Textbausteine mit Ausgabeschemas
Admin Grundeinstellung JQuery Resizer
Admin Grundeinstellung JQuery Viewport-Watcher
Admin Grundeinstellung Tabs Definieren
Admin Grundeinstellung Counter der Tabs
Admin Grundeinstellung Links in Artikelbeschreibung deaktivieren
Admin Grundeinstellung Downloads in Artikelbeschreibung deaktivieren
Admin Grundeinstellung Video Schema
Admin Grundeinstellung PDF Schema

Produktbeschreibung

Der Tab Manager ermöglicht Ihnen den vollen Zugriff auf die Tabs in der Artikel Detail Ansicht.
Bestimmen Sie die Reihenfolge der Tabs oder ändern Sie spielend leicht über die Textbausteine die Tab Benennungen.
Mit dem Tab Manager können Sie neue Tabs zur Darstellung der Herstellerinformationen, PDF Dokumenten, Videos, Downloads oder Links hinzufügen. Zudem können Sie mit dem Plugin, pro Produkt, zwei frei definierbare Tabs erstellen, hierdurch haben Sie freie Hand über den Inhalt der Tabs, ideal für spezifische Produktinformationen!
Die Konfiguration des Tab Managers erlaubt Ihnen vier völlig verschiedene Einstellungsschemas einzurichten, welche Sie pro Produkt definieren können. Zudem können Sie Details wie den Counter aktivieren, dieser zeigt eine Zahl der Tab Inhalte in dem Tab Namen an, hierdurch erhält Ihr Shopbesucher bereits über den Tab Namen wichtige Informationen, ohne den Tab zu öffnen - Beispielweise wie viele Videos verfügbar sind. Ist in einem Tab jedoch kein Inhalt vorhanden, so wird dieser ausgeblendet, dies erhöht die Übersicht und bietet Ihrem Shopbesucher ein gutes Einkaufserlebnis. Pro Artikel können Sie bis zu vier PDFs und Videos definieren, hierzu hinterlegen Sie einfach die URL zum Video oder zum PDF Dokument. Sowohl der PDF Tab als auch der Video Tab können von Ihnen frei eingestellt werden, mittels der Grundeinstellungen können Sie ein Ausgabeschema definieren, welche es Ihnen ermöglicht den HTML Code zum Einbinden der Videos oder PDF Dokumente beliebig anzupassen.
Haben Sie Produkte oder Produktgruppen mit gleichen Videos oder PDF Dokumenten? Auch dies ist kein Problem mit dem Tab Manager, mittels der Grundeinstellungen des Plugins können Sie pro Tab-Schema zwei Videos und zwei PDF Dokumente hinterlegen, welche zusätzlich zu den vier Videos und PDF Dokumenten aus der Artikelverwaltung zu jedem Produkt grundlegend hinzugefügt werden.
Global stehen Ihnen auch zwei Multitabs zur verfügung, welche Sie über ein Tab Schema ganz einfach auswählen und hinzufügen können. Der Multitab erlaubt Ihnen Ihren ganz eigenen Tab mit eigenen Inhalten und vielen Informationen zum Produkt zusammenzustellen. Tragen Sie hierzu einfach den gewünschten HTML Code in den Multitap über die Grundeinstellungen ein und ersetzen Sie die benötigen Informationen mit den dazugehörigen Platzhaltern. Ihr Shopbesucher erhält dadurch z.B. Artikelbeschreibung, EAN, Gewicht, Videos und PDF Dokumente in nur einem einzigen Tab und das nach Ihrem eigenen Design!

Verfügbar im Store von Shopware

Aktuelle Version: V1.2.0
Direkt zum Plugin in den Shopware Store


Konfiguration

Grundlegendes

Admin Grundeinstellungen öffnen
Im Administrationsbereich unter
Einstellungen -> Grundeinstellungen -> Artikel Tab Manager
Können Sie alle Elemente vom Plugin konfigurieren.

Admin Textbausteine für Plugin
Unter Einstellungen -> Textbausteine -> frontend
Können Sie die Tab Namen definieren. Tragen Sie in dem Suchfeld "TabManager" ein, um am schnellsten die verfügbaren Einträge zu finden. Achten Sie bei dem Ändern der Tab-Namen auf die Schema ID, Beispielsweise "ArticleTabManager_Schema1_Tab_description" für das Ausgabeschema 1.

Admin Artikelverwaltung mit Freitextfelder zum Plugin
In der Artikelverwaltung unter Artikel -> Übersicht -> beliebigen Artikel editieren
Können Sie zum jeweiligen Artikel das Schema sowie die URLs zu den PDFs und Videos hinterlegen.

Überblick der Grundeinstellungen

Admin Grundeinstellung Gliederung
Die Grundeinstellungen sind in fünf Abschnitte unterteilt.

Admin Grundeinstellung Plugin-Handling
Im ersten Abschnitt können Sie einstellen, ob die Multishop-Fähigkeit aktiviert werden soll.

Admin Grundeinstellung JQuery Zusatz Einstellungen
Im zweiten Abschnitt "Einstellungen" können Sie zum Video Tab mehrere Einstellungen vornehmen.

Admin Grundeinstellungen globale CSS Daten und Multitaps
Im dritten und vierten Abschnitt können Sie die Multitap HTML sowie CSS Codes hinterlegen. Dieser Aufbau ermöglicht Ihnen eine beliebige Darstellung eines Tabs, genaueres dazu finden Sie im Punkt "Multitaps einrichten" in dieser Anleitung.

Admin Grundeinstellung Ausgabeschemas
Der fünfte Abschnitt "Ausgabeschema xx" ist viermal vorhanden. Hiermit können Sie vier getrennte Schemas definieren, welche Sie in der Artikelverwaltung zu beliebigen Artikel hinterlegen können. Diese Einstellung ist besonders sinnvoll, wenn Sie verschiedene Outfits für Produktgruppen hinterlegen möchten.

Voreinstellung

Admin Voreinstellungen der Ausgabeschemas
Sobald das Plugin von Ihnen installiert und aktiviert wurde, ist es im Shop aktiv und gibt bereits die Tab-Schemas aus. Um nun das Outfit vorerst so zu lassen, wie Sie es kennen, ohne das Sie separat Hand anlegen müssen. Ist jedes Tab Schema mit dem von Shopware üblichen Outfit voreingestellt. Tab1 = Artikelbeschreibung und Tab2 = Bewertungen. Links und Downloads werden innerhalb des Artikelbeschreibung-Tabs angezeigt. Diese Voreinstellung können Sie natürlich sofort ändern. Bedenken Sie bitte: Sollten Sie im Produkt nicht explizit ein Ausgabeschema definiert haben, gilt immer das Schema1. Daher müssen Sie nach Installation von diesem Plugin nicht jedes Produkt durchgehen und extra ein Ausgabeschema definieren.

Konfiguration im Artikel

Admin Artikelverwaltung PDFs und Videos unter Textbausteinen
Sobald Sie ein Artikel editieren, finden Sie ganz unten in der Eingabemaske in dem Segment "Freitextfelder" alle Einstellmöglichkeiten zum Artikel von diesem Plugin. In die vier Eingabefelder "Tab PDF - PDF .." sowie "Tab Video - Video .." können Sie die URLs zu dem jeweiligen Ziel hinterlegen. Bitte beachten Sie das Tab Ausgabeschema, da der HTML Code zum Einbetten der Videos sowie der PDF-Dokumente pro Ausgabeschema genau konfiguriert werden kann! Näheres dazu erfahren Sie in dem Punkt "Konfiguration der Tab-Schemas" in dieser Anleitung. Beachten Sie auch unsere Anwendungsbeispiele zu den Videos, ebenfalls in dieser Anleitung in dem Punkt "Anwendungsbeispiele IFrame Videos" zu finden.

Admin Artikelverwaltung Schemas unter Freitextfelder
Wenn Sie Tabs mit freien Inhalten bestücken möchten, können Sie das über die Eingabefelder "Freier Tab 1 - Inhalt" sowie dem dazu gehörigen Tab-Namen "Freier Tab 1 - Titel" tun. Diese Kombination steht Ihnen zweimal zur Verfügung. Die Besonderheit an dieser Stelle sind die Titel der Tabs, Sie haben hier die Möglichkeit sich auf die fest eingestellten Tab-Namen bzw. Titel aus den Textbausteinen zu verlassen. Diese werden automatisch verwendet, sobald in dem jeweiligen Artikel das Eingabefeld zum Tab-Namen leer ist. Die Textbausteine richten sich dabei nach dem ausgewählten Tab Ausgabeschema.

Freie Tab-Namen

Admin individuelle Tab-Namen Erklärung
Bei Benennung der freien Tabs, sollten Sie in den Textbausteinen darauf achten, woher der Freie Tab ganz genau kommt. Es gibt sowohl im Produkt zwei freie Tabs als auch in den Grundeinstellungen in jedem der vier Ausgabeschemas, zwei freie Tabs.
Alle vier freie Tab-Namen können getrennt gesteuert werden, achten Sie daher in den Textbausteinen auf den Namen "_settings_" dieser steht für die freien Tabs der Grundeinstellungen!

Konfiguration der Einstellungen

Admin Grundeinstellungen Plugin Handling der Subshops
Mit dem Plugin Handling können Sie bestimmen, ob die Multishop-Fähigkeit aktiviert wird. Dies bezieht sich jedoch "lediglich" auf die Einstellungen, welche Sie in den Grundeinstellungen zum jeweiligen Shop durchführen, nicht jedoch auf Übersetzungen (Globus im Eingabefeld) in den Textbausteinen! Die Deaktivierung der Multishop-Fähigkeit kann von Vorteil sein, wenn Sie ohnehin nur eine Konfiguration wünschen, welche für alle Shops gleichermaßen gelten soll.

Admin Grundeinstellung JQuery Resizer
Der JQuery IFrame Resizer kann in dem Video-Tab das mittels IFrame eingebettete Video perfekt an die Bildschirmgröße des Users anpassen. Er reagiert aber auch auf Veränderungen bei der Ansicht des Videos, beispielsweise wenn der Browser in der Größe geändert wird.

Admin Grundeinstellung JQuery Viewport-Watcher
Der JQuery Viewport-watcher überwacht, ob sich das abzuspielende Video innerhalb des sichtbaren Bereichs befindet, wenn nein wird es automatisch gestoppt. Diese Methodik funktioniert Plattformübergreifend, ganz gleich ob Sie Youtube oder Facebook Videos einbinden möchten. Ihnen stehen bei diesem Konfigurationspunkt zwei Optionen zur Verfügung. "Tab-Wechsel" überwacht, lediglich ob sich der Shop Besucher noch innerhalb des Video-Tabs befindet. "Tab-Wechsel und Scrollen" überwacht zusätzlich ob der Shop Besucher das Video aus dem sichtbaren Bereich scrollt. Zu beachten ist hierbei, dass der gesamte Tab als sichtbarer Bereich gewertet wird!

Konfiguration der Tab-Schemas

Admin Grundeinstellung Tabinhalte definieren
Mit den Konfigurationspunkten Tab1 bis Tab9 können Sie den Inhalt der Tabs und zeitgleich die Position der Tabs bestimmen. Pro Tab steht Ihnen in dem DropDown Feld alle Tab Varianten zur Verfügung, eine Doppelbelegung ist daher möglich. Tab1 beginnt in der Ausgabe im Frontend auf der linken Seite, Tab 9 ist ganz rechts. Bei der Konfiguration müssen Tabs nicht zwangsläufig aufeinanderfolgend konfiguriert werden, Tab2 Beispielsweise kann deaktiviert werden, wobei Tab1 und 3 ausgegeben werden.

Admin Grundeinstellung Tab Counter aktivieren
Im nächsten Konfigurationspunkt "Inhalts Counter neben Tab Namen" können Sie festlegen, ob neben dem Tab Namen auch eine Zahl erscheinen soll, welche den Inhalt des betreffenden Tabs widerspiegelt.

Admin Grundeinstellung Links deaktivieren
Mit dem Konfigurationspunkt "Links unterhalb der Artikelbeschreibung" können Sie festlegen, ob die Liste der Links, welche standardmäßig bei Shopware unterhalb der Artikelbeschreibung angezeigt wird, ausgegeben werden soll. Dieser Konfigurationspunkt richtet sich allerdings NUR an den Tab mit der Artikelbeschreibung nicht den separaten Tab, welcher die Links eigenständig ausgeben kann. Ihnen stehen drei Optionen zur Verfügung: Die Option "Anzeigen" stellt alle Links wie gewohnt dar. Die Option "Ausblenden aber Links wie.... anzeigen" belässt nur die Standardlinks unterhalb der Artikelbeschreibung und blendet zeitgleich alle Links aus, welche Sie im jeweiligen Artikel unter dem Tab Ressourcen definieren können. Die letzte Option "Alle Links ausblenden" blendet hingegen alle Links unterhalb der Artikelbeschreibung aus.

Admin Grundeinstellung Downloads deaktivieren
Der Konfigurationspunkt "Downloads unterhalb der Artikelbeschreibung" funktioniert ähnlich wie der zuvor beschriebene Konfigurationspunkt. Auch die hier eingestellten Optionen richten sich nur an den Tab mit der Artikelbeschreibung und nicht an den neuen Tab, welcher die Downloads separat darstellen kann. Es stehen lediglich zwei Optionen zur Verfügung, anzeigen oder ausblenden.

Admin Grundeinstellung PDF und Video Schemas
Das Video Darstellungsschema funktioniert genau wie das PDF Darstellungsschema. Mit diesen beiden Eingabefelder können Sie nach Belieben die Ausgabe der Videos und PDF Dokumente steuern. Der Sinn ist es Ihnen vollen Zugriff zu gewähren, schließlich wissen nur Sie welchen Videoservice (Youtube, Vimeo, Facebook etc.) Sie verwenden möchten und welche Art der PDF-Darstellung Sie bevorzugen. Die URL, welche Sie im jeweiligen Produkt eintragen wird mit dem Platzhalter ##url_to_replace## in diesem Schema ersetzt. Bitte beachten Sie hierzu Punkte "Anwendungsbeispiele IFrame Videos" und "Anwendungsbeispiel PDF Dokumente" weiter unten in dieser Anleitung.

Admin Grundeinstellung Standard URLs
Anschließend haben Sie die Eingabefelder "Standard Video" und "Standard PDF" jeweils zweimal zur Verfügung. Mit diesen können Sie URLs zu Videos oder PDFs hinterlegen, welche sowieso wiederkehrend wären. Beispielweise ein PDF Dokument, welches für eine ganze Sparte an Produkten, bei jedem Produkt hinterlegt werden müsste. Diese hier definierten Videos oder PDFs gelten jedoch NUR für das betreffende Ausgabeschema und damit NUR für die Produkte zu welchen dieses Ausgabeschema zugewiesen wurde.

Admin Grundeinstellung Ausgabeschema freier Tab
Bei den letzten beiden Eingabefelder im Ausgabeschema haben Sie zwei individuelle Tabs zur Verfügung. Diese funktionieren genau so wie die beiden im Artikel, Sie müssten bei der Auswahl in z.B. Tab1 lediglich auf die richtige Selektierung achten "Individueller Tab 1 (Aus den Grundeinstellungen...)".
Sie können HTML Code verwenden, alle hier eingetragenen Informationen werden dann im entsprechenden Tab, im Produkt im Frontend, ausgegeben. Diese Variante ist ideal, wenn Sie ein bestimmtes Ausgabeschema zu einer Produktreihe hinzugefügt haben und möchten das immer dieselben Zusatzinformationen im Produkt erscheinen. Beispielsweise eine Tabelle für Hosengrößen oder Waschanleitungen.



Multitaps einrichten

Verfügbare Platzhalter

##article_desc_long##
##article_ean##
##article_weight##
##article_nr##
##article_supplier_name##
##article_supplier_img##
##individual_tab_from_article_one##
##individual_tab_from_article_two##
##individual_tab_from_settings_one##
##individual_tab_from_settings_two##
##article_reviews##
##article_downloads_header##
##article_downloads##
##article_links_header##
##article_links##
##article_desc_header##
##article_properties##
##article_all_videos##
##article_all_pdf_docs##

Allgemeines

Ein Multitap ist eine gute Möglichkeit um verschiedene Informationen innerhalb von nur einem Tab abzubilden. Manchmal ist es erforderlich direkt nach der Artikelbeschreibung ein Video anzuzeigen, welches aber nicht in der Artikelbeschreibung gepflegt werden sollte.
Oder wenn Sie den Fokus Ihrer Shopbesucher lieber auf Videos PDF Dokumente und andere Informationen richten möchten, anstatt auf die Artikelbeschreibung.
Dann ist ein Multitap wie geschaffen für Sie!

Konfiguration von einem Multitap

Admin Grundeinstellung Multitap Aufbau
Der Tab Manager bietet Ihnen zwei frei konfigurierbare Multitaps an.
Im Grunde handelt es sich um eine direkte Ausgabe des HTML Codes mit der Möglichkeit Platzhalter für verschiedene Informationen oder Informationsblöcke zu setzen.
Fügen Sie einfach Ihren HTML Code in einer der beiden Multitap Eingabefelder ein, den dazugehörigen CSS Code können Sie in das Eingabefeld "CSS" schreiben.
Bitte beachten Sie das der CSS Code IMMER ausgegeben wird, ganz gleich, ob ein Multitap für ein Artikel aktiv ist oder nicht!

Admin Grundeinstellung Multitap zu Tab zuweisen
Anschließend müssen Sie zum Aktivieren des Multitaps, diesen im Ausgabeschema einem Tab zuweisen.

Anwendungsbeispiel eines Multitaps

Multitap Ausgabebeispiel
In diesem Beispiel des Frontends sehen Sie lediglich eine mögliche Darstellungsvariante. Dadurch das Sie mit HTML und CSS frei arbeiten können, ist Ihrer Fantasie keine Grenzen gesetzt!

Und hier der CSS und HTML Code dazu. Wenn Sie diese Darstellungsvariante auf Ihrer Seite testen möchten, können Sie den Code einfach in Ihre Grundeinstellungen Ihres Tab Managers kopieren.

CSS
HTML



Anwendungsbeispiel PDF Dokumente

Admin Grundeinstellung PDF Schema Beispiel
In diesem Beispiel verwenden wir ein PDF Dokument, welches auf dem Server von Shopware liegt, es kann auf mehrere Varianten eingebunden werden. Das Schema zur Darstellung können Sie in dem Eingabefeld "PDF Darstellungsschema" definieren. Das Schema wird bei jeder Einbindung einer PDF Datei herangezogen, die betreffende PDF Datei bzw. deren URL wird mittels Platzhalter "##url_to_replace##" ersetzt. Sofern Sie immer den gleichen Pfad nutzen, können Sie aber auch die URL direkt ins Schema schreiben und lediglich den Detailaufruf in dem Standard PDF Eingabefeld in den Grundeinstellungen hinterlegen oder im jeweiligen Produkt in einer der vier Eingabefelder zum PDF.

Seit der Plugin Version V1.0.1 ist folgende PDF Ausgabeschema-Variante als Standard hinterlegt: Das Object Tag verfügt über ein Fallback, welcher Endgeräte die PDFs nicht von alleine einbetten können (Android Handys), mit den nötigen Informationen versorgt. Bei diesem Code hat der Shop Besucher zwei Fallbacks zur Verfügung, er kann das PDF downloaden oder es über den Google PDF Viewer anzeigen lassen.



Anwendungsbeispiele IFrame Videos

Bei der URL ist unbedingt darauf zu achten, dass es sich nicht um die URL aus dem Browser handel, sondern um die URL, welche zum Einbinden von Videos aus in ein IFrame geeignet ist. Um immer die passende URL zu verwenden, haben wir für die gängigsten Anbieter unter dem Punkt "Tipps zum Einbinden der Videos" in dieser Anleitung eine kleine Zusammenstellung vorbereitet.

Admin Grundeinstellung Video Schema Beispiel
In diesem Beispiel verwenden wir ein Video von Youtube aus dem Channel von Shopware. Die Ausgabe im Frontend erfolgt letztlich durch das Video Darstellungsschema, in diesem wird die URL mit dem Platzhalter "##url_to_replace##" ersetzt. Sie haben daher vollen Zugriff auf den gesamten HTML Code und können diesen beliebig anpassen.

Admin Grundeinstellung Video Anwendungsbeispiel
In diesem Beispiel verwenden wir das gleiche Video bei YouTube wie im vorherigen. Da wir hier wissen, dass alle Videos sowieso von Youtube stammen, kann man die URL in das Schema legen und mit den beiden Standard Videos aus den Grundeinstellungen sowie den vier Videos aus der Artikelverwaltung, lediglich die Video-ID übergeben.



Tipps zum Einbinden der Videos

Im Administrationsbereich in Ihrem Shop in den Grundeinstellungen können Sie das Schema des IFrames ändern. In den Grundeinstellungen sowie den vier Eingabefelder in der Artikelverwaltung kann die URL eingetragen werden. Da aber die URL für das IFrame NICHT die URL des z.B. Youtube Videos im Browser ist, hier eine kleine Anleitung wie man am schnellsten die URL findet.

Youtube

Youtube IFrame URL finden
Klicken Sie auf Youtube auf ein beliebiges Video. Unterhalb vom Abonnieren Button, finden Sie den "Teilen" Button, klicken Sie darauf. Es erscheint darunter eine Box, klicken Sie auf "Einbetten", anschließend erscheint der vollständige Code mit dem IFrame. Die URL, welche Sie nutzen können finden Sie zwischen den "" im src="" Attribut.

Vimeo

Vimeo IFrame URL finden
Klicken Sie auf ein Vimeo Video, auf der rechten Seite oben, innerhalb vom Video, finden Sie den "Teilen" Button. Klicken Sie auf den Button, es öffnet sich nun ein Fenster. Im Fenster sehen Sie den vollständigen IFrame Code zum Einbinden. Die nutzbare URL finden Sie zwischen den "" in dem src="" Attribut.

Facebook

Facebook IFrame URL finden
Klicken Sie auf ein beliebiges Video bei Facebook, suchen Sie die drei Punkte (entweder oberhalb oder unterhalb des Videos). Klicken Sie auf die drei Punkte, es öffnet sich ein Menü direkt daneben, klicken Sie auf "Einbetten". Im darauffolgenden Fenster finden Sie den vollständigen IFrame Code, die nutzbare URL finden Sie zwischen den "" in dem src="" Attribut.

Tags

Video TabYoutubeVimeoPDF TabHerstellerinformationenTab ManagerArtikel TabsReihenfolge verwaltenIndividuelle Tabs
instagram