Neu ab GX3.13: Von Templates und Themes

Liebe Händler,

wir haben ein spannendes 2018 hinter uns, in dem wir einige Dinge machen konnten, die euch mit euren Shops ein gutes Stück vorangebracht haben. Natürlich wollen wir auch in 2019 nicht auf der Stelle stehen bleiben, und haben weitere Dinge in der Pipeline, um euch fit für die Zukunft zu halten. Ich möchte euch heute einmal über ein Thema berichten, dass wir schon für recht bald auf der Agenda haben, und mit GX3.13 ausrollen.

Templates sind tot! Es leben die Themes!

Die Gestaltungsmöglichkeiten im eigenen Onlineshop sind für alle ein Thema, wir sehen unzählige Fragen zu Aspekten der eigenen Gestaltung des Shops. Wir sind im Moment ganz gut aufgestellt, aber wir wollen noch mehr für euch rausholen und Dinge besser machen. Ein Thema auf unserer Wunschliste ist dabei zum Beispiel, dass wir mehr Webdesigner für Gambio begeistern möchten, und den bereits aktiven das Leben erleichtern wollen. Natürlich greift jede Möglichkeit, mehr am Design zu machen, auch für jeden Shopbetreiber selbst, das zahlt sich immer aus.

So weit, so klar. Wir haben nun Leute aus dem Gestaltungsdunstkreis vor einigen Monaten befragt, was wir tun müssen, um sie an Bord zu holen, oder ihnen das Leben zu erleichtern. Wir hörten dabei oft dieselben Kritikpunkte: Es ist zu kompliziert etwas zu machen, weil oft zuviel Redundanz da ist, oder weil Eingriffspunkte teilweise nicht logisch zu finden sind. Damit haben wir gearbeitet.

Wir selbst denken auch in die Zukunft, und haben unabhängig von Externen ebenfalls einige Dinge vor, bei denen wir mehr frischen Wind in das Shopäußere bringen möchten, und euch neue Möglichkeiten bieten wollen.

Wir haben uns also die Kritik und Wünsche, eigene und externe, zum Anlass genommen im Template einen "Frühjahrsputz" anzugehen: kräftig aufräumen, alte Leichen im Keller beseitigen, neue Strukturen anlegen, insgesamt kräftig Klarschiff machen.

Damit man die kommende, neue Struktur nach den ganzen Aktionen von der alten unterscheiden kann, hat diese auch einen neuen Namen bekommen: wir werden in Zukunft von Themes sprechen, statt wie bisher von Templates.

Was wird anders sein, was wie bisher?

Honeygrid allgemein

Honeygrid wird vor und nach dem jetzigen Umbau bis auf Weiteres weiter das Standarddesign von Gambio Shops sein. Während sich nach innen einiges ändern wird, wird es nach vorne erstmal aussehen wie bisher.

Das bringt natürlich den unangenehmen Punkt mit sich, das eigene Templateanpassungen, die bisher passten, nicht mehr 1:1 in die neue Struktur passen werden. Es geht dabei weniger um Einstellungen aus Styleedit, mehr um Dinge wie Usermods, etc., für die man Code selbst angefasst hat. Man wird diese eigenen Templateanpassungen also zwangsweise irgendwann einmal in die neue Form bringen müssen.

Wir verstehen dabei natürlich, dass das ein Hindernis ist, und haben überlegt wie wir das für euch soweit wie möglich entspannen können. Der Plan ist nun, erstmal alt neben neu bestehen zu lassen, Honeygrid also vorläufig 2x mit dem Shop auszuliefern.

Das bedeutet: Man muss also nicht jetzt Knall auf Fall in die neue Welt wechseln, man wird die Möglichkeit haben sich das neue Theme in Ruhe einzurichten. Dann am Ende, wenn man fertig ist, kann man auf den Knopf zu drücken. Wir werden also eine Weile parallel alt und neu unterstützen und erst im Verlauf weiterer Updates, zu einem späteren Zeitpunkt, Honeygrid in seiner alten technischen Struktur auslaufen lassen.

