Vorschau auf OXID eShop 6 und das Flow-Theme


Für diese Woche wird das Patch-Release 4.9.8/5.2.8 des OXID eShops erwartet. Die kommende „größere“ Updateversion des Shopsystems 4.10/5.3 ist bereits seit der vergangenen Woche als Betaversion erhältlich. Letzteres Release ist deswegen etwas Besonderes, weil es das neue Theme Flow enthalten soll. Flow ist OXIDs Antwort auf die hohe Nachfrage nach einem sich responsive verhaldendes, also einem sich an das Endgerät anpassendes Theme handelt.

Flow

Mit Flow soll OXID eShop bereits demnächst moderne Anforderungen an Online-Shops erfüllen, die auf einer Vielzahl an Geräten dargestellt werden müssen. Im Repository liegt Flow für OXID eShop 4.10/5.3 sowie die noch in der Entwicklung befindliche Version 6 bereit. Flow, wie es derzeit im Repository liegt, präsentiert sich selbst als Version „1.0.0-Beta“. Die erste stabile Version wird wahrscheinlich mit OXID eShop 6 erscheinen. Bis dahin sollten sich Shop-Betreiber und Agenturen darüber im Klaren sein, dass Flow noch nicht für den produktiven Einsatz vorgesehen ist. Damit Flow in Betrieb genommen werden kann, ist für Shop-Versionen < 6.x das Einspielen der mitgelieferten Datei setup.sql erforderlich. Hierfür kann ganz einfach der Bereich Service→Tools genutzt werden. Entwickler benötigen außerdem Grunt, für das folgende Prozedur notwendig ist (unter Linux):

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo npm install -g grunt-cli
cd /var/www/htdocs/source/Application/views/flow/
sudo npm install
grunt

Dabei entspricht /var/www/htdocs/source dem Rootverzeichnis des Shops (in dem sich die Datei config.inc.php befindet).

image

Was Verzeichnisstruktur und Dateiaufbau angeht, so haben sich die Macher ganz offensichtlich stark an Azure orientiert – damit behält Flow trotz dessen, dass es ein neues Theme ist, große Teile der Kompatibilität zu Azure bei. Der Vorteil liegt auf der Hand: Modulentwickler können sich auf die bekannte Struktur verlassen und wer Azure bereits gut kennt, sucht auch bei Flow nicht lange, um Änderungen vorzunehmen (natürlich nur im Child-Theme!).

image


Im Gegensatz zu Azure fällt bei Flow auf, dass die Views weitaus mehr Kommentare enthalten, die das Verstehen der Struktur vereinfachen.

Ein wenig Arbeit müssen Modulentwickler natürlich trotzdem investieren: vorhandene Styles müssen so angepasst werden, dass sie mit beiden Themes funktionieren bzw. gut aussehen. Gegebenenfalls hilft hier eine Weiche in den Views oder in einem Getter für das Stylesheet.

Auf dem Weg zu OXID eShop 6

Wer sich die Inhalte auf GitHub ansieht, wird feststellen, dass im Gegensatz zu früheren Versionen einige Verzeichnisse mit Großbuchstaben bezeichnet sind, im Rootverzeichnis sind das Application und Core. Hintergrund ist die Annäherung an den Coding-Standard PSR-2 (PHP Standard Recommendation 2: Coding Style Guides).

Die Änderungen belaufen sich auf weitaus mehr als nur geänderte Verzeichnis- und imageKlassennamen. Unter den alten Namen sind mittlerweile nur noch “Stellvertreter” aufzufinden, z.B. dient account.php nur noch der Abwärtskompatibilität, um auf AccountController.php zu verweisen. So bleiben alte Module mit den neuen Klassennamen kompatibel.

In den neu aufgebauten Klassen fallen außerdem die zuoberst verwendeten Namespaces auf – sie beschränken die Verwendung von Objekten auf den gegebenen Namensraum.


Ein Blick in die Zweige des Repositorys verrät außerdem weitere Punkte, an denen gearbeitet wird, etwa das Austauschen von ADOdb Lite durch Doctrine oder den vollständigen Weggang von der Datenbankengine MyISAM.

Eine finale Aussage ist hier natürlich noch lange nicht zu treffen, aber wer sich dafür interessiert, kann ja einmal im öffentlichen Repository schauen, was auf den Zweigen passiert.

Der Shop-Admin wurde nach langer Zeit einer (derzeit noch) optischen Erneuerung unterzogen und kommt nun im Flat-Design daher.

image

Die Versionsbezeichnung wurde zum Zeitpunkt der Entstehung dieses Beitrags einfach nur noch nicht nachgezogen.


