Dieser Artikel beschreibt, wie Styles in der ECommerce-Software Gambio2 auch ohne EyeCandy verwendet werden können. Leider war es mir nicht möglich, beim Umzug von Gambio nach Gambio GX2 die Styles einfach zu übernehmen. Daher wechselte ich das Template von EyeCandy zu gambio und führte die unten beschriebenen Änderungen durch.

Die ursprüngliche Datei, die sich zunächst ergeben hat, war ca. 208 KByte groß und enthielt viele Redundanzen (z.B. gleichen Definitionen in unterschiedlichen Hierarchiestufen). Ich habe die Datei auf eine Größe von ca. 110 KByte gebracht, ohne dass die Funktionalität gelitten hat.

Das Ergebnis ist im ConeleK-Shop zu betrachten.

Statisches .css File einlesen

Zunächst muss eine kleine Änderung in der Datei includes/header.php durchgeführt werden, damit die Gambio-Shop-SW die statische .css Datei einliest.

original

<link type="text/css" rel="stylesheet" href="<?php // echo 'templates/'.CURRENT_TEMPLATE.'/gm_dynamic.css.php'.$renew_cache; ?>" />

ersetzt durch:

<link type="text/css" rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/stylesheet.css';&nbsp; ?>" />

Nun wird nicht mehr die Programmdatei gm_dynamic.css.php sondern die Datei /templates/gambio/stylesheet.css aufgerufen.

Eine kleine Version dieser Datei ist schon im System vorhanden, diese reicht jedoch nicht aus, um ein vernünftiges Design zu erstellen.

.css File erstellen

Nun wird ein statisches .css File erstellt. Dieses Stylesheet setzt sich aus dem ursprünglichen Datei templates/gambio/stylesheet.css
und einer selbst erstellten .css Datei zusammen. Diese neue Datei wird an Stelle der ursprünglichen stylesheet.css Datei verwendet. Wir haben hierzu unser altes Stylesheet aus der der alten Gambio Installation benutzt. Diese Datei befindet sich unter:

/cache/__dynamics.css

Sie ist leider für den Menschen nicht gut lesbar, da sie nicht formatiert ist. Wir haben sie mit einem Texteditor (Kate / Kubuntu Linux) und regulären Ausdrücken so bearbeitet, dass sie ein lesbares Format hat. In diese Datei haben wir die Datei templates/gambio/stylesheet.css integriert.

Nun haben wir ein funktionierendes Stylesheet für unseren GX2-Shop, das im wesentlichen auf Styles des alten GX-Shops beruht.

Styles bearbeiten

Wie findet man nun die Bezeichungen der Klassen (class) und IDs (id). Hier hilft ein Addon für den Firefox, der Firebug. Wenn dieser in Firefox installiert ist, kann man jedes Element einer Internet-Seite inzpizieren, Indem man man mit der Maus über das Element fährt und die rechte Maustaste klickt, Im Kontext-Menü, welches dann erscheint, wählt man dann “Inspect Element” und erhält so den Namen der Klasse oder ID. In der Datei lokalen stylesheet.css kann man nun mit Hilfe der Suchfunktion die entsprechende Klasse bzw. ID suchen und die Eigenschaften bearbeiten. Die Datei kann dann nach der Bearbeitung mit Hilfe eines ftp-Programms hoch geladen werden. Wir verwenden hierzu Filezilla stylesheet.css vom Server auf den lokalen Computer heruntergeladen und öffnet sie mit Filezilla mit dem Menüpunkt Maus -> rechts -> edit mit seinem Texteditor, so erscheint bei jeder Änderung / Abspeichern ein Dialog, der fragt, ob man die geänderte Datei hoch laden möchte. Klickt man auf “Yes” geschieht dies an die richtige Stelle.

Man kann nun das Ergebnis der Änderung mit dem Browser anschauen. Nicht vergessen beim Firefox Strg + R zu drücken, um den Cache zu leeren und die Seite neu aufzurufen.

