Archiv für die Kategorie ‘Layout’
Pseudo-Shops in osCommerce
Ein Kunde wünscht verschiedene Bereiche für die unterschiedlichen Warengruppen seines Shops. Eine funktionale Änderung ist nicht erwünscht, die Warengruppen sollen nur optisch abgesetzt und die Kategorien sollen dadurch übersichtlicher werden. Als mögliche Lösung bietet sich an, die erste Kategorie-Ebene für diesen Zweck zu verwenden.
Prinzipiell gibt es dazu einige Contributions, z. B.:
http://www.oscommerce.com/community/contributions,1730
oder
http://www.oscommerce.com/community/contributions,2802
Wer sich schlau machen möchte, kann nach Multi-Shop, Multi-Store und Great Categories Ausschau halten. Unter diesen Suchbegriffen sollte sowohl im Forum als auch in den Contributions etwas zu finden sein.
Die Contributions sind mir nicht ganz geheuer, unter anderem deshalb, weil sie scheinbar seit länger Zeit nicht mehr bearbeitet wurden. Daher versuche ich eine eigene Lösung. Eine erste Suche über die Sourcen nach dem Begriff „categories_name“ ergibt, daß die SQL-Abfragen dazu nur an wenigen Stellen vorkommen.
includes/boxes/categories.php includes/application_top.php includes/functions/general.php index.php
Das sollte zu schaffen sein, zumal index.php ohnehin noch zur Überarbeitung ansteht.
Nach längerer Sucherei ist das Problem mit sehr geringen Eingriffen zu lösen. Zuerst gibt es wieder einen Parameter in der Konfiguration, SNX_OPTION_PSEUDO_SHOPS kann die Werte ‘True’ oder ‘False’ annehmen.
Dann füge ich in includes/header.php eine zusätzliche Tabelle ein. Hier soll die erste Kategorieebene in Form von Karteireitern dargestellt werden. In includes/boxes/categories.php blende ich nun erste Kategorieebene aus, indem ich die Ausgabe der entsprechenden Zeilen unterdrücke.
Auf der Administrationsebene ändert sich nichts, da die Kategorien lediglich optisch anders angeordnet sind.
So ist mit einem Bruchteil des Codes der oben angeführten Contributions die Anforderung umgesetzt.
Checkliste Designanpassungen in Seiten
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.
- index.php 1)
- account.php 2)
- account_edit.php
- account_history_info.php
- account_history.php
- account_newsletters.php
- account_notifications.php
- account_password.php
- address_book.php
- address_book_process.php
- advanced_search.php
- advanced_search_result.php
- checkout_confirmation.php
- checkout_payment_address.php
- checkout_payment.php
- checkout_shipping_address.php
- checkout_shipping.php
- checkout_success.php
- conditions.php
- contact_us.php
- cookie_usage.php
- create_account.php
- create_account_success.php
- info_shopping_cart.php
- login.php
- logoff.php
- password_forgotten.php
- privacy.php
- product_info.php
- product_reviews_info.php
- product_reviews.php
- product_reviews_write.php
- products_new.php
- reviews.php
- shipping.php
- shopping_cart.php
- specials.php
- ssl_check.php
- 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
Design per CSS: das Stylesheet
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; }
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.