5 Gedanken zu „Vorschau auf OXID eShop 6 und das Flow-Theme

  1. Tja, als Front-End-ler bin ich mit Flow sehr unglücklich. Leider wurde bei der Entwicklung des neuen Themes nicht an eine globalere Lösung gedacht. Für das Theme wurden Less, Grunt und Bootstrap benutzt. Das kann den einen oder anderen Entwickler doch in seine Möglichkeiten einschränken. Der ganze DOM ist mit Bootstrap-Classen „beschmutzt“. Will man ein richtig sauberen Code haben oder gar andere Framework benutzen kommt man nicht drum-herum als alle Templates zu überschreiben. Also die Templateableitung ist unbrauchbar. Auch die Realisierung der mobilen Darstellung ist nicht das Wahre – durchdachte Arbeit ist was anderes. Auch wenn Flow eine beta-Version ist, man sieht deutlich in welche Richtung die Entwicklung geht.

  2. Vlad, man wird es nie allen recht machen können. Wir sind für konstruktive Kritik dankbar. Was ist dein konkreter Verbesserungsvorschlag?

  3. Hallo zusammen, habe vor kurzem mit Vlad über das neue Theme geredet und bin auch seiner Meinung.
    Der größte Kritikpunkt aus meiner Sicht ist:
    * DOM ist mit Bootstrap-Classen „beschmutzt“
    -> Ein Blick auf den Quelltext zeigt einem direkt, dass hier mit Bootstrap gearbeitet wurde. Das ist an sich kein Problem, allerdings ist Code so oft schlechter lesbar. Auf diesem Gebiet hat sich gerade in letzter Zeit vieles getan (= verbessert): Man kann layout-spezifische Dinge in den Stylesheets definieren und den HTML-Code sauber halten.
    Beispiel: https://github.com/OXID-eSales/flow_theme/blob/e51a152c318567b13cf9d42f969424e6fb5f0400/tpl/layout/page.tpl#L36-L45
    Mit einem Blick auf den Code ist mir nicht sofort ersichtlich, was dort denn an einigen Stellen gemacht wird. Wenn man sprechende Klassenname verwenden würde, dann ist der Code einfach viel einfacher zu lesen und man kann so auch z.B. einfacher mit Selenium auf die einzelnen Elemente der Seite zugreifen. Also: statt ‚class=“col-xs-12 col-md-3″‚ lieber ‚class=“sidebar-wrap-left“‚ oder so verwenden. Die Spaltenangaben können gerne ins Stylesheet wandern, siehe https://www.sitepoint.com/5-useful-sass-mixins-bootstrap/#mixin-make-column oder https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/mixins/_grid.scss#L22-L29
    Wenn man dies strikter umsetzen würde, dann ist die Entwicklung von Child-Themes viel einfacher. Was wenn jemand lieber Foundation oder sonstwas nutzt?

    Eine Sache die ich auch nicht ganz verstehe:
    * Warum wird Less verwendet?
    -> Ist vielleicht eher Geschmackssache, aber es zeigt sich ein sehr deutlicher Trend in Richtung SCSS (https://twitter.com/mdo/status/591366122823294976)

    Ich hoffe, dass im Hinblick auf diese beiden Punkte noch einiges ändern wird, ist ja noch eine beta.

  4. Nach meiner Kenntnis hat Oxid mit dem Roxive Theme von Digidesk einen Deal gemacht, indem das Flow-Theme daraus abgeleitet wurde.
    Die nun schon ein paar Jahre alte Grundkonstruktion basiert auf LESS usw., weil es damals der Trend war aber inzwischen wohl schon outdated wird, was ich aber nicht als entscheidenden Punkt sehe. Dennoch hat Oxid beim Responsive-Design jahrelang verschlafen.
    Ehrlich gesagt ist Oxid ein Mercedes unter der Haube aber nach aussen hin (Frontend und Backend) ist es nie einer gewesen – leider!

  5. Lohnt sich denn ein Test mit der 6er Version wirklich? Mir gehts nicht um Template- oder Css-Gedoehns oder irgendwelche Frameworks, das ist schnell geschrieben, wenn man sich auskennt: mir gehts um Geschwindigkeit und die Funktionalitaeten „unter der Haube“. Ein Test mit der 4er C-Edition hat mich zweifeln lassen, ob ich Oxid ueberhaupt verwende, aber ein Fremdanbieter hat uns an unser Portal eine externe Erweiterung drangehaengt, die sich als Oxid-Shop entpuppt hat. Schon der Zugriff auf den Admin-Bereich mit fuerchterlich langen Wartezeiten, Time Outs ohne jede Nachvollziehbarkeit, warum das so ist, laesst mich einen Test mit der 6er Version gar nicht erst in Betracht ziehen. Ueberzeugt mich!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.