Implementierung der PHP Applikationen in RW – osCommerce

Von den zwei PHP Applikationen die ich in der letzten Zeit in eriner mit RW gebauten Homepage implementiert habe, hat mir oscommerce am wenigsten Probleme bereitet. Vielleicht auch dass ich zufällig auf dem “richtigen” Wie gestossen bin. Ich hatte nach Templates in deren Datenbank gesucht und bin auf Simple Template System so dass von hier an nicht mehr schwer gewesen ist. Nachdem ich mir den Code angeschaut habe was dieses STS bereitstellt dann war es einfach.
Ich muss aber davor auf etwas aufmerksam machen:
Ich kenne so gesehen oscommerce gar nicht. Ich weiss nicht welche Plugins, Addons etc. es gibt und weiss auch nicht in wie weit sie untereinander kompatibel sind. Ich habe oscommerce in der Version osCommerce Online Merchant v2.2 Release Candidate 2a und STSv4.5.8 for all osC 2.2 versions installiert und das ist alles. Ob diese Zusammensetzung weiter verfolgt und weiterentwickelt wird, weiss ich nicht. An der Nummer der STS Version scheint es dass die Entwickler immer noch aktiv sind und sogar uptodate.
Da ich einiges über die Problematik der Implementierung von PHP Applikationen schon in dem Beitrag davor gesschrieben habe http://costel-marian.de/wordpress/?p=11 würde ich jetzt anfangen.

1. Zuerst in RW erledigen:
In einer Projektdatei in der Stelle der Navigation wo später der Shop kommen soll eine HTML Seite erstellen.
Einen Namen für die Navigation geben (bei mir ist einfach Testshop, da ich nichts zu verkaufen habe) einen Ordername zuweisen. Der Shop von osCommerce ist in dem Ordner catalog (der später bei der Installation auf dem Server kommen wird). Ob dieser Name auch weiterhin bleiben soll oder vielleicht shop oder anderswie heissen soll bleibt euch überlassen. Allerdings dieser Ordnername muss sowohl hier festgelegt werden als auch später bei der Installation von osCommerce dem Ordner catalog gegeben werden!
Als Dateiname bekommt diese Seite index.php.

Die Seite soll alle Merkmale (Farben, Aussehen etc) bekommen die später die Shopseite auch haben soll. Man kann sicherlich die Sidebars der Shop in der Sidebar der Seite später tun, man kann nur eine Sidebar des Shops in die Sidebar der Seite tun und dann auf der Seite den content und noch eine Sidebar. Die Screenshots von http://www.oscommerce.com/solutions/oscommerce zeigen in etwa welche Teile und wo sie auf der Seite kommen. Entprechend muss die Breite der Seite gewählt werden, mit oder ohne Sidebar etc.
Als Text in der Seite einfach das Wort Test schreiben.

Nach diesen Vorbereitungen, muss publiziert werden.

Nach dem Publizieren, die Datei index.php aus dem Ordner (Name wisst ihr besser) downloaden.

In RW diese Seite jetzt deaktivieren und nicht mehr in dem Menü zeigen lassen.

Den Ordner vom Server kann man jetzt löschen.

2. Die Installation von osCommerce
1. die Applikation (hier in der Version osCommerce Online Merchant v2.2 Release Candidate 2a) von http://www.oscommerce.com/solutions/downloads runterladen.
Nach dem Entpacken den Ordner catalog auf dem Server uploaden.
Wie oben erwähnt, u. U. den Ordner umbenennen!
Es gibt einige Sachen bei der Installation zu beachten (Ordner die bestimmte Rechte bekommen sollen etc). Bitte dazu die Dokumetiation lesen.

Für die Installation habe ich eine Anmerkung:
Die Installation ist einfach aber leider fehlt der Installation die Möglichkeit einen Prefix für die Datenbanktabellen. Diesen Prefix wäre enorm wichtig wenn man mit der gleichen Datenbank zwei Shops betreiben würde. Und für die Ordnung allgemein in der Datenbank es ist gut dass die Tabellen jeder Applikation einen Prefix bekommen.
Es gibt allerdings als Tipp einen Beitrag in dieser Richtung.
Es funktioniert zwar aber bei mir funktionierte STS (das ist ein Modul für osCommerce das auch installiert werden muss um das Aussehen des Shops an die Homepage zu erstellen) NICHT.
Ich habe nach den Gründen nicht gesucht sondern habe eine frisch Datenbank genommen und die Installation wie normal durchgeführt. Leider hatte ich keine Zeit in dem Code mich durchzuwühlen. Vielleicht geht es bei jemand anderen oder in einer neuen Version von osCommerce und STS.
2. das Modul STS von http://www.oscommerce.com/community/contributions,1524 runterladen und installieren. Die Installation ist eigentlich das manuelle Uploaden von bestimmten Dateien in bestimmten Stellen des Ordners catalog.

