ShopNix

Wenn auch das Layout durch Tabellen festgelegt ist, so sind doch wesentliche Elemente im Stylesheet festgelegt.

Einige neue Klassen helfen dabei, das Design nach meinem Gusto zu verändern. Ich beginne mit der Kopftabelle, die ein Hintergrundbild bekommt, das links vom Firmenlogo und rechts von dem Schriftzug „Shop“ überdeckt wird.

TR.logo { height: 75px; width: 100%;
   background-image:url(images/headlineBG.jpg); }

So möchte ich für die Infoboxen der beiden äußeren Spalten eine andere Hintergrundfarbe und führe daher je eine neue Klasse für rechts und links ein:

TD.infoLeft, TD.infoRight { background: #eaeaea; }

Die Überschrift der Boxen soll ein Hintergrundbild bekommen:

TD.infoBoxHeading {height: 27px;
   background-image:url(rot.png); color: #fff; }

Die wichtigsten Meta-Tags fehlen osCommerce. Deshalb habe ich mir eine eigene Klasse geschrieben, die den vorhandenen HTML-Header ersetzt und kontentabhängige Meta-Tags erzeugt.

Der folgende Code-Abschnitt ersetzt den vorhandenen HTML-Header.

// ShopNix.b
  $head = new htmlHeader($request_type);
  $head->show();
// ShopNix.e

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.

osCommerce ist eine Open-Source Lösung für einen Webshop. Ich arbeite schon seit einigen Jahren damit und habe mich jetzt entschlossen, wieder einmal neu aufzusetzen um wieder einen aktuellen, sauberen Softwarestand zu erreichen.

osCommerce bietet von Haus aus einige Features mehr, als ich benötige. Andererseits fehlen im Standard einige Dinge, die meine Kunden wünschen. Bei einem Open-Source System habe ich die Freiheit, diese Änderungen nach eigenem Gusto durchzuführen.

Wie jeder Fachmann weiß, wird die Qualität einer Software durch häufige Anpassungen nicht unbedingt besser. Andererseits sind Änderungen aus Sicherheitsgründen und zur Anpassung an die Geschäftsprozesse der Kunden notwendig.

Um wieder einmal einen definierten Stand zu erreichen, habe ich nun für einen neu einzurichtenden Shop den osCommerce-Standard wieder einmal neu aufgesetzt und ziehe nun das Design für meinen Kunden sowie einige Extras nach. Diesen Vorgang will ich hier beschreiben.