Im folgenden Tutorial werden wir uns mit der Erstellung eines angepassten Artikellistings beschäftigen. Für dieses Tutorial wird vorausgesetzt dass Sie Kenntnisse in HTML, CSS sowie der Template-Engine Smarty und seinen Block-System besitzen.

Ziel dieses Tutorials ist es Ihnen die Grundlagen zur Erstellung eines eigenen Listings näher zu bringen. Hierzu erstellen wir ein 1-spaltiges Listing mit größeren Produktbildern und einen längeren Beschreibungstext.

Wie Sie wissen, haben Sie in den Einstellungen der jeweiligen Kategorien die Möglichkeit per Auswahlbox die Spaltigkeit der Artikelauflistung zu beeinflussen. Unser Ziel ist es im ersten Schritt einen weiteren Punkt in der Auswahlbox zur Verfügung zu stellen.

Hierzu müssen wir als Erstes im Backend die nötigen Einstellungen treffen, damit wir ein neues Listing in den Kategorieeigenschaften wählen können. Hierzu wechseln wir in das Shopware Backend und wählen dann den Punkt "Einstellungen -> Grundeinstellungen -> Storefront -> Kategorien / Listen" aus. Hier gibt es ein Textfeld mit der Bezeichnung "Verfügbare Templates Kategorie". Fügen Sie hier eine neue Artikelauflistung nach folgender Syntax hinzu:

 
Syntax:
[TEMPLATE_NAME].tpl:[BEZEICHNUNG IN DER AUSWAHLBOX];
 
Beispiel:
my_listing.tpl:Mein eigenes Listing
 

Im unseren Fall fügen wir jetzt folgendes am Ende des Feldes hinzu:

 
;my_listing.tpl:Mein eigenes Listing
 

Wenn wir jetzt die Eigenschaften einer Kategorie aufrufen, dann sehen wir, dass in der Auswahlbox ein neuer Punkt mit dem Namen "Mein eigenes Listing" hinzugekommen ist.

Wir wählen jetzt das Listing "Mein eigenes Listing" aus und bestätigten die Änderungen mit einen Klick auf den Button "Speichern". Wenn wir jetzt die Kategorie aufrufen, wo wir unser Listing ausgewählt haben, dann wird ein Fehler geworfen, der besagt dass die Templatedatei "listing/my_listing.tpl" nicht gefunden werden konnte. Diese Tatsache ändern wir im nächsten Schritt, dadurch dass wir die Templatedateien erstellen.

In diesen Punkt des Tutorials erstellen wir jetzt die benötigten Templatedateien um ein angepasstes Artikellisting darzustellen. Da unsere Änderungen vom gewählten Template unabhängig sein sollen, werden wir unsere Änderungen im Ordner "_local" durchführen. Den Ordner "_local" finden Sie in Ihren Shop-Root im Verzeichnis "templates".

Als Erstes erstellen wir im Ordner "_local" einen Ordner mit dem Namen "frontend". In Ordner "frontend" erstellen wir wiederum einen neuen Unterordner mit dem Namen "listing".

Hier erstellen wir jetzt eine Datei mit dem Namen "my_listing.tpl". Dieser Dateinamen richtet sich nach den Einstellungen, welche Sie im Backend getroffen haben.

Hierzu öffnen wir die gerade erstellte Datei "my_listing.tpl", welche Sie unter "_local/frontend/listing" befinden sollten. Als nächsten Schritt erben wir jetzt die Datei "listing/listing.tpl" aus dem Mastertemplate ("_default") um die bestehenden Blöcke in der Datei überschreiben zu können.

Hierzu nutzen wir wieder den "extends"-Befehl von Smarty.

 
{extends file="../_default/frontend/listing/listing.tpl"}
 

Jetzt kommen wir zum spannenden Teil des Tutorial, aber vorweg erst einmal den gesamten Code, welcher dann im Einzelnen erklärt wird.

 
{* Listing vom Mastertemplate erben *}
{extends file="../_default/frontend/listing/index.tpl"}
 
{* Listing *}
{block name="frontend_listing_index_listing"}
	{include file='frontend/listing/listing_tut.tpl' sTemplate="tut-listing"}
{/block}
 