3. Das Einrichtenn von osCommerce
Hier weisst jeder am besten wie er heisst, wo er woht, was er zu verkaufen hat, mit wieviel etc, etc, etc.
Bei der Einrichting muss jetzt aber STS “eingeschaltet” werden (nur durch das Kopieren davor greift er noch nicht und tut was er tun muss). Dafür sind die Bilder in der Dokumentation die zeigen wie und welche Schalter zu stellen sind aufschlussreich.
Auch nach dem Einschalten des STS hat sich fast nicht getan auf der Seite des Shops bis auf einem neuen Text in dem oberen Teil: This is the default template.

4. Wie STS den Quellcode umformatiert
STS greift auf eine HTML Seite die in einem der Ordner die in catalog/includes/sts_templates sich befindet. Diese Datei und der Ordner wurde bei der Einrichtung von STS festgelegt.
Ich würde vorschlagen den Ordner catalog/includes/sts_template/test umzubenennen und als Name der Name euerer RW-Vorlage zu geben (sticht besser ins Auge wenn man auf dem Server danach sucht ;-) )
Der Name der Datei kann man so lassen (jetzt weiss man schon wo man ist und was dadrin sich befindet). Allerdings diesen Ordnername muss in STS eingegeben!

Öffnet man die Datei aus diesem Ordenr (ich nehme die Datei sts_template.html) ist man überrascht wie einfach aufgebaut ist und was man alles dadrin findet:
Ein <head> Teil und in <body> einige Tabellen.
Der Quellcode der der Browser von der Seite zeit ist aber voll von anderen Daten.
STS “bindet” mit dem Dollarzeichen und das Wort danach die bestimmten Bereiche der Seite:
$catmenu z.B ist der Auswahlpopup von der rechten Seite. Dadrunter die Kategorien sind mit $categorybox, die Hersteller mit $manufacturerbox bezeichnet. Etc, etc, etc. Wohl die Tabelle wo diese drei (und andere dannach) ist die linke Sidebar der Seite. Diese Tabelle ist in eine übergeordnete Tabelle die drei Zeilen hat: linke Sidbar, Content und rechte Sidebar. Das schöne ist der Content: $content :-) (das Paragraph This is the default template kann man natürlich löschen).

Dann nichts wie hin in eine RW Seite bringen.