Dateistruktur eines Themes

Der Shop besteht seit langem für das Layout aus einer großen Menge ineinander verschachtelter Bausteine. Ein “Index” als gesamtes bindet zum Beispiel erstmal den Baustein Header ein, und der Header bindet dann die Bausteine Sekundärnavigation, Logo, Kategorieleiste und so weiter ein.

Die Bausteine selbst liegen als HTML-Templates in mehreren Ordnern verstreut, die Namen der einzelnen Dateien sind dabei historisch über die Jahre gewachsen und nicht mehr wirklich stringent und durchgängig ordentlich angeordnet.

Das wollen wir ändern: Wir werden in Zukunft alle HTML-Templates in einem einzigen gemeinsamen Ordner ablegen, damit man sich weniger durch Dateibäume klicken muss. Wir werden gleichzeitig die Namen der Templatedateien so anpassen, dass logischer ist was darin gelayouted wird. Durch passende, einordnende Namenspräfixe werden zusammengehörige Dateien immer nah beieinander dargestellt. Da die Smartyblöcke in den HTML-Templates bislang ihren Namen direkt aus dem Dateinamen abgeleitet haben, werden diese auch sinnvollerweise neue Namen bekommen müssen.

Weniger fertige HTML-Klötze aus dem Shopkern, mehr Layout im Theme

Es gibt klassisch im Shop einige Stellen, an denen im Shopkern, also im funktionalen Bereich des Shops, fertige größere HTML-Brocken erzeugt werden. Diese schon vollständig im Layout ankommenden Brocken lassen sich dort nur noch sehr begrenzt gestalten, was einige Designideen bislang einfach verdirbt. Wir wollen hier noch sauberer als bislang werden, und den Layout-Prozess stärker als vorher im Theme erledigen, womit dort dann auch viele bisher quasi nicht fassbare Elemente designbar werden.

Beseitigung von Redundanzen

Im Template Ordner gibt es bislang mehrere Ordner für ein und denselben Zweck, zum Beispiel die Ablage von CSS oder Javascriptdateien. Wir möchten viel weiter dahin, dass es für eine Sache genau einen Ort gibt, damit die Spielregeln besser verständlich sind. Wir werden daher Gleiches stärker an gemeinsamen Orten zusammenfassen.

Das Ende von klassischen Usermods

In Shopversionen bis heute stellen Usermods eine Möglichkeit dar, eigene Änderungen veränderungssicher abzulegen. Dabei wird immer relativ “grob geschossen”, da immer größere Templates oder Dateien vollständig durch eigene Kopien ersetzt werden. Mit den Smartyblöcken, die es auch weiterhin geben wird, haben wir schon länger eine bessere Technologie an Bord, die allgemein große Akzeptanz gefunden hat. Wir werden das Prinzip klassischer Usermod Dateien zugunsten der moderneren, viel zielgenaueren Lösung auslaufen lassen, und den Support für klassische Usermods in Themes nicht fortführen.

Childthemes

Die Bedeutung von Childthemes ist, eigene Anpassungen, die man abweichend vom Standard gestaltet hat, an einem eigenen Ort zusammengefasst abzulegen. Statt die Änderungen also mitten in den schon vorhandenen Bausteinen abzulegen, nimmt man sich einen eigenen, neuen Dateiort, und legt dort nur die gewünschten Anpassungen ab. Man kann sich das dann in der Anwendung vorstellen wie einen Stapel: Ganz unten liegt das Standardtheme, dann werden, Schicht für Schicht, die eigenen Kunstwerke draufgelegt. Es zählt dann was am Ende, von ganz oben, zu sehen ist.

Das bedeutet natürlich auch, dass Vererbung mehrfach möglich ist. Für Händlerin Susi könnte zum Beispiel zu Weihnachten gelten: Das Weihnachtstheme verändert Susis Shoptheme, Susis Shoptheme verändert das Standardtheme. Nach Weihnachten kann dann die oberste Schicht wieder abgelegt werden, und der Frühling kann problemlos kommen.

