Einfügen eines statischen Box Elements

Author: Ing. Michael Fürst (m.fuerst@bluegate.at)
Web: http://www.bluegate.at
Publiziert: April 2007

Problemstellung

Sie möchten in der linken oder rechten Spalte Ihres xt:Commerce Shops ein neues, statisches Box-Element (z.B. mit einem E-Commerce Gütesiegel oder einem anderen Bild) einfügen.

Lösung

Der grundlegende Aufbau des Shops wird in der Datei index.html in Ihrem Template Ordner definiert.

Wenn Sie diese Datei mit einem geeigneten Editor öffnen, werden Sie feststellen, dass anstelle der eigentlichen Boxen nur Smarty Variablen (Platzhalter) vorhanden sind:

{$box_CATEGORIES}{$box_ADD_QUICKIE}{$box_CONTENT}... 

Die Variablenbezeichner der Boxelemente beginnen sinnvollerweise immer mit $box_*, wobei statt dem Stern der eindeutige Name der Box angeführt wird. So ist $box_CATEGORIES beispielsweise die Variable für die Box mit dem Kategoriemenü oder $box_ADD_QUICKIE die Variable für die Box mit der Schnellsuche.

Das statische Box Element einfügen

Um ein statisches Element einzufügen, wählen Sie zuerst jenen Platz aus, an dem die neue Box platziert werden soll. In diesem Beispiel gehe ich davon aus, dass das neue Element nach dem Kategoriemenü und vor der Schnellsuche eingefügt werden soll - also zwischen {$box_CATEGORIES} und {$box_ADD_QUICKIE}.

(X)HTML Quellcode erstellen

Um ein statisches Element einzufügen, benötigt man zuerst natürlich den Quellcode, der das neue Element abbildet. Am besten kopieren Sie den Quelltext (im Browser) einer bereits vorhandenen Box aus Ihrem Shop und ändern diesen entsprechend. In diesem Beispiel verwende ich die Box "Informationen" des Templates "Recreation Lounge":

Quelltext der Box "Informationen"
  1. <h2 class="boxheader">Informationen</h2>
  2. <div class="boxbody"><ul class="contentlist"><li><img src="templates/RecreationLounge/img/icon_arrow.gif" alt="" /> <a href="http://www.siabshop.com/siabshop/shop_content.php?coID=0">Unsere Partner</a></li><li><img src="templates/RecreationLounge/img/icon_arrow.gif" alt="" /> <a href="http://www.siabshop.com/siabshop/shop_content.php?coID=8">Sitemap</a></li></ul></div>

Diesen Quelltext können wir nun nach unseren Wünschen entsprechend anpassen. In diesem Beispiel füge ich ein beliebiges Bild ein:

Statisches Box Element
<h2 class="boxheader">Informationen</h2>
<div class="boxbody"><img src="testbild.jpeg" /></div>

Statisches Element in index.html einfügen

Als letzten Schritt muss der HTML Quellcode in die index.html an der gewünschten Stelle eingefügt werden:

HTML
  1. {$box_CATEGORIES} 
  2. <h2 class="boxheader">Informationen</h2>
  3. <div class="boxbody"><img src="testbild.jpeg"></div>
  4. {$box_ADD_QUICKIE}
  5. {$box_CONTENT}...

Speichern Sie die index.html und laden Sie das File auf Ihren Shopserver. Nun sollte die neue Box bereits sichtbar sein. Natürlich haben Sie auch die Möglichkeit eigene Selektoren / Klassen in Ihrem Stylesheet zu definieren, auf die Sie dann im statischen Box Element zurückgreifen können.