Tutorial: Erstellung Box

Aus xtc-wiki

(by Hendrik Koch, 09.2009)

[Bearbeiten] Erstellung einer neuen Seitenbox

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.

[Bearbeiten] Grundaufbau

Die Templatedateien für die Boxen liegen im Ordner

templates/xtc4/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"} 
  <table width="100%" border="0" cellpadding="2" cellspacing="0">
    <tr>
      <td class="infoBoxHeading">
        <table width="100%"  border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td class="infoBoxHeading">{#heading_bexample#}</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td class="infoBox" align="left">
        <table width="95%"  border="0" cellpadding="2" cellspacing="0">
          <tr>
            <td class="boxText">{$BOX_CONTENT}</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

Der Platzhalter für die Überschrift ist {#heading_bexample#}, der für den Inhalt {$BOX_CONTENT}.

[Bearbeiten] Überschrift

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'

[Bearbeiten] Boxinhalt

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/xtc4/source/boxes/

Hier setzen wir ein neues Script ein.

box_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).

[Bearbeiten] Einfügung in Layout

Jetzt platzieren wir unsere Box im Layout. Unsere Box platzieren wir in Form eines Platzhalters zwischen die anderen Boxen.

templates/xtc4/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:

 include(DIR_WS_BOXES . 'categories.php');

Füge ein:

 include(DIR_WS_BOXES . 'bexample.php');

Ein erneuter Aufruf des Shops bringt die neue Box zum Vorschein.

[Bearbeiten] Teil 2 – Beispielinhalt

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‎