osCommerce Layout und Design
Das Layout in osCommerce basiert auf Tabellen. Es beginnt mit einer Kopfzeile, die auf alle Fälle an die Wünsche des Betreibers angepasst werden muß. Im einfachsten Falle wird nur das Logo ersetzt, in der Regel wird etwas mehr Arbeit erforderlich sein. Diese Kopfzeile liegt in catalog/includes/header.php innerhalb der ersten Tabelle des Codes und kann komplett ersetzt werden. Die standardmäßig vorhandene Funktionalität (graphische Links auf Kundenkonto, Warenkorb und Kasse) ist direkt darunter im “headerNavigation” ein zweites Mal vorhanden.
Der “headerNavigation” (ich nenne ihn so, weil die zugehörige Klasse des Stylesheets so benannt ist) ist eine weitere, einzeilige Tabelle, die in der linken Spalte den aktuellen Pfad, und rechts Textlinks zu Kundenkonto, Warenkorb und Kasse anzeigt. Alle notwendigen Anpassungen zu dieser Zeile kann ich im Stylesheet vornehmen.
Das weitere Layout ist über die Einstiegsseiten des Shops verteilt. Es hat drei Spalten, links finden sich zunächst Elemente zur Navigation, wie z.B die Kategorien (Warengruppen) und die Suche, rechts der Warenkorb und diverse Gimmicks. Der größere, mittlere Bereich ist für Listen, Produktbeschreibungen und ähnliche Funktionalitäten reserviert und wird entsprechend der Aktivitäten unserer Kunden ausgetauscht.
Weil ich künftige Änderungen nicht mehr in jedem Einzelprogramm vornehmen will, erstelle ich eine eigene Datei und lege dort einige grundlegende Einstellungen in Konstanten fest. Diese Konstanten baue ich in die Einzelprogramme ein.
/**
/catalog/includes/design.php
neue Datei, enthält die Einstellungen
**/
define('SX_MAIN_TABLE',
'border="0" width="100%" cellspacing="0" cellpadding="0"');
/**
/catalog/product_info.php
Produktseite des Shops, hier wird die Konstante verwendet
/**
<table <?php echo SX_MAIN_TABLE; ?> >
Das ist keine komplexe Sache, muß aber bei allen Einzelprogrammen des Shops gemacht werden. Die Tabellen finde ich in den Programmen in der Nähe der Kommentare “left_navigation”, “body_text”, “right_navigation”.
Eine weitere Änderung, die ich generell vornehme ist die Entfernung der Strichmännchen in den Überschriften. Zu finden sind sie in der Zeile mit der Konstanten “HEADING_IMAGE_WIDTH”, die ich auskommentiere.