Wie Sie sehen, überschreiben wir an dieser Stelle den Block "frontend_listing_index_listing", welcher im Standard die Datei "_default/frontend/listing/listing.tpl" inkludiert. Da wir aber ein angepasstes Artikellisting erstellen wollen, welches aber keine Auswirkungen auf die anderen wählbaren Listings haben soll, inkludieren wir stattdessen die Datei "listing/listing_tut.tpl" als abgeleitete Version von "listing/listing.tpl" aus dem Mastertemplate.

Wichtig ist hier noch, dass wir dem Template "frontend/listing/listing_tut.tpl" eine Variable mit dem Namen "sTemplate" übergeben. Der Inhalt dieser Variable ist später die ID des Listing-Containers. Diese ID steuert später die gesamte Formatierung, die wir per CSS durchführen.

In unseren Fall nennen wir diese ID "tut-listing"', wodurch wir später beispielsweise über den CSS-Selektor "#tut-listing .artbox" die Eigenschaften der Artikelbox setzen können.

Als Nächstes legen wir die gerade inkludierte Datei "listing_tut.tpl" im Ordner "_local/frontend/listing" an und öffnen diese. Hier erben wir jetzt die Templatedatei "listing/listing.tpl" aus dem Mastertemplate.

 
{* Erben vom Mastertemplate *}
{extends file="../_default/frontend/listing/listing.tpl"}
 

Wenn wir dies gemacht haben, dann haben wir jetzt wieder alle Blöcke zur Verfügung, die im Mastertemplate in der Datei "_default/frontend/listing/listing.tpl" definiert sind. Hier gibt es einen Block mit dem Namen "frontend_listing_list_inline", der in einer "{foreach}"-Schleife die Datei "listing/box_article.tpl" inkludiert.

 
...
 
{block name="frontend_listing_list_inline"}
	{* Actual listing *}
	{foreach from=$sArticles item=sArticle}
		{include file="frontend/listing/box_article.tpl" sTemplate=$sTemplate lastitem=$lastitem firstitem=$firstitem}
	{/foreach}
{/block}
 
...
 

Wir überschreiben jetzt diesen Block um eine abgeleitete "listing/box_article.tpl" zu laden, welche in unseren Fall jetzt "box_article_new.tpl" heißt. Dies hört sich jetzt schwieriger an als es ist.

 
{block name="frontend_listing_list_inline"}
	{* Actual listing *}
	{foreach from=$sArticles item=sArticle}
		{include file="frontend/listing/box_article_new.tpl" sTemplate=$sTemplate}
	{/foreach}
{/block}
 

Wir entfernen auch die beiden Parameter "lastitem" und "firstitem", da wir diese für den weiteren Verlauf dieses Tutorials nicht benötigen.

In diesen Schritt legen wir die gerade inkludierte Datei "box_article_new.tpl" im Ordner "_local/frontend/listing/" an und öffnen diese.

Jetzt geht es darum die Artikelbox ("listing/box_article.tpl" aus dem Mastertemplate) zu erben und die entsprechenden Blöcke zu überschreiben. Unser Ziel ist es einen längeren Beschreibungtext auszugeben und ein größeres Produktbild als im Standard zu wählen.

Hierzu schauen wir uns erstmal die "listing/box_article.tpl" aus dem Mastertemplate an:

 
...
 
{* Article picture *}
{block name='frontend_listing_box_article_picture'}
{if $sTemplate eq 'listing-3col' || $sTemplate eq 'listing-2col'}
	{assign var=image value=$sArticle.image.src.3}
{else}
	{assign var=image value=$sArticle.image.src.2}
{/if}
<a href="{$sArticle.linkDetails|rewrite:$sArticle.articleName}" title="{$sArticle.articleName}" class="artbox_thumb" {if isset($sArticle.image.src)} 
	style="background: url({$image}) no-repeat center center"{/if}>
{if !isset($sArticle.image.src)}<img src="{link file='frontend/_resources/images/no_picture.jpg'}" alt="{s name='ListingBoxNoPicture'}{/s}" />{/if}</a>
{/block}
 
{* Article name *}
{block name='frontend_listing_box_article_name'}
<a href="{$sArticle.linkDetails|rewrite:$sArticle.articleName}" class="title" title="{$sArticle.articleName}">{$sArticle.articleName|truncate:47}</a>
{/block}
 
