Readme – eComStyle.de Responsive Theme: Designswitcher

eComStyle.de Responsive Theme: Designswitcher

Geeignet für Shopversion:

OXID eShop CE/PE 4.8.x (oder höher)

Geeignet für folgende Themes:

Nur eComStyle.de Responsive Theme

Modul installieren und aktivieren:

  1. Das Modul Designswitcher wird nur zusammen mit dem eComStyle.de Responsive Theme ausgeliefert und befindet sich im copy_this – Ordner des Themes.
  2. Beim Hochladen des Responsive-Themes wird somit automatisch auch das Modul Designswitcher mit in den Shop in den Ordner /modules/ecomstyle.de/ecs_designswitcher/ hochgeladen.
  3. Im Shopadmin unter Erweiterungen/Module aktivieren Sie bitte das neue Modul, anschließend bitte den Ordner tmp und tmp/smarty leeren.

Modul updaten:

  1. Legen Sie bitte zunächst eine Datensicherung aller Dateien und der Datenbank an.
  2. Deaktivieren Sie dann unter Erweiterungen/Module das Modul für die Dauer des Updates.
  3. Löschen Sie dann das gesamte vorhandene Modul per FTP im Ordner /modules/ecomstyle.de/ecs_modulname
  4. Kopieren Sie das neue Modul im binären Transfermodus gem. obiger Installationsanleitung in den Shop und aktivieren es unter Erweiterungen/Module.
  5. Anschließend bitte den Ordner tmp und tmp/smarty leeren.

Design anpassen mit dem „Designswitcher“:

In den Moduleinstellungen unter Erweiterungen/Module/Designswitcher/ im Einstell.-Tab werden folgende Möglichkeiten der Anpassung des eComStyle.de Responsive Themes angeboten:

Grundeinstellungen

  • Design auswählen (Wählen Sie per Dropdownmenü aus 15 verschiedenen Bootstrap-Designs).
  • Navigationsmenue alternativ unter dem Shoplogo. Haftet dann beim Scrollen am oberen Bildschirmrand.
  • Welcometext auf der Startseite ueber dem Footer statt unter dem Bannerslider platzieren.
  • Sidebar global aktivieren.
  • Sidebar auf diesen Seiten zeigen… (PHP-Klassen eintragen, siehe hier unter dem grünen Schalter, nur eine Klasse je Zeile, keine Satzzeichen).
  • Partnerbox in der Sidebar anzeigen oder im Footer.
  • Varianten als Dropdownmenue (check) oder als Button anzeigen (uncheck).
  • Im Miniwarenkorb: Zur Kassse-Button ausblenden (check). Es wird statt dessen ein „Weiter Shoppen“ – Button gezeigt.
  • Einstellungen-Popup aktivieren (check) (in der linken unteren Ecke wird ein Zahnrad-Symbol angezeigt, welches ein Popup mit Sprach- und Währungseinstellung sowie einigen weiteren Buttons öffnet).
  • Artikel-Attribute rechts neben der Langbeschreibung zeigen (check) oder in einen Tab (uncheck) (sollten die Attribute zu lang sein und nicht mehr sauber in die Tabelle passen, bitte diese Option deaktivieren).
  • Artikel-Zubhör in eigenen Tab zeigen (check) oder unter den Tabs (uncheck).
  • Artikel-Bewertungen in den Listenansichten zeigen (check).

Eigene bootstrap.css

  • Integration der ecs.css deaktivieren (check). Die ecs.css enthaelt einige fuer den Shop erforderlichen CSS, die nicht in der originalen bootstrap.css enthalten sind. Nur deaktivieren, wenn Sie wissen, was Sie tun (nur aktivieren, wenn Sie den Inhalt der ecs.css selbst in eine eigene CSS-Datei integriert haben).
  • Name einer eigenen bootstrap.css Datei im Format dateiname.css. Datei im Ordner css/eigene_css ablegen (lessPHP4OXID-Integration ist vorranging) (ersetzt ein unter Grundeinstellunegn gewähltes Design, ein mit lessPHP4OXID integrierte Datei hat jedoch stets Vorrang).

Nightstyle Einstellungen

  • Nachtmodus aktivieren (check) oder deakivieren (uncheck).
  • Für den Nachtmodus: Name einer eigenen CSS Datei im Format dateiname.css. Datei im Ordner css/eigene_css ablegen (Eine Standard-CSS-Datei im dunklen Night-Style ist bereits eingetragen).
  • Nachtmodus aktiv ab Stunde, zB. 22
  • Nachtmodus aktiv bis Stunde, zB. 6

lessPHP4OXID verwenden:

Less ist eine Programmiersprache, mit deren Hilfe man eine CSS-Datei erstellen kann. Auf der Website selbst kommt Less nicht zum Einsatz, sondern nur das Ergebnis, also die erzeugte CSS-Datei. Diese CSS-Datei unterscheidet sich nicht von jeder anderen, herkömmlichen CSS-Datei.

Im Modul Designswitcher ist gleichzeitig ein less-Compiler integriert, mit dessen Hilfe Sie das Themedesign mit Variablen anpassen, eine maximal komprimierte CSS-Datei erstellen und automatisch im Theme einbinden können.

In der linken Navigation können Sie lessphp4OXID unter eComStyle.de/Tools öffnen. Beim ersten Aufruf klicken Sie bitte zuerst auf „Angaben speichern“, damit die voreingestellten Standardpfade aktiviert werden.

Unter „Pfad zur Less-Datei“ muss stets der Pfad zur bootstrap.less eingetragen werden.
Im Feld „Ausgabepfad der CSS-Datei“ können Sie, falls gewünscht, den Pfad beliebig ändern. Auch den Dateinamen können Sie ändern, wenn Sie zB. mehrere Designs erstellen möchten.

Im Ordner /modules/ecomstyle.de/ecs_designswitcher/less/less finden Sie verschiedene less-Dateien, die Sie ggf. anpassen können.
I.d.R. genügt es, die Datei variables.less anzupassen, um das Shopdesign zu individualisieren. In der variables.less können Sie zB. ganz einfach die Shop-Grundfarben und weitere Standardeinstellungen mit geringsten Aufwand ändern.

Nachdem Sie die geänderte(n) less-Datei(en) wieder gespeichert und hochgeladen haben, klicken Sie in Schritt 2 auf „Neue CSS-Datei erzeugen“. Aus den verschiedenen less-Dateien wird nun eine (minimierte) CSS-Datei erzeugt, die alle Styles für den Shop erhält.

Sofern Sie die Checkbox in Schritt 1 aktiviert (und abgespeichert) haben, wird die neue CSS-Datei automatisch im Theme eingesetzt, die neues Styles sind direkt im Shop sichtbar. bei aktivierter Checkbox wird diese CSS Datei immer bevorzugt verwendet.

Sollte die neue Datei nicht generiert werden können und eine Fehlermeldung im Popup erscheinen, prüfen Sie bitte die Schreibrechte des Ordners, in den die CSS-Datei geschrieben werden soll.

[text-blocks id=“readme-modul-ende“]