Theme-Verwaltung Themes im PepperShop
Werbung
Theme-Verwaltung Themes im PepperShop Datum 21. Oktober 2016 Version 2.1 Inhaltsverzeichnis 1. Einleitung...........................................................................................................................................................3 2. Themes verwalten.............................................................................................................................................3 2.1 Theme hochladen......................................................................................................................................3 2.2 Details eines Themes ansehen..................................................................................................................3 2.3 Theme exportieren....................................................................................................................................3 2.4 Theme aktivieren.......................................................................................................................................3 2.4.1 Aktives Theme wechseln...................................................................................................................4 2.4.2 Versionsbindung eines PepperShop Themes..................................................................................4 2.5 Theme löschen...........................................................................................................................................4 2.5.1 Theme Backup vor dem Löschen erstellen......................................................................................4 2.5.2 Löschoperation..................................................................................................................................4 2.6 Theme zurücksetzen / Reset.....................................................................................................................4 3. Aufbau eines Themes........................................................................................................................................4 4. Theme anpassen...............................................................................................................................................5 4.1 HTML-Templates.........................................................................................................................................6 4.2 Bilder...........................................................................................................................................................6 4.3 Metadaten...................................................................................................................................................6 4.4 Layout Anpassungen (Update-SQL)..........................................................................................................6 5. Online Hilfe........................................................................................................................................................7 6. Anmerkungen / Hinweise..................................................................................................................................7 PepperShop wird von Glarotech entwickelt und vertrieben. Seit 1998 ist das innovative Unternehmen im Internet tätig und auf E-Commerce spezialisiert. Sie als Kunde profitieren vom direkten Draht zu den Herstellern der Produkte. Glarotech GmbH Toggenburgerstrasse 156 CH-9500 Wil [email protected] Tel. +41 (0)71 923 08 58 www.glarotech.ch 1. Einleitung Das Webshop System PepperShop unterstützt Themes die es ermöglichen, das Shopdesign schnell und einfach zu verändern. Dabei werden Themes als Paket ins System geladen und aktiviert. Mit der PepperShop Theme-Verwaltung erstellt man auch ganz einfach ein eigenes Theme: Einfach den Shop nach den eigenen Wünschen gestalten und den aktuellen Zustand als Theme exportieren. In den folgenden Kapiteln wird die Benutzung von Themes in der PepperShop Administration beschrieben und zusätzlich wie ein Theme aufgebaut ist. 2. Themes verwalten Themes werden im PepperShop in der Shop-Administration im Bereich "Layout-Management" -> "Themes" administriert. 2.1 Theme hochladen Um ein fertiges PepperShop Theme in Ihren Shop hochzuladen, klicken Sie zuerst in der Theme-Verwaltung auf den Button "Theme hochladen". Hier können Sie nun ein lokal auf Ihrem Computer gespeichertes PepperShop Theme Paket auswählen. PepperShop Theme Pakete verwenden das Format tar.gz 1. Hinweis: Wenn Sie noch kein Theme-Pakets haben, finden Sie im Kapitel 2.3 "Theme exportieren" die nötigen Schritte beschrieben, um aus Ihrem aktuellen Design im Shop ein Theme-Paket zu erstellen. Damit der Shop Theme-Daten hochladen kann, werden gegebenenfalls FTP-Zugangsdaten angefragt. Wenn Ihr Paket erfolgreich hochgeladen worden ist, sehen Sie eine entsprechende Erfolgsmeldung. Gehen Sie nun zurück zur Theme-Übersicht. Dort werden Sie nun das neu hochgeladene Theme vorfinden. 2.2 Details eines Themes ansehen Zu jedem Theme gibt es eine Detailansicht, die alle Vorschaubilder und enthaltenen Beschreibungsdaten anzeigt. Unter anderem finden Sie dort auch die PepperShop Version, für welche das Theme erstellt worden ist. Für die Detailanzeige fahren Sie in der Übersicht mit der Maus über die Mitte des Vorschaubildes und klicken Sie auf "Details anzeigen". Hat das Theme mehrere Preview Bilder, werden diese in einem Slider dargestellt. 2.3 Theme exportieren Um den aktuellen Zustand des Shops in ein Theme-Paket zu exportieren, klicken Sie auf "Aktuelles Theme exportieren". Geben Sie in der Maske den gewünschten Anzeigenamen, Ihren Autorennamen und eine passende Beschreibung an, und klicken Sie auf "Theme exportieren". Über den erschienenen Link in der grünen Box kann das Paket nun heruntergeladen werden. Weitere Informationen zum Aufbau und Verändern eines Theme-Pakets finden Sie im Kapitel 3 "Aufbau eines Themes". 2.4 Theme aktivieren Um eines Ihrer Themes zu aktivieren, klicken Sie auf den entsprechenden Button des jeweiligen Themes. 1 tar.gz Format: Siehe auch Kapitel 6. Seite 3/7 www.peppershop.com Damit der Shop zuvor hochgeladene Theme-Daten verarbeiten kann, werden gegebenenfalls FTP-Zugangsdaten angefragt. Der Shop entpackt nun einmalig Theme-spezifische Daten in die entsprechende Verzeichnisse und bereitet diese für die Aktivierung vor. Weiter laufen einige Daten- und Konsistenzprüfungen. Die Aktivierung veranlasst nun, dass alle im Theme hinterlegten Layout-Management Einstellungen übernommen werden. Nicht definierte Anpassungen werden also nicht verändert. Weiter verwendet der Shop nun die im Paket enthaltenen HTML-Templates und Bilder. 2.4.1 Aktives Theme wechseln Wenn das aktive Theme nicht Ihren Vorstellungen entspricht, können Sie jederzeit ein anderes Theme aktivieren oder wieder zurück zum Standard PepperShop Theme wechseln. Die Daten des vorherigen Themes werden immer noch vorhanden sein. So können Sie jederzeit beliebig zwischen Themes hin und her wechseln. 2.4.2 Versionsbindung eines PepperShop Themes Jedes Theme ist an die Version (Haupt + Unterversion, Build wird nicht berücksichtigt) des PepperShops gebunden. Stimmt die Theme-Version nicht mit der Version des Shops überein, kann das Theme nicht ordnungsgemäss verwendet bzw. aktiviert werden. 2.5 Theme löschen 2.5.1 Theme Backup vor dem Löschen erstellen Wenn Sie ein Backup des zu löschenden Themes haben möchten, aktivieren Sie es einfach kurz und laden Sie es anschliessend per "Aktuelles Theme exportieren" herunter. Danach wieder das andere Theme aktivieren und den Löschvorgang durchführen. 2.5.2 Löschoperation Klicken Sie beim jeweiligen Theme auf den "löschen" Button. Sofern Sie die Bestätigungsabfrage mit "ok" beantworten, wird das Theme nun unwiderruflich gelöscht. ALLE DATEN SIND VERLOREN! Damit der Shop die Theme-Daten entfernen kann, werden gegebenenfalls FTP-Zugangsdaten angefragt. Klicken Sie in der Bestätigung auf "ok", wird das Theme und alle dazugehörigen Daten unwiederruflich gelöscht. 2.6 Theme zurücksetzen / Reset Sollten Sie einmal ein Theme aktiviert und eigene Änderungen gemacht haben, welche Sie wieder rückgängig machen möchten, gehen Sie wie folgt vor: Klicken Sie auf "Design zurücksetzen". Dies wird nur beim aktiven Theme angezeigt. Bedenken Sie, dass alle im Theme-Paket enthaltenen Daten die jetzigen Einstellungen überschreiben. Seite 4/7 www.peppershop.com 3. Aufbau eines Themes Um ein Theme Paket selbst noch detaillierter anpassen zu können, muss der Aufbau eines Themes verstanden werden. Ein Theme ist erstmal als tar.gz Paket vorhanden, z.B. "beispiel.tar.gz". Wenn im Shop ein Theme exportiert wird, erstellt der Shop ebenfalls eine tar.gz Archivdatei. Wird das Paket entpackt1, wird folgende Struktur ersichtlich (Abbildung 1). Der "preview"-Ordner existiert in der exportierten Fassung noch nicht, da je nach Anpassung der Layout-Einstellungen sowieso neue Vorschaubilder erstellt werden müssen. In diesem Vorschau-Ordner werden alle Vorschaubilder im Format PNG oder JPEG abgelegt. Diese Bilder werden in der ThemeÜbersicht angezeigt (erstes Bild). Die weite- Abbildung 1: Aufbau Theme Paket ren Bilder sieht man in der Detailansicht des Themes. Richtwert für die Bilddimensionen: 700px Breite, 400px Höhe. In der Datei "update_sql.json" sind alle Design relevanten Datenbank-Einträge enthalten, welche beim Aktivieren des Themes eingespielt werden (SQL-Update Statements). In der Datei "metadata.json" sind alle Text basierten Beschreibungsinformationen abgelegt. Darunter sind der Name des Themes, der Name des Autors, ein passender Beschreibungstext, und für welche Version des PepperShops dieses Theme erstellt worden ist. Im Ordner des entpackten Themes gibt es zusätzlich noch ein weiteres tar.gz Archiv mit gleichem Namen. Wenn Sie dieses Paket ebenfalls entpacken, kommt folgende Ordnerstruktur zum Vorschein (Abbildung 2, hier der "beispiel"-Ordner). In diesem Ordner sind nun also die eigentlichen Ressourcen dieses Themes abgelegt: HTML-Templates, Bilddateien (Hintergrund der Hauptnavigation, Hintergrund des Shops und Hintergrund des Footers, ...) und ein zusätzliches CSS-Stylesheet und eine Javascript Datei, falls man so eine braucht. Auf den Inhalt von HTML-Templates und der jQuery -und Stylesheet-Datei gehen wir in dieser Anleitung nicht genauer ein. Es können alle HTML-Templates2 des PepperShops angepasst werden. Hier legt Abbildung 2: Aufbau Paket mit Bilder, Templates und Libraries man dann einfach die Templates ab, welche man abgeändert hat. Beim Exportieren eines Themes, macht das der Shop für Sie vollautomatisch. Wichtig: Die Dateien und Ordner müssen gleich, wie in der Abbildung 2 angezeigt, benennt werden. Andernfalls kann der Shop diese nicht zuordnen und wird sie somit nicht verwenden. 1 2 tar.gz Format: Siehe auch Kapitel 6. HTML-Templates des PepperShops liegen hier: {shop_verziechnis}/shop/language/html_templates Seite 5/7 www.peppershop.com 4. Theme anpassen Damit ein Theme vollständig funktionstüchtig ist, müssen folgende Punkte bei der Anpassung eines Themes beachtet werden. Nach einer manuellen Anpassung des tar.gz Archivs muss das Paket wieder so strukturiert sein, dass es dem Aufbau aus Abbildung 1+2 entspricht und wieder im tar.gz Format vorliegen. Info: Wenn Sie das Standard Theme aktiviert haben, und dieses exportieren, werden Sie alle Bilder und Templates im Paket zur Verfügung haben (shop/language/html_templates/ und shop/Bilder/). Wenn Sie ein selbst gebautes Theme aktivieren und exportieren, werden Sie alle Bilder und Templates im Theme-Paket vorfinden, welche schon zuvor bei der aktivierung des Themes im Ordner„shop/language/theme_templates/{theme}/“ abgelegt waren. Dies ist ganz wichtig zu verstehen. Wenn man weitere Designelemente angepasst hat, so muss man diese manuell in ein Paket einpflegen. 4.1 HTML-Templates Sie können das Paket so anpassen, dass Sie einzelne Templates wieder aus dem Ordner "html_templates" löschen. Dann werden die nicht vorhandenen Templates aus dem Standard-Ordner „shop/language/html_templates/“ geladen. Info: Wenn ein Theme aktiv geschaltet wird, werden vorhandene Templates im Ordner „shop/language/theme_templates/{theme}/html_templates/“ abgelegt. 4.2 Bilder Wichtig ist, dass das Theme-System erwartet, dass Sie für das Theme alle verfügbaren Bilder im Paket besitzen. Andernfalls wird er die Bilder nicht laden können. Die Bilder sollten Sie also bei einer Anpassung nicht entfernen, sondern nur wenn nötig auswechseln. Info: Wenn ein Theme aktiv geschaltet wird, werden vorhandene Templates im Ordner „shop/language/theme_templates/{theme}/Bilder/“ abgelegt. Die übersetzten Buttons wie z.B „weiter“ oder „zurück“ werden nicht exportiert bzw. nicht je Theme verwendet. Die Ordner „shop/language/{sprache}/Buttons/“ bleiben unverändert und gelten für alle Themes. Mit CSS-Buttons ist dies irrelevant. 4.3 Metadaten Der Inhalt der Metadaten sieht folgendermassen aus (JSON): { "Name": "Beispiel", "Autor": "Beispiel Autor", "Beschreibung": "Beispiel Beschreibung des Themes", "Version": "Version des Themes" } Die Version gibt an, für welche Shopversion das Theme verwendet werden kann: Hauptversion + Unterversion (z.B. 5.0, nicht aber 5.0.0.12). Seite 6/7 www.peppershop.com 4.4 Layout Anpassungen (Update-SQL) Der Inhalt des update_sql.json Datei kann wie folgt aussehen: { "css_file": [{"Attribut_ID":"admin_stern","CSS_String":"nein"},{"Attribut_ID":"no_shadow","CSS_String":"Y"}], "shop_settings_new": [{"name":"ganze_breite_artikel_detail","gruppe":"Spalten_Layout","wert":"N","security":"user"}, {"name":"ganze_breite_bestellprozess","gruppe":"Spalten_Layout","wert":"Y","security":"user"}] } Auch hier sollten Sie beachten, dass alle Klammern an der richtigen Position bleiben. Bei einem Schreibfehler, wird das Theme nicht ordnungsgemäss aktiviert werden können. Wir empfehlen deshalb für unerfahrene Benutzer, das Theme im Shop zu aktivieren und dann diverse Anpassungen Layout-Management vorzunehmen. Bei einem Export wird das "update_sql.json" diese Anpassungen beinhalten. 5. Online Hilfe In der Theme-Verwaltung findet man mit Klick auf den Hilfe-Button Zugriff auf die Online-Hilfeseite zum Theme-System. Diese enthält nochmals diese Bedienungsanleitung. 6. Anmerkungen / Hinweise Das Kompressionsformat tar.gz wird standardmässig im Linux/Unix-Bereich verwendet. Windows -und Mac-Anwender benötigen womöglich ein Programm zur Erstellung und/oder zum Entpacken von tar.gzPaketen. Wir empfehlen für Windows-Anwender folgendes kostenlose Programm: 7zip. Seite 7/7 www.peppershop.com