{* Description *}
{block name='frontend_listing_box_article_description'}
{if $sTemplate eq 'listing-1col'}
	{assign var=size value=270}
{else}
	{assign var=size value=60}
{/if}
<p class="desc">{if $sTemplate != 'listing'}
	{$sArticle.description_long|strip_tags|truncate:$size}
	{/if}
</p>
{/block}
 
...
 

Wie wir hier sehen, gibt es um dem Produktbild einen Block ("frontend_listing_box_article_picture") und um der Beschreibung einen Block ("frontend_listing_box_article_description"), die wir für unsere Anpassungen bearbeiten bzw. in diesen Fall überschreiben werden.

Zuerst fangen wir aber wieder einmal damit an, die Datei "listing/box_article.tpl" vom Mastertemplate zu erben.

 
{extends file="../_default/frontend/listing/box_article.tpl"}
 

1. Ändern des Produktbildes

Um das Produktbild von der Größe zu ändern müssen wir nur eine neue Bildgröße angeben. Hierzu überschreiben wir den Block "frontend_listing_box_article_picture" mit folgenden Code:

 
{block name='frontend_listing_box_article_picture'}
	{assign var=image value=$sArticle.image.src.4}
 
	<a href="{$sArticle.linkDetails|rewrite:$sArticle.articleName}" title="{$sArticle.articleName}" class="artbox_thumb" {if isset($sArticle.image.src)} 
		style="background: url({$image}) no-repeat center center"{/if}>
	{if !isset($sArticle.image.src)}<img src="{link file='frontend/_resources/images/no_picture.jpg'}" alt="{s name='ListingBoxNoPicture'}{/s}" />{/if}</a>
{/block}
 

Wie Sie sehen, geben wir die Größe des Bildes nur im "assign"-Befehl an. Hier durch erstellt "assign" eine neue Templatevariable mit dem Namen "$image" die jetzt den Bildpfad der Bildnummer 4 (Standard: 285x255px) beinhaltet. Mit dieser Variable wird das Produktbild als Hintergrundbild für ein "anchor"-Element definiert.

2. Länge des Beschreibungstextes ändern

Um die Länge des Beschreibungstextes zu ändern, überschreiben wir jetzt den Block "frontend_listing_box_article_description" mit folgenden Code:

 
{* Description *}
{block name='frontend_listing_box_article_description'}
	<p class="desc">
		{$sArticle.description_long|strip_tags|truncate:400}
	</p>
{/block}
 

Wie Sie sehen, geben wir den Beschreibungstext nur in einen "p"-Element aus und kürzen den Text mit den Smarty-Modifier "truncate" auf eine Zeichenlänge von 400. Dazu entfernen wir noch alle HTML-Tags durch den Modifier "strip_tags" aus der Beschreibung, da diese an dieser Stelle nicht benötigt werden.

Ihre komplette Datei "box_article_new.tpl" sollte jetzt wie folgt aussehen:

 
{extends file="../_default/frontend/listing/box_article.tpl"}
 
{block name='frontend_listing_box_article_picture'}
	{assign var=image value=$sArticle.image.src.4}
 
	<a href="{$sArticle.linkDetails|rewrite:$sArticle.articleName}" title="{$sArticle.articleName}" class="artbox_thumb" {if isset($sArticle.image.src)} 
		style="background: url({$image}) no-repeat center center"{/if}>
	{if !isset($sArticle.image.src)}<img src="{link file='frontend/_resources/images/no_picture.jpg'}" alt="{s name='ListingBoxNoPicture'}{/s}" />{/if}</a>
{/block}
 
{* Description *}
{block name='frontend_listing_box_article_description'}
	<p class="desc">{if $sTemplate != 'listing'}
		{$sArticle.description_long|strip_tags|truncate:400}
		{/if}
	</p>
{/block}
 

Als nächsten und letzten Schritt in diesen Tutorial werden wir jetzt die Artikelboxen nur noch nach unseren Vorstellungen formatieren.

Dazu erstellen wir zuerst einen Ordner mit den Namen "_resources" im Unterordner "templates/_local/frontend" und erstellen unter "_resources" den Unterordner "styles", wo wir eine neue Datei mit dem Namen "tut_listing.css" erstellen. Diese Datei ist unser Stylesheet, wo wir die Formatierung der Artikelboxen vornehmen werden.

