Tutorial: Erstellung Box – Wiki | modified eCommerce Shopsoftware

Tutorial: Erstellung Box

Aus Wiki | modified eCommerce Shopsoftware

(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.


Tutorial Update[Bearbeiten]

2013-04-25[Bearbeiten]

(Version 1.06 rev 4642 2013-04-20 getestet by Soeldner, 04.2013)

Anpassungen Tut:

  • Bereich Einfügung in Layout
  • Bilder und Download werden nachgereicht :)

Erstellung einer neuen Seitenbox[Bearbeiten]

Kurz zum Aufbau der Box. Diese besteht aus 3 Elementen.

  • Grundaufbau
  • Überschrift
  • Inhalt


Tutbox image001.gif

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

box_bexample.html

{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 dein 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}
{$…..

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.

Tutbox image004.jpg

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.

Tutbox image006.gif

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

Tutbox image008.jpg

Die besprochenen Dateien zum Download: tutbox_files.zip‎

  • Diese Seite wurde zuletzt am 25. April 2013 um 15:16 Uhr bearbeitet.
             
anything