Es wird bei dieser Struktur recht leicht möglich, einen Überblick zu bekommen und zu behalten, welche Veränderungen es in einem Shop gibt, und so neben der Vielfältigkeit auch die Wartung vereinfachen.

Rauswurf von ungestaltbaren Dingen aus dem Templateordner

Im Moment liefert wir beispielsweise Font Awesome im Templateordner aus. Die Symbole aus Font Awesome werden häufig und gern genutzt, die Schriftart selbst wird aber von keinem Designer verändert. Wir reden über einen Hopp oder Top Fertigbaustein. Vielleicht kommen neue, weitere Schriften als eigene Bausteine dazu, aber das ist dann eine andere Geschichte. Es macht also wenig Sinn, Font Awesome an dem Ort abzulegen, wo Gestalter einen Überblick bekommen möchten was es gibt, und stört unnötig die Kompaktheit eines Themes. Font Awesome wird natürlich im Shop vorhanden bleiben, aber an einem anderen Dateiort gelagert werden. Diese Änderung wird genauso auch andere Dinge betreffen, die viele nutzen aber niemand anpasst, so werden wir schlanker werden.

Mehr Grafiken, weniger Schriftsymbole

Wer schon mal versucht hat, im Shop beispielsweise das Warenkorbicon auszutauschen, wird gemerkt haben, dass das relativ schwierig ist. Wir verwenden dafür bisher eine eigene Symbolschrift, die zwar gut für die Ladezeiten ist, aber unglaublich unhandlich. Wir verschenken andersherum ziemlich wenig Performance, wenn wir an der Stelle zu einfacher fassbaren, simplen Grafiken zurückkehren. Wir sehen in der Abwägung der Alternativen dann auch den größeren Nutzen für alle in besserer Gestaltbarkeit, und wollen zugänglicher werden, darum wird die eigene Symbolschrift abgeschafft werden.

Zum Schluss...

Die Erklärungen zeigen euch hoffentlich verständlich den Weg auf, den wir gehen wollen. Ich hab nicht ganz alle technischen Themen beschrieben die drin sind, aber für einen EIndruck sollte das schon mal was bringen. Wir glauben, dass damit in Zukunft noch ganz andere Sachen als jetzt gestalterisch möglich werden. Wir glauben auch, dass es für das gesamte Gambio Ökosystem von handfestem Vorteil sein wird, wenn wir den Theme-Markt weiter beleben können, und nach dem Schweiß für alle dann mehr Auswahl für alle kommt. Das ist unser festes Ziel bei der Sache.

Die technische Doku geht bald auf der Gambio Developer Seite live, da geht’s dann ins Detail.

Wir sind gespannt auf das, was da kommen wird. Was denkt ihr? Fragen können gerne gestellt werden, wir werden versuchen sie gut zu beantworten.

 

Es ist ein wenig schwierig das unmittelbar in einem Testshop zu zeigen, weil man das hier beschriebene nicht direkt sieht. Wenn alles gut ist, sieht es erstmal vorher und hinterher gleich aus. Es geht ja bei der Nummer erstmal um technische Struktur unter allem, und die sieht man eben nicht im Browser.

Man könnte das sehen, was in Folge damit möglich wird, zum Beispiel wie man eigene Templatewünsche schneller und kompakter technisch umsetzen kann, dazu müsste man aber auch selbst fummeln. Dann gibts den Appstore, mit dem man solche technisch neuen Themes installieren kann, der aber aktuell nur wenige erste Sachen enthält, das ist ja alles auch noch neu. Ich glaube da hättest du am Ende aber auch eher ein "Oha! Appstore"-Erlebnis, und würdest wiederum nicht sehen wie sich das ganze hintenrum wirklich abspielt, und das dem Thema Appstore zurechnen...

 

Die Einstellung wird da nicht mehr ewig wohnen, das wird ein GX 3.15 Thema.