Bevor wir aber die Artikelboxen formatieren können, müssen wir unser Stylesheet erstmal laden. Das Laden von CSS-Dateien geschieht im HTML "head"-Bereich der Seite.

Um unser Stylesheet zu laden, erstellen wir unter "_local/frontend/" einen Ordner mit dem Namen "index" und in diesen Ordner erstellen wir jetzt eine neue Datei mit dem Namen "header.tpl".

In dieser Datei erben wir wieder die "index/header.tpl" aus dem Mastertemplate.

 
{extends file="../_default/frontend/index/header.tpl"}
 

Jetzt brauchen wir einen passenden Block, in dem wir unser Stylesheet laden könnt. Hierzu finden Sie in der "index/header.tpl" den Block "frontend_index_header_css_screen".

 
...
 
{* Stylesheets and Javascripts *}
{block name="frontend_index_header_css_screen"}
	<link type="text/css" media="all" rel="stylesheet" href="{link file='frontend/_resources/styles/framework.css'}" />
	<link type="text/css" media="screen, projection" rel="stylesheet" href="{link file='frontend/_resources/styles/style.css'}" />
	<link type="text/css" media="screen, projection" rel="stylesheet" href="{link file='frontend/_resources/styles/colors.css'}" />
	<link type="text/css" media="screen, projection" rel="stylesheet" href="{link file='frontend/_resources/styles/plugins.css'}" />
	<link type="text/css" media="screen, projection" rel="stylesheet" href="{link file='frontend/_resources/styles/enrichments.css'}" />
{/block}
 
...
 

Diesen Block werden wir jetzt in der Datei "_local/frontend/index/header.tpl" bearbeiten und unser Stylesheet nach allen anderen Dateien laden, wozu der Parameter append dient.

 
{block name="frontend_index_header_css_screen" append}
	<link type="text/css" media="screen, projection" rel="stylesheet" href="{link file='frontend/_resources/styles/tut_listing.css'}" />
{/block}
 

Wenn wir jetzt den Template-Cache im Backend leeren und den Shop aktualisieren, dann sehen wir dass unser Stylesheet geladen wird.

Jetzt können wir mit der Formatierung der Artikelboxen beginnen. Fügen Sie hierzu einfach den folgenden Code-Block in Ihre "tut_listing.css" ein, welche Sie unter "_local/frontend/_resources/styles" finden.

 
/*	TUTORIAL LISTING
	------------------------ */
#tut-listing .artbox {
	width: 628px;
}
#tut-listing .artbox .inner {
	width: 608px;
	height: 278px;
}
 
/* Thumbnail */
#tut-listing .artbox_thumb {
	width: 285px;
	height: 285px;
	margin-top: 0px;
}
 
/* Articlename */
#tut-listing a.title {
	position: absolute;
	top: 30px;
	left: 300px;
	display: block;
	font-size: 16px;
}
 
/* Description */
#tut-listing p.desc {
	width: 320px;
	position: absolute;
	top: 60px;
	left: 300px;
}
 
/* Price */
#tut-listing .artbox p.price, #tut-listing .artbox p.pseudoprice {
	bottom: 48px;
	left: 300px;
}
#tut-listing .artbox p.price span, #tut-listing .artbox p.pseudoprice span {
	font-size: 18px;
}
 
/* Actions */
#tut-listing div.actions {
	left: 410px;
	width: 200px;
	bottom: 12px;
}
#tut-listing div.actions a {
	width: 190px;
}
 

In diesen Tutorial haben Sie gelernt, wie man ein komplett angepasstes Artikellisting erstellt und wie Sie die wichtigsten Bereiche des Listings abändern können. Folgende Schritten haben wir durchgeführt:

• 1. Backendkonfiguration vornehmen und das Listing in den Kategorieeinstellungen wählen
• 2. Eine eigene listing.tpl erstellen und hier eine angepasste Artikelbox laden
• 3. Die Artikelbox an Ihre Bedürfnisse anpassen
• 4. CSS Eigenschaften setzen und die Artikelbox formatieren

Das komplette Artikellisting sollte jetzt in seiner vollen Pracht so aussehen: