ShopNix

Tagebuch eines Shops auf Basis von osCommerce

Archive for the ‘Layout’ Category

Pseudo-Shops in osCommerce

leave a comment »


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.

Advertisements

Written by spessart

3. September 2008 at 23:46

Checkliste Designanpassungen in Seiten

leave a comment »


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

Written by spessart

15. Juli 2008 at 21:30

Veröffentlicht in Layout

Tagged with , , ,

Design per CSS: das Stylesheet

leave a comment »


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; }

Written by spessart

14. Juli 2008 at 23:01

Veröffentlicht in Layout

Tagged with , , ,

osCommerce Layout und Design

leave a comment »


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.

Written by spessart

14. Juli 2008 at 22:05

Veröffentlicht in Layout, osCommerce

Tagged with , , , ,