In diesem Tutorial wird das Anlegen eines eigenen Artikel- / Kategorie-Listings erklärt.

In diesem Beispiel wird ein 6-spaltiges Layout angelegt in Template Nr. 0

Template Vorbereitung

Als Vorlage dient das 4-spaltige Listing.

Kopie erstellen von:

templates/0/de/html/articles/article_box_4col.tpl

templates/0/de/html/articles/article_listing_4col.tpl

Umbenennen in:

templates/0/de/html/articles/article_box_6col.tpl

templates/0/de/html/articles/article_listing_6col.tpl

In der Datei article_listing_6col.tpl wird per Smarty foreach-Schleife die Artikelbox inkludiert. Diese Datei wird zwei mal inkludiert und muss durch die neue Datei ersetzt werden.

Der Quellcode wurde in diesem Ausschnitt breits angepasst. Die erste Einbindung ist für die Darstellung von Einkaufswelten. So greift er auf das Template für Grafiken oder für Artikel zurück.

 
{if $sOffers AND !$_GET.sPage}
	{foreach from=$sOffers item=offer key=key name="counter"}
			{if $offer.mode == "gfx"}
				{include file="articles/article_box_img.tpl" sArticle=$offer}
			{else}
				{include file="articles/article_box_6col.tpl" sArticle=$offer}
			{/if}	
	{/foreach}
{else}
	{foreach from=$sArticles item=article key=key name="counter"}
		{include file="articles/article_box_6col.tpl" sArticle=$article key=$key}
	{/foreach}
{/if}
 

Anpassung in der article_box_6col.tpl: Um die Trennlinien zwischen den Artikelboxen einzublenden und um den Zeilenumbruch nach 6 Artikeln zu bewirken.

Vorhandener Code:

 
<div class="artbox2 {cycle values="listing_grid_left,listing_grid_right,listing_grid_right,listing_grid_right"}">
 

ändern in:

 
<div class="artbox2 {cycle values="listing_grid_left,listing_grid_right,listing_grid_right,listing_grid_right,listing_grid_right,listing_grid_right"}">
 

Vorhandener Code:

 
{if $key==$smarty.foreach.counter.total-1 OR $key==$smarty.foreach.list.total-1}
{else}
{if ($key+1) % 4 == 0}<div class="horline2"></div> {/if}
{/if}
 

ändern in:

 
{if $key==$smarty.foreach.counter.total-1 OR $key==$smarty.foreach.list.total-1}
{else}
{if ($key+1) % 6 == 0}<div class="horline2"></div> {/if}
{/if}
 

Backend-Anpassung

Um das neue Template auch für einzelne Kategorien aktivieren zu können, gehen Sie wie folgt vor:

In der Administration auf "Einstellungen / Grundeinstellungen / Storefront -> Kategorien / Listen"

Im Feld "Verfügbare Templates Kategorien" muss nun das neue Template hinzugefügt werden. Der vorhandene Aufbau kann also einfach erweitert werden.

Standardmäßig:

article_listing_1col.tpl:Liste;article_listing_2col.tpl:Zweispaltig;article_listing_3col.tpl:Dreispaltig;article_listing_4col.tpl:Vierspaltig

Nach der Erweiterung:

article_listing_1col.tpl:Liste;article_listing_2col.tpl:Zweispaltig;article_listing_3col.tpl:Dreispaltig;article_listing_4col.tpl:Vierspaltig;article_listing_6col.tpl:Sechsspaltig

Nun kann das neue Listing über "Artikel / Kategorien" aktiviert werden.

Style-Anpassungen

Nun können Sie in der Datei article_box_6col.tpl für die CSS-Datei eine neue Klassen vergeben. In dem 4-Spalter heißt die Klasse der Artikelbox "artbox2" und kann z.B. in der neuen Datei in artbox6 umbenannt werden.

In der basic.css befindet sich der Abschnitt des 4-Spalters unter dem Punkt "articlebox 4 col". Diese Zeilen können dupliziert werden und artbox2 muss ebenfalls in artbox6 umbenannt werden. Nun besteht die Verknüpfung zwischen der Templatedatei und den neuen Styles. Diese können nun für den 6-Spalter abgeändert werden.