Noch schneller geht es übrigens mit Webdav (Web-based Distributed Authoring and Versioning). Viele lokale Filesystem-Browser beherrschen Webdav. Hat man ein Webdav zu deinem Server und dem Ordner in dem sich das Shopsystem befindet eingerichtet, erscheint dessen Dateisystem im lokalen Filesystem-Browser wie auf dem eigenen Computer. Man kann nun mit einer entfernten Datei, wie z.B. der stylesheet.css arbeiten, wie mit einer Datei auf dem lokalen Computer. Nach Editieren der Datei klickt man auf “Speichern” und die Datei wird direkt auf dem Server geändert und gespeichert.

Download

Unter folgendem Link können Sie das Stylesheet herunterladen. Wir bitten Sie allerdings für Ihren eigenen Style anzupassen und nicht das ConeleK Design zu verwenden. Benennen Sie die Datei in stylesheet.css um: stylesheet_gambio_template_120903.css.zip

Siehe auch

Gambio GX2: Boxen ohne Styleedit platzieren

Dieser Artikel beschreibt, wie die Boxen in Gambio GX2 ohne Styledit platziert werden können.
Leider war es mir nicht möglich, die Platzierung der Boxen einfach aus Gambio in Gambio GX2 zu übernehmen.

Der Vorteil des Templatese gambio und gegenüber des neuen Templates EyeCandy ist, dass Boxen auf beiden Seiten platziert werden können: Links, wo der potentielle Kunde zuerst hin schaut, sollen nur wirklich relevante Informationen stehen. Diese sind das Feld für die Schnellsuche, der Produktkatalog und Links zu diesem Wiki (in dem sich die technischen Informationen für unsere CEK Module befinden) und die Sitemap. Rechts erscheinen Informationen, die nur für Besucher, die in Erwägung ziehen etwas zu kaufen, oder mehr allgemeine Informationen benötigen. Nur das Template gambio bietet die Möglichkeiten von beidseitigen Boxen.

Das Ergebnis kann man sich im Shop von ConeleK ansehen.

Platzierung der Boxen

Die Reihenfolge der Boxen kann in der Datei

/templates/gambio/template_settings.php

verändert werden. Die Information über die Positionierung und den Status der jeweiligen Box finden wir im Array $t_menubox_array .

Im Folgenden ist das Array so wiedergegeben, wie es für unseren Shop definiert wurde:

