Sie sind auf Seite 1von 12

Ein xt:commerce Template - Jetzt mache ich es mir selbst

---------------------------------------------------------------------------------------------------------------------------
Autor: T. Fichtner www.templatebase.de
Lizenzbestimmung beigefgtes xt:commerce Template: Link im Footer muss bestehen bleiben!
(Achtung: Templates unterliegen nicht der GNU GPL sondern dem Urheberrecht)
Fr die Entfernung des Links vorherige Kontaktaufnahme ber das Kontaktformular auf templatebase.de

Immer wieder lese ich im Web die Fragen Wie baue ich mir ein eigenes Template fr xt:commerce?
Die Antworten beschrnken sich meist auf: Sieh Dir das mitgelieferte Standarttemplate an
Das ist natrlich gerade fr Anfnger sehr unbefriedigend.
Ich habe mich mal daran gesetzt und eine kleine Anleitung dafr geschrieben. Fr Vollstndigkeit und
Aktualitt kann nicht garantiert werden.

Voraussetzung: Kenntnisse in HTML und CSS (PHP nicht zwingend erforderlich) und natrlich eine Idee
wie der Shop aussehen soll. Ein Shop lokal auf dem Rechner installiert ist dabei erforderlich. Man will ja
keine Live nderungen am Shop vornehmen. Ich benutze dazu XAMMP. Sehr zu empfehlen.

Ans Designen:

Ich habe hier Fireworks MX dafr benutzt, es kann natrlich genauso mit Photoshop oder hnlichen
gearbeitet werden.
Als erstes mssen wir den Aufbau des Shops beachten. Hier im Beispiel habe ich die Seite eingeteilt in
Header, Navigation, Infoleiste (mit den Whrungen, Sprache etc) den Boxen und dem Inhalt selbst.
Ich habe mich in dem Beispiel fr ein CSS Layout entschieden.
---------------------------------------------------------------------------------------------------------------------------
Hier die Idee der Seite

---------------------------------------------------------------------------------------------------------------------------
Nun zuerst die Box ausschneiden und in ein neues Dokument einfgen. Die Box muss separat behandelt
werden.

Die sptere Box:

---------------------------------------------------------------------------------------------------------------------------
Kmmern wir uns zuerst um die eigentliche Seite.

Jetzt das ganze so zuschneiden das der Header, die Navigationsleiste und die Infoleiste jeweils geteilt
sind.
---------------------------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------------------
Die Leiste fr die Navigation und die Infoleiste werden wir spter mittels CSS in den Hintergrund setzen
damit unser Shop in diesem Bereich auch etwas anzeigen kann.
---------------------------------------------------------------------------------------------------------------------------

Jetzt die Box vorbereiten:

Es wird je ein Bereich fr die berschrift, fr den Inhalt und fr den unteren Abschluss bentigt.
---------------------------------------------------------------------------------------------------------------------------
Jetzt kann die Seite und die Box als HTML Seite exportiert werden, nicht vergessen die Bilder in einem
Unterordner (bilder) ablegen zu lassen. Fireworks verfgt ber die Mglichkeit das ganze sofort als
CSS Seite zu exportieren. Das sollte natrlich genutzt werden.

Das Ergebnis sind zwei Stinknormale HTML Seiten (box.html und index.html) die es nun gilt weiter zu
bearbeiten. Ich habe mich hierbei fr Dreamweaver MX 2004 entschieden, es geht aber auch mit jedem
anderen Editor.

---------------------------------------------------------------------------------------------------------------------------
Fangen wir mit der box.html an:

Im Dreamweaver die box.html so bearbeiten, dass die berschrift und der Inhalt jeweils in den
Hintergrund gesetzt werden knnen:

<div class="boxheadline"></div>
<div class="boxcontent"><div class="boxBody"><!-- Platz fr Inhalt --></div></div>
<div class="boxbottom"><img src="bilder/boxbottom.jpg" alt="" width="212" height="10" border="0" /></div>

Nun eine Stylesheet Datei erzeugen, in der wir die 4 Klassen bentigen

.boxheadline {
background-attachment: scroll;
background-image: url(bilder/boxheadline.jpg);
background-repeat: no-repeat;
background-position: left top;
margin: 0px;
padding: 7px 0px 0px;
height: 25px;
width: 213px;
font-family: Arial, Helvetica, sans-serif;
text-indent: 38px;
font-size: 12px;
}
.boxcontent {
background-attachment: scroll;
background-image: url(bilder/boxcontent.jpg);
background-repeat: repeat-y;
background-position: left top;
width: 213px;
}
.boxbottom {
margin: 0px;
padding: 0px;
height: 10px;
width: 213px;
}
.boxBody {
padding:2px 8px 0px 6px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #000000;
text-decoration: none;
left: 2px;
position: relative;
}
---------------------------------------------------------------------------------------------------------------------------
Wie man sehen kann ist bei boxheadline und boxcontent die Grafik in den Hintergrund gebaut
worden. Die Anweisung boxbottom kann auch weggelassen werden. Die Anweisung boxBody dient
dazu den Inhalt in der Box von den Rndern fern zu halten.

Ein Hinweis um Verwirrungen vorzubeugen:


Bei boxheadline muss mit dem Werten von height und padding gearbeitet werden damit die Schrift
auch mittig in der Grafik sitzt.
Dazu fge ich Probeweise eine berschrift bei

<div class="boxheadline"></div>

ein um die Ausrichtung zu kontrollieren.


---------------------------------------------------------------------------------------------------------------------------
Nun haben wir die box.html vorbereitet und knnen diese erst einmal zur Seite legen.
Also box.html und stylesheet.css im Editor schlieen.
---------------------------------------------------------------------------------------------------------------------------
Wir fahren mit der index.html fort.
Im Prinzip das gleiche, mit etwas mehr Aufwand.
---------------------------------------------------------------------------------------------------------------------------
Die index.html mit dem Editor ffnen und so umbauen das der Header im Kopfbereich bleibt, die
Leisten fr Navigation und die Infoleiste in den Hintergrund gesetzt werden kann.
Dann noch die Seite zentrieren und zwei DIV vorbereiten in die spter der Inhalt und die Boxen
gesetzt werden.

So sieht dann die index.html aus:

---------------------------------------------------------------------------------------------------------------------------
<div id="page">

<div id="header"><img src="bilder/header.jpg" alt="" width="960" height="124" border="0" /></div>


<div id="navbar"><!-- Platz fr Navigation --></div>
<div id="infobar"><!-- Platz fr Whrung, Sprache etc. --></div>

<div id="shopcontent"><!-- Platz fr Inhalt --></div>

<div id="boxes"><!-- Platz fr Boxen --></div>


</div>
---------------------------------------------------------------------------------------------------------------------------
Die Klasse page benutze ich hier um die Seite zu zentrieren. Die Leiste fr die Navigation wird in den
Hintergrund gesetzt genauso wie die Infoleiste. Die Klasse content wird spter einmal den Inhalt
beherbergen und die boxes Sagt der Name ja schon.

Die stylesheet Datei kann dann so aussehen:

body {
color: #000000;
background: #FFFFFF;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#page {
margin: 0px auto;
width: 960px;
padding: 0px;
}
#header {
margin: 0px;
padding: 0px;
height: 124px;
width: 960px;
position: relative;
}
#infobar {
background-attachment: scroll;
background-image: url(bilder/infobar.jpg);
background-repeat: no-repeat;
background-position: left top;
margin: 0px;
padding: 0px;
height: 44px;
width: 960px;
position: relative;
}
#navbar {
background-attachment: scroll;
background-image: url(bilder/navbar.jpg);
background-repeat: no-repeat;
background-position: left top;
margin: 0px;
padding: 0px;
height: 44px;
width: 960px;
position: relative;
}
#boxes {
margin: 0px;
padding: 0px;
float: left;
width: 213px;
position: relative;
left: 14px;
}
#shopcontent {
margin: 0px;
padding: 0px;
width: 705px;
position: relative;
float: right;
right: 18px;
top: 3px;
}

Im Prinzip sind jetzt beide html Dateien soweit vorbereitet.