5. Die Daten einer RW-Seite ins Spiel bringen
1. Gleich unter der deaktivierten HTML Seite in RW jetzt eine Weiterleitungsseite erstellen.
Die gleiche Angaben für den Seitentitel, Ordnername und Dateiname die einmal die HTML Seite hatte bei dieser Seite eingeben.
Und in der Seiteneinstellungen/Plugin-Parameter (der letzten Icon in diesem Seiteneinstellungen-Fenster) wird muss der vollen Pfad zu dem Shop eingegeben (etwas in der Richtung http://www.deine_seite.de/shop/index.php)

Publizieren.

2. Öffnet man die index.php die man vom Server runtergeladen hat, muss man hier nur die Worte mit dem Dollarzeichen aus der Datei verteilen.

Aber zuerst etwas über den !DOCTYPE
Meistens ist so dass die Vorlagen von RW einen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

haben.
Der von osCommerce ist

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Ich habe nicht gecheckt aber ich habe den

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

benutzt. Ich bin noch nicht dazugekommen zu sehen ob der Code valid ist.

Zwei Sachen aus dem

<head>

müssen rein.
Einmal <head> selber muss mit <html $htmlparams> geändert werden. Und in dem head der Datei muss auch noch

<link rel="stylesheet" type="text/css" href="stylesheet.css">

eingefügt werden.

Um mal schnell ein Erfolgserlebnis zu haben, zumindest bis zu einer späteren Entschlackung oder Umverteilung, würde ich in der Sidebar der Datei eine Tabelle erstellen und dadrin alle Boxes aus dem Shop die links und rechts sind reinwerfen:

<table border="0" cellspacing="0" cellpadding="1">
	<tr><td>$cartbox</td></tr>
	<tr><td>$maninfobox</td></tr>
	<tr><td>$orderhistorybox</td></tr>
	<tr><td>$bestsellersbox</td></tr>
	<tr><td>$reviewsbox</td></tr>
	<tr><td>$tellafriendbox</td></tr>
	<tr><td>$languagebox</td></tr>
	<tr><td>$currenciesbox</td></tr>
	<tr><td>$catmenu</td></tr>
	<tr><td>$categorybox</td></tr>
	<tr><td>$manufacturerbox</td></tr>
	<tr><td>$whatsnewbox</td></tr>
	<tr><td>$specialbox</td></tr>
	<tr><td>$searchbox</td></tr>
	<tr><td>$informationbox</td></tr>
</table>

Diesen Text einfach hinter

<div id="sidebarContent">

kopieren.

Das Wort Test aus dem content mit den fünf Tabellen ändern:

<table border="0" width="100%" cellspacing="0" cellpadding="1">
    <tr class="headerNavigation">
        <td class="headerNavigation">
            $breadcrumbs
        </td>
        <td align="right" class="headerNavigation">
            $myaccountlogoff | $cartcontents | $checkout
              
        </td>
    </tr>
</table>

<table border="0" width="100%" cellspacing="3" cellpadding="3">
  <tr>
    <td valign="top">
      <p>$content</p>
      <p> </p>
    </td>
  </tr>
</table>

<table border="0" width="100%" cellspacing="0" cellpadding="1">
  <tr class="footer">
    <td class="footer">  $date  </td>
    <td align="right" class="footer">  $numrequests  </td>
  </tr>
</table>

<br>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" class="smallText">
      $footer_text
    </td>
  </tr>
</table>

<br>

  <table border="0" cellpadding="3" cellspacing="0" width="100%">
      <tr>
        <td align="center" class="smallText">
          Simple Template System by <a href="http://www.diamondsea.com/">DiamondSea.com</a><br>
          STS v4.5.3 by <a href="http://soundsgoodpro.com">
			SoundsGoodProductions.com</a><br>
        </td>
      </tr>
  </table>

Die Datei speichern und auf dem Server bringen
ABER NICHT MEHR DA WO SIE EINMAL WAR sondern in dem Ordner catalog/includes/sts_template/name_der_vorlage und wenn sie da ist auch umbenennen in sts_template.html (die alte sts_template.html von da kann man davor löschen).

Damit wäre die Einbindunng des Shops an der Homepage die mit RW gebaut wurde de facto zu Ende. Man müsste jetzt ein bißchen an den Farben rummurksen.

6. Einige Änderungen an dem Shop
1. Zuerst der breadcrumb des Shops soll geändert werden. Die Startseite befindet sich in der Navigation der Seite, also muss da nicht mehr sein. In Shop selber der breadcrumb soll ab Katalog anfangen.
Dazu in der Datei catalog/includes/application_top.php (vielleicht diese Datei application_top.php zuerst duplizieren und dem Namen application_top original.php damit man weisst das hier eine Änderung gibt) nach

$breadcrumb->add(HEADER_TITLE_TOP, HTTP_SERVER);

suchen und mit

//  $breadcrumb->add(HEADER_TITLE_TOP, HTTP_SERVER);

ändern.
Speichern. Fertig.

2. Änderungen in stylesheet.css
Diese Datei ist zuständig mit den Formatierungen und Farben im Shop.
Am besten benutzt man CSSEdit da mit dem Programm kann man die Seite vom Server laden und dann die Änderungen in einer Art Cache halten (dadurch sieht man auch gleich was man macht. Plus in dem breadcrumb des Programms sieht man in welchem Bereich das Element sich befindet. Man kann dann auch die Änderungen direkt auf dem Server speichern. Auf jeden Fall die Datei stylesheet.css dupliziern und die Änderungen müssen hier gemacht werden. Es gibt Elemente die auch in der gelinkten CSS Dateien der Vorlage (wie Linkfarben). Sie können natürlich zu Rate gezogen werden so nah wie möglich das Aussehen zu bringen.

Eine Änderung müsste wahrscheinlich in BODY vorgenommen werden: es geht um margin: 0px. Wahrscheinlich müsste das weg sein (aber es hängt sicherlich ob das mit den Daten aus der Vorlage kolidiert). Wenn die margin gelöscht wird und keine Änderung passiert dann kann man sie auch lassen.

- Apropos breadcrumb. In der Datei ist

TR.headerNavigation {
  background: #bbc3d3;
}

Ich habe die Angabe des backgrounds gelöscht und habe mit

TR.headerNavigation {
  font-size: 11px;
}

geändert. Die Angabe

A.headerNavigation { 
  color: #FFFFFF; 
}

habe ich ganz gelöscht. Das gleiche auch mit:

A.headerNavigation:hover {
  color: #ffffff;
}

Und die auch:

TD.headerNavigation {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #bbc3d3;
  color: #ffffff;
  font-weight : bold;
}

habe ich ganz gelöscht.

- Aus

TD.footer {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #bbc3d3;
  color: #ffffff;
  font-weight: bold;
}

des Footers habe ich nur font-size: 10px gelassen und

TR.footer {
  background: #bbc3d3;
}

gelöscht.

- Der Infoboxes habe ich die Hintergrundfarbe gelöscht, dafür Ränder gegeben:
Aus

.infoBox {
  background: #b6b7cb;
}

wurde

.infoBox {
	border: 1px solid #286fa6;
	border-spacing: 1px;
}

Für deren Contents habe ich die Hintergrundfarbe gelöscht und nur die Größe der Schrift gelassen:
Aus

.infoBoxContents {
  background: #f8f8f9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
}

wurde

.infoBoxContents {
  font-size: 10px;
}

- Bei deren Überschriften bante es sich ein Problem. Zwar CSS codemässig habe ich aus

TD.infoBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #bbc3d3;
  color: #ffffff;
}

nur das gelassen:

TD.infoBoxHeading {
  font-size: 10px;
  background: #286FA6;
  color: #ffffff;
}

aber ich konnte die Ecken nicht finden.
Sie sind in der php Code versteckt:
In der Datei catalog/includes/classes/boxes.php gibt es ein Bereich dafür:

    function infoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) {
      $this->table_cellpadding = '0';

      if ($left_corner == true) {
        $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif');
      } else {
        $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif');
      }
      if ($right_arrow == true) {
        $right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>';
      } else {
        $right_arrow = '';
      }
      if ($right_corner == true) {
        $right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif');
      } else {
        $right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14');
      }

Den habe ich mit dem geändert:

    function infoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) {
      $this->table_cellpadding = '0';

      if ($left_corner == true) {
        $left_corner = '';
      } else {
        $left_corner = '';
      }
      if ($right_arrow == true) {
        $right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>';
      } else {
        $right_arrow = '';
      }
      if ($right_corner == true) {
        $right_corner = '';
      } else {
        $right_corner = '';
      }

Noch einige Ändereungen die ich gemacht habe (sicherlich sind sie nicht die einzigen möglichen aber sie waren genug das Ergebnis zu haben):
- Die Backgroundfarbe gelöscht in:

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
  background: #f8f8f9;
}