$t_menubox_array = array(
	'add_quickie' => array('POSITION' => 'gm_box_pos_4', 'STATUS' => 0),
	'admin' => array('POSITION' => 'gm_box_pos_101', 'STATUS' => 1),	// Admin Info
	'bestsellers' => array('POSITION' => 'gm_box_pos_112', 'STATUS' => 0),
	'cart' => array('POSITION' => 'gm_box_pos_107', 'STATUS' => 1),
	'categories' => array('POSITION' => 'gm_box_pos_2', 'STATUS' => 1),	// Kategorien
	'content' => array('POSITION' => 'gm_box_pos_104', 'STATUS' => 1),	// Mehr über ConeleK
	'currencies' => array('POSITION' => 'gm_box_pos_12', 'STATUS' => 0),
	'extrabox1' => array('POSITION' => 'gm_box_pos_22', 'STATUS' => 0),
	'extrabox2' => array('POSITION' => 'gm_box_pos_123', 'STATUS' => 0), 
	'extrabox3' => array('POSITION' => 'gm_box_pos_127', 'STATUS' => 0),
	'extrabox4' => array('POSITION' => 'gm_box_pos_128', 'STATUS' => 0),
	'extrabox5' => array('POSITION' => 'gm_box_pos_131', 'STATUS' => 0),
	'extrabox6' => array('POSITION' => 'gm_box_pos_133', 'STATUS' => 0),
	'extrabox7' => array('POSITION' => 'gm_box_pos_135', 'STATUS' => 0),
	'extrabox8' => array('POSITION' => 'gm_box_pos_137', 'STATUS' => 0),
	'extrabox9' => array('POSITION' => 'gm_box_pos_139', 'STATUS' => 0),
	'gm_bookmarks' => array('POSITION' => 'gm_box_pos_24', 'STATUS' => 0),
	'gm_counter' => array('POSITION' => 'gm_box_pos_20', 'STATUS' => 0),
	'gm_ebay' => array('POSITION' => 'gm_box_pos_8', 'STATUS' => 0),
	'gm_scroller' => array('POSITION' => 'gm_box_pos_31', 'STATUS' => 1),	// Neuigkeiten (Scrollbox)
	'gm_trusted_shops_widget' => array('POSITION' => 'gm_box_pos_142', 'STATUS' => 0),
	'infobox' => array('POSITION' => 'gm_box_pos_103', 'STATUS' => 1),	// Kundengruppe
	'information' => array('POSITION' => 'gm_box_pos_1', 'STATUS' => 1),	// Informationen
	'languages' => array('POSITION' => 'gm_box_pos_10', 'STATUS' => 0),
	'last_viewed' => array('POSITION' => 'gm_box_pos_26', 'STATUS' => 1),
	'login' => array('POSITION' => 'gm_box_pos_102', 'STATUS' => 1),	// Kundenlogin
	'manufacturers' => array('POSITION' => 'gm_box_pos_116', 'STATUS' => 0),
	'manufacturers_info' => array('POSITION' => 'gm_box_pos_125', 'STATUS' => 0),
	'newsletter' => array('POSITION' => 'gm_box_pos_18', 'STATUS' => 0),
	'order_history' => array('POSITION' => 'gm_box_pos_108', 'STATUS' => 0),
	'paypal' => array('POSITION' => 'gm_box_pos_140', 'STATUS' => 0),
	'reviews' => array('POSITION' => 'gm_box_pos_16', 'STATUS' => 0),
	'search' => array('POSITION' => 'gm_box_pos_2', 'STATUS' => 0),
	'specials' => array('POSITION' => 'gm_box_pos_105', 'STATUS' => 1),	// Angebote
	'trusted' => array('POSITION' => 'gm_box_pos_118', 'STATUS' => 0),
	'whatsnew' => array('POSITION' => 'gm_box_pos_106', 'STATUS' => 1),	// neue Artikel
        'yoochoose_also_clicked' => array('POSITION' => 'gm_box_pos_46', 'STATUS' => 0),
        'yoochoose_top_selling' => array('POSITION' => 'gm_box_pos_48', 'STATUS' => 0),
	'ekomi' => array('POSITION' => 'gm_box_pos_144', 'STATUS' => 0)
);

Die Kommentare (//) geben den Titel an, unter welchem der Inhalt in der Seite erscheint.

Die Position der jeweiligen Box wird jeweils durch die Konstante ‘POSITION’ definiert.

Der Status der Box, also ob sie sichtbar oder unsichtbar ist, wird durch die Konstante ‘Status’ festgelegt.

Beispiel:

'categories' => array('POSITION' => 'gm_box_pos_2', 'STATUS' => 1), // Kategorien

In diesem Beispiel handelt es sich um die Box Kategorien. Sie ist eingeschaltet

'STATUS' => 1

und befindet sich auf der linken Seite des Shops an Position 2.

'POSITION' => 'gm_box_pos_2'

Die Boxen für die rechte Seite haben für die Werte ≥ 100.

Die Box Kundenlogin

'login' => array('POSITION' => 'gm_box_pos_102', 'STATUS' => 1),	// Kundenlogin

befindet sich auf der rechten Seite des Shops in der ersten Position 2, da

'POSITION' => 'gm_box_pos_102'

und ist eingeschaltet, da

'STATUS' => 1

Siehe auch