---------------------------------------------------------------------------------------------------------------------------
Nun machen wir den entscheidenden Schritt auf dem Weg zum xt:commerce Template:
---------------------------------------------------------------------------------------------------------------------------
Jetzt bedienen wir uns am Standarttemplate von xt:commerce.
Kopiert aus dem Ordner DEIN_SHOP/templates/ das Standarttemplate xtc4 und fgt es
meinetwegen auf dem Desktop ein. Jetzt noch kurz den Ordner umbenennen, xtc_v_01.
Evtl. muss die Kleinschreibung des Ordners beachtet werden da manche Server sich bei Grobuchstaben
bockig zeigen.

Nun im Ordner xtc_v_01, die index.html umbenennen in index_old.html.


Verschiebt jetzt Eure gerade bearbeitete Seite (index.html) in Euren Templateordner. Den bilder
Ordner nicht vergessen. Die box.html verschieben in den Ordner boxes.
ffnet jetzt die index.html und die index_old.html mit Eurem Editor (bei mir: Dreamweaver).
Jetzt in der index.html den gesamten Kopfbereich im Quelltext entfernen, also ab: <html> bis runter zu
einschlielich <body>

so dass die Seite im Quelltext direkt mit dem div beginnt.


Weiterhin in der index.html (im Quelltext) den Fubereich entfernen. Also:
</body>
</html>

Weg damit, wird nicht gebraucht da xt:commerce das wieder selber zusammensetzt.

Weiterhin in der index.html jetzt im Quellcode an oberster Stelle die Zeile:

{config_load file="$language/lang_$language.conf" section="index"}

einfgen. Also msste es Auschnittsweise so aussehen:

{config_load file="$language/lang_$language.conf" section="index"}


<div id="page">

<div id="header"><img src="{$tpl_path}bilder/header.jpg" alt="" width="960" height="124" border="0" /></div>


<div id="navbar"><!-- Platz fr Navigation --></div>.

Die erste Zeile kann man sich auch aus der index_old.html kopieren.

Weiter in der index.html: Jetzt mssen die Pfade zu den Bildern angepasst werden.
momentan sieht das bei Euch so aus:

<img src="bilder/header.jpg" alt="" width="960" height="124" border="0" />

Daraus muss jetzt folgendes werden:

<img src="{$tpl_path}bilder/header.jpg" alt="" width="960" height="124" border="0" />

Sehr einfach geht das in Dreamweaver mit Suchen und Ersetzen.


Einfach Suchen nach: src="bilder/ und ersetzen mit src="{$tpl_path}bilder/
nun rattert DW los und ersetzt alles binnen Sekunden.

Nun sind die Pfade zu den Grafiken des Templates angepasst.

Aus der stylesheet Datei, die Ihr beim designen Eures Shops hoffentlich extern gespeichert habt, kopiert
Ihr die Anweisungen und fgt diese in der bereit existierenden stylesheet.css im Templateodner ein
(nicht die Datei kopieren, nur den Inhalt)

Jetzt kann man sich sogar das Template bereits in seinem Shop anzeigen lassen. Dazu den
Templateordner xtc_v_01 verschieben in ROOT/templates/.
Danach in den Adminbereich des eigenen Shops einloggen (bitte nur auf den lokal installierten),
gehe bei Konfiguration zum Link Mein Shop. In der Spalte Templateset (Theme) jetzt aus dem
Dropdownfeld Dein Templateordner whlen. Auf Speichern drcken, zum Shop wechseln.
Jetzt siehst Du schon mal Deinen Shop ohne Inhalt. Das einzige was sich im Gegensatz jetzt verndert
hat ist das der Footer von xt:commerce dazugekommen ist.
Bearbeiten wir das Template nun weiter. Lasst den Browser mit Eurem Shop weiterhin geffnet um
nderungen direkt anzusehen.

Nun wird es in Deinem Editor etwas unbersichtlicher da die Pfade zu den Grafiken nicht mehr stimmen.
Nicht stren lassen, einfach stur weiterarbeiten.

Zur Navigation: Dafr gibt es jetzt mehrere Mglichkeiten. Habe es in diesem Beispiel mal als Liste
gestaltet die mit CSS formatiert wird.

<!-- Navigation Start -->


<ul id="nav">
<li class="page_item"><a href="index.php" onfocus="if(this.blur)this.blur()">Home</a></li>
{php} if (!isset($_SESSION['customer_id'])) { {/php}<li class="page_item"><a onfocus="if(this.blur)this.blur()" href="{php}
echo xtc_href_link('login.php');{/php}">Login</a></li>{php} } {/php}
{if $account}{php} if (isset($_SESSION['customer_id'])) { {/php}<li class="page_item"> <a href="{$logoff}"
onfocus="if(this.blur)this.blur()">{#link_logoff#}</a></li>{php} } {/php}{/if}
<li class="page_item">{if $account}<a href="{$account}" onfocus="if(this.blur)this.blur()">{#link_account#}</a>{/if}</li>
<li class="page_item"><a href="{$cart}" onfocus="if(this.blur)this.blur()">{#link_cart#}</a></li>
<li class="page_item"><a href="{$checkout}" onfocus="if(this.blur)this.blur()">{#link_checkout#}</a></li>
</ul>
<!-- Navigation Ende -->

Das wre dann auch noch die "Leistungsgesteigerte" Variante mit einem 'Home' und einem 'Login'
Button der verschwindet wenn der Kunde sich eingeloggt hat.

Die stylesheet Angaben fr die Navigation sehen wie folgt aus:

#nav {
list-style: none;
margin: 0px;
position: relative;
left: 4px;
bottom: 0px;
float: left;
padding: 0px;
white-space: nowrap;
}
#nav li {
float: left;
white-space: nowrap;
background-attachment: scroll;
background-image: url(bilder/seperator.jpg);
background-repeat: no-repeat;
background-position: right top;
padding-right: 1px;
}
#nav .current_page_item a, #nav .current_page_item {
color: #CCCCCC;
text-decoration: none;
white-space: nowrap;
position: relative;
}
#nav .page_item a{
color: #333333;
text-decoration: none;
font: bold 13px Arial, Helvetica, sans-serif;
text-align:center;
display: block;
white-space: nowrap;
vertical-align: middle;
text-transform: uppercase;
padding-right: 16px;
position: relative;
float: left;
padding-top: 13px;
height: 27px;
padding-left: 14px;
margin: 0px;
}
#nav .page_item a:hover {
color: #FFFFFF;
text-decoration: none;
background-attachment: scroll;
background-image: url(bilder/main_nav_over.jpg);
background-repeat: repeat-x;
background-position: left center;
}

In dieser Variante sind die einzelnen Links noch mit einer Grafik (seperator.jpg) getrennt und die Links
mit einem hover Effekt versehen (main_nav_over.jpg).

Noch ein Wort zur Navigation, selbstverstndlich knnt Ihr auch die Headergrafik mit der Startseite
verlinken. Einfach als Sprungziel die index.php whlen.

Jetzt knnt Ihr Eure Seite mal mit Strg+S speichern und zum Browser wechseln, in der ja noch der
Shop offen sein mte.
Dort auf Aktualisieren drcken und... Voila msste die Navigation zu sehen sein.

Diese jetzt einfach noch ber die Hhe und Seite genau ausrichten so das sie dort sitzt wo sie soll.

Lassen wir uns doch nun mal auf den eigentlichen Inhalt der Shops kommen.

Wechselt wieder zum Standarttemplate xtc4 in Eurem Editor. Kopiert die Anweisung:

{$main_content}

und fgt diese in dem Mitteilteil im DIV shopcontent ein.

<div id="shopcontent">{$main_content}</div>

Darunter kann dann noch:

{if $BANNER}{$BANNER}{/if} stehen, wenn Sie Banner in Ihrem Shop anzeigen lassen mchten.

Mal wieder Strg+S und zur eigenen Seite wechseln, Aktualisieren drcken. Nun muss der Inhalt des
Shops zu sehen sein!

Na? Wchst und wchst...


---------------------------------------------------------------------------------------------------------------------------
Jetzt nur noch die Boxen einfgen, die man selbst bentigt (hier im Beispiel mal einfach alle
genommen). Auch da kann man sich wunderbar am Standarttemplate von xt:c bedienen, dazu einfach
fr die Boxen die Anweisungen:

{$box_ADMIN} {$box_CATEGORIES} {$box_CART} {$box_LOGIN} {$box_ADD_QUICKIE} {$box_REVIEWS}


{$box_LAST_VIEWED} {$box_WHATSNEW} {$box_BESTSELLERS} {$box_NEWSLETTER} {$box_CONTENT}
{$box_INFORMATION} {$box_MANUFACTURERS} {$box_INFOBOX} {$box_SPECIALS} {$box_MANUFACTURERS_INFO}

Wie hier im Beispiel zu sehen, ist dass ganze relativ einfach aufgebaut. Aus dem Namen fr die Box kann
man schon ablesen was fr eine Box das dann auf der Seite werden soll.

Nun kommt es ja durchaus vor das man die eine oder andere Box gar nicht bentigt, zum Beispiel hat
man keine zwei Whrungen oder nur einen Deutschsprachigen Shop.

Dazu einfach {$box_LANGUAGES} und {$box_CURRENCIES} lschen. Jetzt werden die auch nicht mehr
angezeigt.

Hier mal ein kleine Erklrung was welche Box ist:

{$box_CATEGORIES} Die Box fr die Produktkategorien


{$box_ADD_QUICKIE} Die Box fr ein schnelles finden eines Produktes mittel der Artikelnummer
{$box_CONTENT} Die Box fr verschiedene Links (z.Bsp: Versandkosten, AGB, Impressum etc)
{$box_INFORMATION} Die Box fr Links wie zum Bsp: Sitemap etc
{$box_LAST_VIEWED} Die Box fr den zuletzt angesehenen Artikel
{$box_REVIEWS} Die Box fr die Vorschau von Artikeln
{$box_SEARCH} Die Box fr die Suche innerhalb des Shops
{$box_SPECIALS} Die Box fr Sonderangebote
{$box_WHATSNEW} Die Box fr Neue Artikel
{$box_CART} Die Box fr den Warenkorb
{$box_LOGIN} Die Box fr das Einloggen der werten Kundschaft
{$box_ADMIN} Die Box fr Shopbetreiber (sieht auch nur der Admin)
{$box_NEWSLETTER} Die Box fr den Newslettereintrag fr Gste des Shops
{$box_BESTSELLERS} Die Box fr... der Name sagt alles
{$box_INFOBOX} Die Box fr die Anzeige der Kundengruppe
{$box_CURRENCIES} Die Box fr die Whrungen
{$box_LANGUAGES} Die Box fr die Sprachen
{$box_MANUFACTURERS} Die Box fr evtl. verschiedene Hersteller.

So, zurck zu unserem Template.

wenn Ihr jetzt die Seite speichert und Euch anschaut, nicht erschrecken. Das mit den Boxen mssen wir
natrlich noch bearbeiten.

Die html Datei box.html ist ja bereits verschoben in ROOT/templates/xtc_v_01/boxes/

Jetzt geht das Spielen wieder los.


Mit Dreamweaver die Dateien box.html und box_admin.html ffnen.
Zuerst mssen wir uns mit unserer selbst erstellten box.html beschftigen:

---------------------------------------------------------------------------------------------------------------------------
Auch hier wieder im Quellcode den Kopf und Fubereich entfernen. Ganz oben wieder einfgen:

{config_load file="$language/lang_$language.conf" section="boxes"}

Achtung das ist jetzt etwas anders als auf der index.html. Einfach mal in der box_admin.html
nachschauen oder direkt von dort kopieren.

Aus

<div class="boxheadline"></div>
<div class="boxcontent"><div class="boxBody"></div></div>
<div class="boxbottom"><img src="bilder/boxbottom.jpg" alt="" width="212" height="10" border="0" /></div>

Muss

{config_load file="$language/lang_$language.conf" section="boxes"}


<div class="boxheadline">{#heading_admin#}</div>
<div class="boxcontent"><div class="boxBody">{$BOX_CONTENT}</div></div>
<div class="boxbottom"><img src="{$tpl_path}bilder/boxbottom.jpg" alt="" width="212" height="10" border="0" /></div>

werden!

Zur Erklrung:
Die erste Zeile ist eingefgt, wie beschrieben. Bei boxheadline erscheint dann die berschrift. Die
findet man in der Datei ROOT/lang/german/lang_german.conf
Dort in der Zeile [boxes]
Bei boxcontent steht einfach die Anweisung dass der Inhalt der Box Admin dort angezeigt werden soll.

Die stylesheet.css ist ja bereits angepasst.

Jetzt die Datei als box_admin.html speichern.

Nun knnten wir uns unsere Seite mal wieder ansehen.


Zum Browser wechseln, Aktualisieren drcken und staunen.... Es geht.

Die Datei box.html wird nicht mehr bentigt und kann gelscht werden.

Nun ffnet alle Box html Dateien aus Eurem Ordner ROOT/templates/xtc_v_01/boxes/ mit
Dreamweaver.

Ich persnlich bearbeite das wie folgt (jeder hat da so seinen eigenen Stil):

Ich kopiere die divs aus der gerade bearbeiteten box_admin.html und fge diese unterhalb der
bereits vorhandenen Tabelle oder Ebenen wieder ein (innerhalb der jeweils nchsten Box Datei z.Bsp:
box_reviews.html)
Danach kopiere ich mir die Anweisung fr die berschrift der Box also {#heading_reviews#} und fge
diese in meiner boxheadline anstatt von {#heading_admin#} wieder ein. Wenn die Box fr den Inhalt
auch nur die Anweisung {$BOX_CONTENT} hat muss man jetzt nur noch den Fu der Box ndern.

Leider sind nicht alle Boxen so einfach aufgebaut. Einige wie z.Bsp box_newsletter.html beinhalten
noch einige andere Anweisungen.

Dazu einfach genau wie oben beschrieben vorgehen und dabei nicht nur die berschrift kopieren
sondern auch die Zelle mit dem jeweils anderen Inhalt.

Das ist bei manchen nicht so ganz einfach. Insbesondere wenn man vom Tabellenbasierten
Layout auf CSS umsteigt. Bei dieser Arbeit sorgfltig vorgehen sonst zerschiet Ihr das
Design wenn pltzlich irgendwoher eine Tabellenzelle auftaucht.

Das war es nun schon. Alle Boxen gendert? Dann mal auf den eigenen Shop wechseln und
Aktualisieren drcken.

Jetzt msste alles in dem eigenen Stil angezeigt werden.


Wer mchte sollte nun auch die Buttons dem Layout der Seite anpassen. Diese findest du im Ordner

ROOT/templates/DEIN_TEMPLATE/buttons/german/

Das kostet ein wenig Arbeit. Mit Fireworks oder Photoshop eine neue Datei erstellen, die Buttons
designen und entsprechend beschriften, dann wieder aus der Datei herausschneiden und als GIF Datei in
den Ordner exportieren, auf den Namen achten!

Wie gesagt, neue Buttons kosten Zeit, vieeeel Zeit. Da gibt es im Web genug Anbieter die fertige Stze
verkaufen oder kostenlos anbieten. Einfach mal rumgooglen.

Ein Hinweis noch: Im Ordner ROOT/templates/DEIN_TEMPLATE/module/ liegen alle Dateien die


fr das schmucke Aussehen der Seite verantwortlich sind. Die Namen sind zum Teil selbsterklrend.
Ich hoffe es hat dem einen oder andern etwas gebracht.
Immer daran denken, ein xt:commerce template selbst erstellen ist keine einfache Arbeit aber auch kein
Hexenwerk.

Ich habe mir mal die Mhe gemacht und das Beispiel zu einem funktionierenden Shop umgebaut. Dieser
ist als Download hier verfgbar. Es handelt sich dabei um genau das gleiche Template, welches ich hier
als Bespiel herangezogen habe. Nun ist es mglich das Standarttemplate und das Umgebaute anhand
des Tutorials genau zu vergleichen und etwas besser nachzuvollziehen wie sich der Shop aufbaut.

Diesem Tutorial liegt ein xt:commerce Template, mit Blankografiken bei.


Dieses kann auch benutzt werden unter Beachtung der Lizenz, das heit der Link im Footer muss
bestehen bleiben. Sollte den jemand entfernen wollen, VORHER Kontaktaufnahme ber das Formular
auf www.templatebase.de

Das Tutorial und das Template haben sehr viel Arbeit gemacht. Beachtet daher die Lizenz.

Ein Hinweis: Templates fr xt:c unterliegen nicht der GNU GPL sondern dem Urheberrecht. Das
verbleibt stndig bei der Firma TemplateBase