Menü

Erstellt: 26.03.2019Zuletzt geändert: 03.04.2019263x angesehen

Artikel Tab Manager - Tabs frei definieren

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

Produktbeschreibung

Der Tab Manager ermöglicht Ihnen den vollen Zugriff auf die Tabs in der Artikel Detail Ansicht.
Bestimmen Sie selber 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 Shop Besucher bereits über den Tab Namen wichtige Informationen ohne den Tab öffnen zu müssen - 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 Shop Besucher 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.

Verfügbar im Store von Shopware

Aktuelle Version: V1.1.0
Direkt zum Modul in dem Shopware Store

Platzhalter für Multitap Schemen Aufbau

##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##



Konfiguration

(Anleitung nur bis V1.0.1 - V1.1.0 in Arbeit)

Grundlegendes

Admin Grundeinstellungen öffnen
Im Administrationsbereich unter Einstellungen -> Grundeinstellungen -> Artikel Tab Manager
Können Sie alle Elemente vom Modul 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 im Wesentlichen in zwei Teile untergliedert.

Admin Grundeinstellung Gliederung Einstellungen
In dem ersten Teil "Einstellungen" können Sie zum Video Tab mehrere Einstellungen vornehmen.

Admin Grundeinstellung Gliederung Ausgabeschemas
Der zweite Teil "Ausgabeschema" 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.

Konfiguration der Einstellungen

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 9 Tab Varianten zur Verfügung, eine Doppelbelegung ist daher möglich.

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
Abschließ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.

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