Tutorial: Erstellung Box
(by Hendrik Koch, 09.2009)
Hinweis: Dieses Tutorial wurde für den Vorgängershop und dessen Template xtc4 verfasst. Die PHP-Programmtexte sind für die modified eCommerce Shopsoftware weiterhin gültig (Stand 04.2011, modified eCommerce Shopsoftware 1.05). Die HTML-Beispiele beziehen sich allerdings noch auf das xtc4-Template. Bei der praktischen Anwendung des Tutorials ist als HTML-Vorlage (für box_bexample.html) ein Boxtemplate aus dem entsprechenden Template des Shops zu kopieren und anzupassen. Nicht alle Shops werden mit Template xtc4 oder -5 betrieben.
Erstellung einer neuen Seitenbox[Bearbeiten]
Kurz zum Aufbau der Box. Diese besteht aus 3 Elementen.
- Grundaufbau
- Überschrift
- Inhalt
Zur internen Wiedererkennung trägt jede Box einen internen Namen. Z.B. categories, information, languages. Unsere Box nennen wir: "bexample"
Wir bauen die Box in das bekannte xtc4 Template im Tabellenlayout. Die Box hat erst mal nur eine Platzhalterüberschrift und keinen Inhalt. Inhalt Beispiel folgt anschließend.
Grundaufbau[Bearbeiten]
Die Templatedateien für die Boxen liegen im Ordner
templates/xtc5/boxes/
Hier erstellen wir uns eine neue Templatedatei. Analog zu den existierenden Boxen erstellen wir uns einen Box-Templaterumpf und speichern ihn unter "box_bexample.html" mit folgendem Inhalt:
{config_load file="$language/lang_$language.conf" section="boxes"}
<h2 class="boxheader">{#heading_bexample#}</h2>
<div class="boxbody">{$BOX_CONTENT}</div>
Der Platzhalter für die Überschrift ist {#heading_bexample#}, der für den Inhalt {$BOX_CONTENT}.
Überschrift[Bearbeiten]
Der Überschrifttext liegt in einer Sprachdatei um die Mehrsprachigkeit des Shops zu gewährleisten.
lang/german/lang_german.conf lang/english/lang_english.conf ggf. usw.
Darin suchen wir den Abschnitt [boxes] und tragen ein:
heading_bexample = 'Beispielbox'
bzw. englisch
heading_bexample = 'Box Example'
Boxinhalt[Bearbeiten]
Der Inhalt wird generiert von einem php-Script. Jede Box besitzt ein eigenes php-Script welches Teil des Templates ist.
Die Boxscripte befinden sich im Ordner
templates/xtc5/source/boxes/
Hier setzen wir ein neues Script ein.
bexample.php
und darin folgender Programmrumpf
<?php
/* -----------------------------------------------------------------------------------------
bexample.php
---------------------------------------------------------------------------------------*/
$box_smarty = new smarty;
$box_smarty->assign('tpl_path', 'templates/'.CURRENT_TEMPLATE.'/');
// Generierung Inhalt beginn ------
$box_content = 'Inhalt provisorisch';
// Generierung Inhalt Ende ------
$box_smarty->assign('BOX_CONTENT', $box_content);
$box_smarty->assign('language', $_SESSION['language']);
// set cache ID
if (!CacheCheck()) {
$box_smarty->caching = 0;
$box_bx = $box_smarty->fetch(CURRENT_TEMPLATE.'/boxes/box_bexample.html');
} else {
$box_smarty->caching = 1;
$box_smarty->cache_lifetime = CACHE_LIFETIME;
$box_smarty->cache_modified_check = CACHE_CHECK;
$cache_id = $_SESSION['language'];
$box_bx = $box_smarty->fetch(CURRENT_TEMPLATE.'/boxes/box_bexample.html', $cache_id);
}
$smarty->assign('box_BEXAMPLE', $box_bx);
?>
Kurz zur Funktionsweise.
$box_smarty ist ein neues Smartyobjekt womit der html-Code der Box generiert wird.
$box_content beinhaltet den html-Inhalt der Box (siehe Grundaufbau) und lautet provisorisch „Inhalt provisorisch“. Der Templateplatzhalter {$BOX_CONTENT} wird später durch den Inhalt von $box_content ersetzt.
$box_smarty->assign('BOX_CONTENT', $box_content);
Im unteren werden Boxinhalt und Boxtemplate zusammengeführt und daraus der Box-html-Code erzeugt in $box_bx.
In der letzten Zeile wird $box_bx an das globale Smartyobjekt $smarty übergeben unter dem Namen „box_BEXAMPLE“.
{$box_BEXAMPLE} ist der Name des Platzhalters im übergeordneten Template (index.html).
Einfügung in Layout[Bearbeiten]
Jetzt platzieren wir unsere Box im Layout. Unsere Box platzieren wir in Form eines Platzhalters zwischen die anderen Boxen.
templates/xtc5/index.html
Darin finden wir die Platzhalter der anderen Boxen vor:
{$box_CATEGORIES}
{$box_ADD_QUICKIE}
{$box_CONTENT}
.....
Wir setzen den neuen Box-Platzhalter vor die Kategorien.
{$box_BEXAMPLE}
{$box_CATEGORIES}
{$box_ADD_QUICKIE}
{$box_CONTENT}
.....
Ein Aufruf des Shops bring allerdings noch kein Ergebnis. Der php-Code der dem neuen Platzhalter Inhalt zuweist wird gar nicht abgearbeitet vom System. Dies erreichen wir durch eine Einfügung in:
templates/source/boxes.php
Darin finden wir eine ganze reihe include-Anweisungen worin wir ein include unserer neuen php-Datei einreihen.
Finde:
require_once(DIR_WS_BOXES . 'categories.php');
Füge ein:
require_once(DIR_WS_BOXES . 'bexample.php');
Ein erneuter Aufruf des Shops bringt die neue Box zum Vorschein.
Teil 2 – Beispielinhalt[Bearbeiten]
Die Box soll einen zufälligen Artikel anzeigen. Mit Bild und Artikelname. Bild und Artikelname sollen als Link angezeigt werden. Ein Klick führt auf die Artikelseite.
<a href="...">
<img src="..." … /><br />
Artikelname
</a>
Wir gehen zurück in die Datei bexample.php, zwischen den markierten Abschnitt.
templates/source/boxes/bexample.php
// Generierung Inhalt beginn ------
$box_content = '';
// fsk18 Prüfung
$fsk_lock = '';
if ($_SESSION['customers_status']['customers_fsk18_display'] == '0') {
$fsk_lock = ' and p.products_fsk18!=1';
}
// Kundengruppe Prüfung
if (GROUP_CHECK == 'true') {
$group_check = " and p.group_permission_".
$_SESSION['customers_status']['customers_status_id']."=1 ";
}
// zufälliger Artikel
$sql = "select distinct
p.products_id,
p.products_image,
pd.products_name
from ".
TABLE_PRODUCTS." p, ".
TABLE_PRODUCTS_DESCRIPTION." pd
where
p.products_status = '1'
".$group_check."
and p.products_id = pd.products_id ".
$fsk_lock."
and pd.language_id = '".(int) $_SESSION['languages_id']."'
order by rand()
limit 0,1";
$res = xtc_db_query($sql);
if( $data = xtc_db_fetch_array($res) ) { // wenn Artikel gefunden
$link_parameter = xtc_product_link($data['products_id'], $data['products_name']);
$link_url=xtc_href_link(FILENAME_PRODUCT_INFO, $link_parameter);
$imagetag = xtc_image(DIR_WS_THUMBNAIL_IMAGES.$data['products_image'],$data['products_name']);
//echo "imgt=".htmlentities($imagetag)."<br/>\n";
$box_content = sprintf('<div align="center"><a href="%s">%s<br />%s</a></div>',
$link_url, $imagetag, $data['products_name']);
}
// Generierung Inhalt Ende ------
Die besprochenen Dateien zum Download: tutbox_files.zip