ShopNix

Der osCommerce-Shop hat ein 3-spaltiges Layout. Die beiden äußeren Spalten sind von Infoboxen bevölkert.

• Kategorien
• Hersteller
• Neue Produkte
• Schnellsuche
• Informationen
• Warenkorb
• Bestellübersicht
• Herstellerinfo
• Benachrichtigungen
• Weiterempfehlungen
• Angebote
• Bewertungen
• Sprachen
• Währungen

Nicht alle diese Boxen sind gleichzeitig sichtbar. Das ist abhängig vom aktiven Programm, oder davon, ob der Kunde angemeldet ist oder nicht. Einige davon halte ich für überflüssig, andere werde ich noch einfügen. Deshalb möchte ich diese Boxen vom Backend aus ein- bzw. ausschalten können. Eigentlich nicht besonders schwierig, ich habe eine neue Gruppe zur Konfiguration hinzugefügt und für jede der Boxen (ausgenommen die Kategorien) einen Schalter eingefügt.

Der Standard des osCommerce Shops zeigt in der Produktliste nur den Namen des Produkts, die Beschreibung fehlt. Da die Inhalte der Produktliste dynamisch zusammengesetzt wird, ist der richtige Punkt für eine Änderung nicht leicht zu finden.

Meine Lösung besteht in einer kleinen Ergänzung in index.php und einer weiteren im Anzeigemodul modules/products_listing.php. Bei dieser Gelegenheit ändere ich auch die Formatierung. Suchmaschinen bewerten Überschriften höher als normalen Text. Deshalb setze ich den Produktnamen als Überschrift mit eigener Klasse im Stylesheet.

Mit dem xSell-Modul können Zubehöre oder Verkaufsstücklisten zu beliebigen Artikeln angelegt werden. Im Shop werden diese Artikel dann unterhalb der Artikelbeschreibung und der Bestellbuttons in der Detailansicht des Artikels angezeigt.

Im Standard wird an dieser Stelle auch das Modul „Andere Kunden haben gekauft:“ (also_purchased.php) eingeblendet. Ich habe für diese Zwecke im Verwaltungsbereich eine neue Konfigurationsgruppe angelegt, in der solche Module ein- und ausgeschaltet werden können.

Die Contribution xSell enthält auch Componenten für das Backend, die ich vorläufig zurückstelle. Außerdem ist eventuell noch eine kleine Überarbeitung fällig, weil mir die Tabellenstruktur nicht behagt. Ich würde gern über die Indizes sicherstellen, daß keine Duplikate vorkommen können.

Beim Test im Shop je einen Artikel mit und ohne Produktoptionen kurz antesten. Für Artikel mit Optionen muß eine Weiterleitung auf den xSell-Artikel erfolgen. Nur so kann der Kunde seine Option wählen.

Es ist einfach lästig, eine ganze Reihe von Buttons in unterschiedlichen Farben zu erstellen und mit Texten zu versehen. Ich habe daher einen Satz Buttons in Grautönen erstellt und färbe die jeweils nach Bedarf ein. Die Beschriftung bringe ich mit Hilfe eines kleinen Perl-Scripts an, das inzwischen eine ganze Reihe von Feinheiten und Sprachen beherrscht.

Das Ergebnis sieht zum Beispiel so aus:

Muster für einen generierten Button

Inzwischen beherrscht das Programm 7 Sprachen:

• deutsch
• englisch
• französisch
• finnisch
• italienisch
• dänisch
• norwegisch

Polnisch und spanisch ist in absehbarer Zeit zu erwarten, um japanisch habe ich mich bisher erfolgreich gedrückt.

Als Seite bezeichne ich jede Datei, die direkt ausgeführt/angezeigt werden kann. Der Ausgangspunkt liegt per Default im Verzeichnis catalog, Startseite ist catalog/index.php. Die folgende Liste zeigt alle Seiten, die wegen des Designs angefasst werden müssen.

1. index.php 1)
2. account.php 2)
3. account_edit.php
4. account_history_info.php
5. account_history.php
6. account_newsletters.php
7. account_notifications.php
8. account_password.php
9. address_book.php
10. address_book_process.php
11. advanced_search.php
12. advanced_search_result.php
13. checkout_confirmation.php
14. checkout_payment_address.php
15. checkout_payment.php
16. checkout_shipping_address.php
17. checkout_shipping.php
18. checkout_success.php
19. conditions.php
20. contact_us.php
21. cookie_usage.php
22. create_account.php
23. create_account_success.php
24. info_shopping_cart.php
25. login.php
26. logoff.php
27. password_forgotten.php
28. privacy.php
29. product_info.php
30. product_reviews_info.php
31. product_reviews.php
32. product_reviews_write.php
33. products_new.php
34. reviews.php
35. shipping.php
36. shopping_cart.php
37. specials.php
38. ssl_check.php
39. tell_a_friend.php

1) In index.php kommt die zentrale Tabelle in Abhängigkeit von Parametern dreimal vor. Das externen File includes/sx_header.php kann daher nicht verwendet werden.

2) account.php enthält 3 Zeichnungen, die ich nicht mag. Die Zeilen finde ich durch eine Suche nach width=“60″.

Nacharbeit erforderlich Erledigt

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.