- Eine andere Farbe der border gegeben. Aus:

TABLE.productListing {
  border: 1px;
  border-style: solid;
  border-color: #b6b7cb;
  border-spacing: 1px;
}

habe ich das:

TABLE.productListing {
	border: 1px solid #286fa6;
	border-spacing: 1px;
}

Aus:

.productListing-heading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  background: #b6b7cb;
  color: #FFFFFF;
  font-weight: bold;
}

habe ich zwei Angaben gemacht:

.productListing-heading {
  font-size: 10px;
  background: #286FA6;
  color: #ffffff;
}

a.productListing-heading {
	color: #ffffff;
}

- Die Header der Seite habe geändert. Aus:

TD.pageHeading, DIV.pageHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #9a9a9a;
}

wurde:

TD.pageHeading, DIV.pageHeading {
	font-size: 20px;
	color: #286FA6;
}

- Auch bei den Schriften habe ich etwas geändert:

TD.main, P.main {
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5;
}

blieb nur:

TD.main, P.main {
	line-height: 1.4;
}

- Der Besucher selbst:

SPAN.greetUser {
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #f0a480;
  font-weight: bold;
}

wurde ein bißchen geändert:

SPAN.greetUser {
	color: #286FA6;
	font-size: 13px;
}

1px zw. den Buchstaben habe ich für den Fettdruck:

b, strong {
	font-weight: bold;
	letter-spacing: 1px;
}

- Und der Text der auf der ersten Seite grün unterlegt war:

.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

habe ihn blau unterlegt, etwas größer gemacht und in weissen Grossbuchstaben erscheinen lassen:

.messageStackSuccess { 
	background-color: #286FA6;
	text-transform: uppercase;
	color: white;
	font-size: 11px;
}

Wie man sieht der CSS Code ist vol vonn TRs und TDs. Das weil die Seite auch in Tabellen gebaut ist. Meine Meinung ist (im Nachhinein wohl gemerkt) das so eine Aufteilung gar nicht schlecht für die Seite ist. Die Produkte (deren Header, Erklärungen, Icons etc) sind auch fast tabelarisch gebaut. Deswegen jetzt ein Umstrukturierung in divs müsste eine ganz andere stylessheet.css haben.

Aber ich bin mir sicher dass andere User ein Schmuckstück davon machen werden.
Es sind Pictograme die geändert werden müssen und das ist wahrscheinlich die schwerere Aufgabe.

Auf jeden Fall man kann in Schnellverfahren einen Shop in einer RW Homepage einbinden.

Ich bitte um Verständnis wenn ich vielleicht irgendwo ein Fehler gemacht habe. Bitte natürlich auch eine Mitteilung wenn das sein sollte.
Die Einbindung ist nicht schwer und wahrscheinlich kommt man auch selber zurecht wenn das Prinzip verstanden wurde.

Kommentieren ist momentan nicht möglich.