Änderungen am Template vornehmen

Artikelversion

5.5.0 oder neuer

Inhaltsverzeichnis

Ziel

Ziel dieses Tutorials soll es sein, an Hand von kleinen Beispielen die Anpassung des Templates zu beschreiben und das Vorgehen aufzuzeigen. In den ersten Beispielen werden die Schritte der Durchführung sehr genau beschrieben, in den weiteren verzichten wir darauf, da die Vorgehensweise stehts dem gleichen Muster folgt.

 

Allgemeine Vorgehensweise

Als Vorgehensweise legen wir überall die gleichen Schritte zu Grunde:

  • Definition der Anpassung
  • Suchen der Templatedatei, die für den gesuchten Bereich zuständig ist
  • Mit der Anpassung im eigenen Template ableiten
  • Testen

Sowohl das Bare-Theme als auch das Responsive Theme sind Standard Templates, die nie geändert werden sollten, da Änderungen bei einem Update überschrieben werden. Daher muss immer korrekt in Deinen eigenen Theme abgeleitet werden.

Falls noch nicht vorhanden, erstelle Dir im Backend im Theme Manager Dein eigenes Theme, welches vom Responsive Theme ableitet. Shopware legt Dir dann im /themes Ordner die Ordnerstruktur für Dein Theme an, befüllt dies aber nicht mit Dateien, da diese nach der Vererbungslogik aus den Standard-Templates geholt werden. (mehr zur Vererbung findest Du hier)

 

Größentabelle auf der Detailseite

Ziel soll sein, eine Verlinkung zur Größentabelle auf der Detailseite anzuzeigen, diese soll sich direkt unterhalb der Artikelnummer und den Freitextfeldern 1 und 2 befinden, sofern der Artikel mit dem entsprechenden Freitextfeld versehen ist.

 

Artikelattribut erstellen / pflegen

Da die Verlinkung nur bei sinnigen Artikel angezeigt werden soll, macht es Sinn, dies über Freitextfelder zu regeln. Erstelle also ein neues Freitextfeld für die Artikel, im Beispiel nutzen wir hier "attr4":

 

 

Das Freitextfeld ist nun im Backend verfügbar und kann bearbeitet werden.

 

Templateanpassung

Wie finde ich die Stelle, die ich anpassen muss?

Um herauszufinden, wo sich diese Änderung abspielen muss, öffne das Theme-Verzeichnis des Bare Themes. Da sich die hier gewünschte Änderung auf der Detailseite abspielt, navigiere in den Ordner /themes/Frontend/Bare/frontend/detail. Hier findest Du alle Template-Dateien, die für die Detailseite verantwortlich sind.

Da unsere Änderung unterhalb der Artikelnummer stehen soll, brauchen wir also den Code, der die Artikelnummer bereitstellt. Du kannst hierfür z.B. mittels Entwicklungsumgebung oder auch einem Editor wie "Notepad++" die Dateien nach Stichwörtern durchsuchen. Suche daher nun in allen Dateien des Pfades nach "ordernumber", da die "ordernumber" in mehreren Dateien Verwendung findet, musst Du also durch die Ergebnisse navigieren und schauen, welche Datei die gewünschte Aufgabe erfüllt. In diesem Fall ist das die index.tpl, da hier die Blöcke zu Artikelnummer und den Attributfeldern direkt untereinander stehen. Der Block für die Artikelnummer heißt hier: frontend_detail_data_ordernumber.

Wir wissen also nun, dass die index.tpl die Datei ist, von der wir ableiten müssen und der Block frontend_detail_data_ordernumber heißt.

 

Änderung korrekt ableiten

Erstelle nun in /themes/Frontend/DEINTHEME/frontend/detail eine Datei namens index.tpl.

Zu aller erst wird definiert, dass diese Datei vom Original ableitet, die erste Zeile lautet also:

 


{extends file="parent:frontend/detail/index.tpl"}

 

Nun erweitern wir den Block. Da die Größentabelle unter der Artikelnummer stehen soll, muss der vorherige Inhalt über ein {$smarty.block.parent} geladen werden (Erklärung). Der erweiterte Block sieht dann so aus:

 


 
{* Append Article SKU with link to size chart *}
{block name='frontend_detail_data_ordernumber'}
	{$smarty.block.parent}
    {if $sArticle.attr4 == true}
        <li class="base-info--entry entry--sku">
 
            {* Size chart - Label *}
            {block name='frontend_detail_data_sizechart_label'}
                <strong class="entry--label">
                    {s name="SizeChartLabel" namespace="frontend/detail/data"}{/s}
                </strong>
            {/block}
 
            {* Size chart - Link *}
            {block name='frontend_detail_data_sizechart_link'}
                <strong class="entry--content">
                    {s name="SizeChartLink" namespace="frontend/detail/data"}{/s}
                </strong>
            {/block}
        </li>
    {/if}
{/block}
 

 

Sobald das Theme im Shop neu kompiliert wird, wird der neue Code nun kompiliert und somit aktiviert.

 

 

Textbausteine füllen

Die Textbausteine "SizeChartLabel" und "SizeChartLink" sind aktuell noch leer und müssen noch über die Textbaustein-Verwaltung gefüllt werden. Öffne dazu die Textbausteinverwaltung und suche die Textbausteine anhand des Namens oder alternativ unter dem vergebenen Namespace "frontend/detail/data". Als Beispiel füllen wir das Label mit "Größenberatung?" und den Link mit folgendem HTML-Code:

 


 
<a href="/groessentabelle" title="Größentabelle" target="_blank">Größentabelle</a>
 

 

Die Verlinkung zu /groessentabelle setzt an dieser Stelle natürlich voraus, dass eine solche Seite existiert, diese kann Beispielsweise über die Shopseiten erstellt werden.

 

Weitere Beschreibung unterhalb des Listings

In machen Fällen kann es sinnvoll sein, eine weitere Beschreibung unterhalb des Kategorielistings anzuzeigen. Ziel dieses Tutorials ist es also, eine Textbox ähnlich der Kategoriebeschreibung auch unterhalb des Listings anzuzeigen, sofern die Kategorie über diesen Text verfügt.

 

Artikelattribut erstellen / pflegen

Da die Beschreibungsbox nur dann angezeigt werden soll, wenn der Text auch vorhanden ist, macht es Sinn, dies über Freitextfelder zu regeln.

Erstelle also ein neues Freitextfeld vom Typ "Größerer Text" oder "HTML" für die Kategorien, im Beispiel nutzen wir hier "attribute1":

Das Freitextfeld ist nun im Backend verfügbar und kann bearbeitet werden.

 

Templateanpassung

Wie finde ich die Stelle, die ich anpassen muss?

Um herauszufinden, wo sich diese Änderung abspielen muss, öffne das Theme-Verzeichnis des Bare Themes. Da sich die hier gewünschte Änderung im Listing abspielt, navigiere in den Ordner /themes/Frontend/Bare/frontend/listing, hier findest Du alle Template-Dateien, die für das Listing verantwortlich sind.

Da wir in diesem Fall nicht wissen, wo wir ansetzen müssen, schauen wir zunächst in die index.tpl, die für jede Komponente des Themes das "Grundgerüst" darstellt und finden dort das inkludierte Listing und darunter die Tagcloud.

Wir wissen also nun, dass die index.tpl die Datei ist, von der wir ableiten müssen und der Block frontend_listing_index_listing heißt.

 

Variablen herausfinden

Um an das Attribut zu kommen, muss die Variable korrekt sein. Du kannst Dir zum Finden der Variable das Standard Theme zu Nutze machen:

Schaue zuerst, mit welchen Variablen das Theme an der Stelle arbeitet. im Listing ist das zum Beispiel $sCategoryContent. Du kannst Dir in Deiner abgeleiteten Datei nun mittels

 


<pre>{$sCategoryContent|print_r}</pre>

 

alle Variablen aus dem Array "sCategoryContent" ausgeben lassen und Dir hier einfach Deine gesuchte Variable suchen.

 

Änderung korrekt ableiten

Erstelle nun in /themes/Frontend/DEINTHEME/frontend/listing eine Datei namens index.tpl.

Zu aller erst wird definiert, dass diese Datei vom Original ableitet, die erste Zeile lautet also:

 


{extends file="parent:frontend/listing/index.tpl"}

 

Der Block "frontend_listing_index_listing" wird dann wieder abgeleitet und wir fügen das {$smarty.block.parent} am Anfang hinzu, sodass wir den Inhalt danach ins Template geben:

 


 
{* Listing *}
{* Listing um Beschreibung erweitern *}
{block name="frontend_listing_index_listing"}
{$smarty.block.parent}
    {if $sCategoryContent.attribute.attribute1}
        {$sCategoryContent.attribute.attribute1}
    {/if}
{/block}
 

 

Da hier nur das Attribut selbst ausgegeben wird, sieht das natürlich noch nicht gut aus:

 

 

Also gehen wir hin und holen uns das Styling der Kategoriebschreibung, damit die untere Box gleich der oberen aussieht. Wie im Abschnitt "Wie finde ich die Stelle, die ich anpassen muss?" beschrieben, suchen wir also nun die Kategoriebeschreibung, die sich in der text.tpl befindet und adaptieren das Schema auf unsere Beschreibung:

 


 
{block name="frontend_listing_index_listing"}
{$smarty.block.parent}
    <div class="hero-unit category--teaser panel has--border is--rounded">
        <div class="hero--text panel--body is--wide">
            {if $sCategoryContent.attribute.attribute1}
                <div class="teaser--text-long">
                    {$sCategoryContent.attribute.attribute1}
                </div>
                <div class="teaser--text-short is--hidden">
                    {$sCategoryContent.attribute.attribute1|strip_tags|truncate:200}
                    <a href="#" title="{"{s namespace="frontend/listing/listing" name="ListingActionsOpenOffCanvas"}{/s}"|escape}" class="text--offcanvas-link">
                        {s namespace="frontend/listing/listing" name="ListingActionsOpenOffCanvas"}{/s} &raquo;
                    </a>
                </div>
                <div class="teaser--text-offcanvas is--hidden">
                    <a href="#" title="{"{s namespace="frontend/listing/listing" name="ListingActionsCloseOffCanvas"}{/s}"|escape}" class="close--off-canvas">
                        <i class="icon--arrow-left"></i> {s namespace="frontend/listing/listing" name="ListingActionsCloseOffCanvas"}{/s}
                    </a>
                    <div class="offcanvas--content">
                        <div class="content--title">{$sCategoryContent.cmsheadline}</div>
                        {$sCategoryContent.attribute.attribute1}
                    </div>
                </div>
            {/if}
        </div>
    </div>
{/block}
 

 

Das Ergebnis sieht dann wie folgt aus:

Desktop:

 

 

Mobile mit ausgeklappter OffCanvas Beschreibungsbox:

 

Gewisse Artikel immer als Lieferbar deklarieren

Ziel dieses Tutorials soll es sein, gewisse Artikel, zum Beipsiel Dropshipping-Artikel als immer lieferbar zu deklarieren, egal wie hoch der Lagerbestand von Shopware ist.

Artikelattribut erstellen / pflegen

Da die Lieferzeit auch hier wieder für Artikel separat aktivierbar sein soll, macht es Sinn, dies über Freitextfelder zu regeln.

Erstelle also ein neues Freitextfeld vom Typ "Checkbox" für die Artikel, im Beispiel nutzen wir hier "attr5":

 

 

Das Freitextfeld ist nun im Backend verfügbar und kann bearbeitet werden.

 

Templateanpassung

Wie finde ich die Stelle, die ich anpassen muss?

Die Lieferbarkeit der Artikel wird in Shopware an vielen Stellen angezeigt, daher suchen wir in unserer Entwicklungsumgebung / Notepad++ innerhalb des Bare Themes wieder nach Stichwörtern, um deren Verwendung zu ermitteln. Dabei stellen wir fest, dass "delivery" zumeist in der delivery_informations.tpl verwendet wird, die auch an den relevanten Stellen im Frontend inkludiert wird.

Wir wissen also, welche Datei für die Lieferzeitenanzeige verantwortlich ist, da diese nur einen Block hat, ist auch dieser klar.

 

Änderung korrekt ableiten

Erstelle nun in /themes/Frontend/DEINTHEME/frontend/plugins eine Datei namens delivery_informations.tpl.

Zu aller erst wird definiert, dass diese Datei vom Original ableitet, die erste Zeile lautet also:

 


{extends file="parent:frontend/plugins/delivery_informations.tpl"}

 

Nun Ändern wir den Block so ab, dass wir auf unser Attribut abfragen und dann den entsprechenden Lieferstatus ausgeben. Der "Sofort Lieferbar" Status lässt sich im Template anhand des Namens ableiten: "DetailDataInfoInstock" - Alternativ kannst Du aber auch nach dem Textbaustein suchen und dessen Namen im Template suchen, das geht genauso. Nun bauen wir die Änderung ein:

 


 
{block name='frontend_widgets_delivery_infos'}
    {if $sArticle.attr5 == true || $sBasketItem.additional_details.attr5 == true}
        <div class="product--delivery">
            <link href="http://schema.org/InStock" itemprop="availability">
            <p class="delivery--information">
				<span class="delivery--text delivery--text-available">
					<i class="delivery--status-icon delivery--status-available"></i>
                    {s name="DetailDataInfoInstock"}{/s}
				</span>
            </p>
        </div>
    {else}
        {$smarty.block.parent}
    {/if}
{/block}
 

 

Und somit wird der Artikel im Frontend auf "Sofort Lieferbar" deklariert, auch wenn der Bestand 0 ist.

 

Etwas aus dem Template entfernen

Falls Du Inhalt aus dem Frontend bewusst ausblenden willst, funktioniert das am einfachsten, indem Du den gewünschten Block leer überschreibst, dadurch wird der Inhalt im Frontend ausgeblendet. Dazu ein kurzes Beispiel:

 


 
{extends file="parent:PARENT"}
 
{block name='NAME'}
{/block}
 

 

Beachte, dass hier die gleichen Voraussetzungen gelten, wie in den anderen Beispielen auch, also immer nur in Deinem Theme ableiten und niemals das originale Theme ändern!

 

Anpassung der robots.txt

Da Shopware die robots.txt ebenfalls über das Theme ausliefert, kann diese auch bequem angepasst werden, der Pfad zur Template-Datei, die für die Erzeugung der robots.txt verantwortlich ist, ist folgender: /frontend/robots_txt/index.tpl

Hier kannst Du in Deinem Theme wieder entsprechend ableiten, um die robots.txt nach Deinen Wünschen anzupassen.

 

Abweichende Lieferadresse auf der Rechnung ausgeben

Bei den Dokumenten handelt es sich ebenfalls um Templatedateien, die Standard-Dokumententemplates findest Du unter Bare/documents, die Dateien haben die folgende Bedeutung:

 

DateiVerantwortlich für
index.tplRechnung
index_gs.tplGutschrift
index_ls.tplLieferschein
index_sr.tplStornorechnung

 

 

Beispielhaft ergänzen wir nun den Block der Lieferart um die Angabe der Lieferadresse, falls diese abweichend zur Rechnungsadresse ist.

 


 
{block name="document_index_info_dispatch"}
    {if $Order._dispatch.name}
        <div style="font-size:11px;color:#333;">
            {s name="DocumentIndexSelectedDispatch"}{/s}
            {$Order._dispatch.name}
 
        </div>
    {/if}
    {assign var="shippingaddress" value="shipping"}
    {assign var="shippingArr" value=$User.$shippingaddress}
    {assign var="billingArr" value=$User.$address}
 
    {$billingString = $billingArr['salutation']|cat:$billingArr['title']|cat:$billingArr["firstname"]|cat:$billingArr['lastname']|cat:$billingArr['street']|cat:$billingArr['street']|cat:$billingArr['city']}
    {$shippingString = $shippingArr['salutation']|cat:$shippingArr['title']|cat:$shippingArr["firstname"]|cat:$shippingArr['lastname']|cat:$shippingArr['street']|cat:$shippingArr['street']|cat:$shippingArr['city']}
 
    {if $shippingString != $billingString}
        {s name="DocumentIndexSelectedShippingaddress"}{/s}
 
        <div style="margin-left: 20px;">
            {if $User.$shippingaddress}
                {$User.$shippingaddress.salutation|salutation}
                {if {config name="displayprofiletitle"}}
                    {$User.$shippingaddress.title}<br/>
                {/if}
                {$User.$shippingaddress.firstname} {$User.$shippingaddress.lastname}
 
                {$User.$shippingaddress.street}
 
                {if {config name=showAdditionAddressLine1}}
                    {$User.$shippingaddress.additional_address_line1}
 
                {/if}
                {if {config name=showAdditionAddressLine2}}
                    {$User.$shippingaddress.additional_address_line2}
 
                {/if}
                {if {config name=showZipBeforeCity}}
                    {$User.$shippingaddress.zipcode} {$User.$shippingaddress.city}
 
                {else}
                    {$User.$shippingaddress.city} {$User.$shippingaddress.zipcode}
 
                {/if}
            {/if}
        </div>
 
    {/if}
{/block}
 

 

Weitere Länderflaggen für den Sprachwechsel hinzufügen

Im Standard sind für den Sprachwechsel die Flaggen für Deutschland, Großbritannien, die Niederlade, Frankreich, Spanien und Italien hinterlegt. Um weitere Flaggen für die Auswahl bereitzustellen, sind 2 Theme-Anpassungen nötig.

Anpassungen

ico-flags.png

In dieser Datei sind die einzelnen Flaggen zusammengefasst und diese befindet sich im Verzeichnis "/themes/Frontend/Responsive/frontend/_public/src/img". Die einzelnen Flagge haben eine Größe von 14 x 11 px. Mit einem Bildearbeitungprogramm kann nun unterhalb der existierenden Flaggen eine oder mehrere Flagge(n) hinzugefügt werden.

Die angepasste Datei kannst du dann direkt in Dein Theme an dieser Stelle einfügen: /themes/Frontend/DEINTHEME/frontend/_public/src/img/ico-flags.png

flags.less

Die Datei flags.less enthält die Informationen, an welchen Koordinaten innerhlab der ico-flags.png die einzelnen Länderflaggen positioniert sind. Die Datei befindet sich im Verzeichnis "/themes/Frontend/Responsive/frontend/_public/src/less/_components" und wird nun um die Informationen für die vorher der ico-flags.png hinzugefügten Flaggen ergänzt. Den ISO-Code für die jeweiligen Länder findest Du z.B. im Backend unter "Einstellungen > Grundeinstellungen > Shopeinstellungen > Lokalisierungen". Es ist wichtig, dass der ISO-Code, der unter Lokalisierungen angegeben ist, genauso in der flags.less hinterlegt wird, da die Zuordnung der Flagge über die Lokalisierung erfolgt.

In Deinem Theme speicherst du die angepasste Datei unter: /themes/Frontend/DEINTHEME/frontend/_public/src/less/_components/flags.less

Beispiel

Exemplarisch ist hier die Erweiterung für Schweden aufgeführt

ico-flags.png:

 

 

flags.less:


 
/*
Language Flags
==================================================
Displays a country flag the size of 14px x 11px used for language selections purposes.
*/
 
.language--flag {
    .unitize-height(11);
    .unitize-width(14);
    background: url("../../img/ico-flags.png") no-repeat 0 0;
    display: inline-block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
 
    // We need to work with pixels here
    &.de_DE { background-position: 0 0; }
    &.en_GB { background-position: 0 -11px; }
    &.nl_NL { background-position: 0 -22px; }
    &.fr_FR { background-position: 0 -33px; }
    &.es_ES { background-position: 0 -44px; }
    &.it_IT { background-position: 0 -55px; }
    &.sv_SE { background-position: 0 -66px; }
}
 

 

Zahlungsstatus von Bestellungen im Frontend anzeigen

Am einfachsten kannst Du den Zahlstatus im Frontend unter dem Bestellstatus bereitstellen. Erweiter hierzu die "order_item.tpl" in Deinem eigenen Theme unter: /themes/Frontend/EIGENERTHEMENAME/frontend/account/. Dort kannst Du dann den folgenden Block mit dem Zahlstautstatus erweitern:

 


 
{extends file="parent:frontend/account/order_item.tpl"}
 
{block name="frontend_account_order_item_status_value"}
	{$smarty.block.parent}
	<div class="column--value">
		<span class="order--status-icon status--{$offerPosition.cleared}"></span>
		{if $offerPosition.cleared==9}
			{s name="partially_invoiced"}Teilweise in Rechnung gestellt{/s}
		{elseif $offerPosition.cleared==10}
			{s name="completely_invoiced"}Komplett in Rechnung gestellt{/s}
		{elseif $offerPosition.cleared==11}
			{s name="partially_paid"}Teilweise bezahlt{/s}
		{elseif $offerPosition.cleared==12}
			{s name="completely_paid"}Komplett bezahlt{/s}
		{elseif $offerPosition.cleared==13}
			{s name="1st_reminder"}1. Mahnung{/s}
		{elseif $offerPosition.cleared==14}
			{s name="2nd_reminder"}2. Mahnung{/s}
		{elseif $offerPosition.cleared==15}
			{s name="3nd_reminder"}3. Mahnung{/s}
		{elseif $offerPosition.cleared==16}
			{s name="encashment"}Inkasso{/s}
		{elseif $offerPosition.cleared==17}
			{s name="open"}Offen{/s}
		{elseif $offerPosition.cleared==18}
			{s name="reserved"}Reserviert{/s}
		{elseif $offerPosition.cleared==19}
			{s name="delayed"}Verzoegert{/s}
		{elseif $offerPosition.cleared==20}
			{s name="re_crediting"}Wiedergutschrift{/s}
		{elseif $offerPosition.cleared==21}
			{s name="review_necessary"}Überprüfung notwendig{/s}
		{/if}
	</div>
{/block}
 

 

Icon korrekt zuweisen

Damit nun noch das entsprechende Icon neben dem Status angezeigt wird musst Du noch ein paar Anpassungen am Style vornehmen. Wenn Du in LESS erfahren bist, kannst Du wie gewohnt deine Anpassungen an den LESS Datein vornehmen. Solltest Du nur diese Anpassungen vornehmen möchten, so kannst Du folgenden Code in eine all.less in dem Verzeichnis /themes/Frontend/EIGENERTHEMENAME/frontend/_public/src/less hinzufügen:

 


 
.order--status-icon {
	&.status--9, //partially_invoiced
	&.status--10, //completely_invoiced
	&.status--11, //partially_paid
	&.status--13, //1st_reminder
	&.status--14, //2nd_reminder
	&.status--15, //3nd Reminder
	&.status--17, //open
	&.status--18, //reserved
	&.status--19{ //delayed
		background: @highlight-info;
	}
 
	&.status--12, //completely_paid
	&.status--20{ //re_crediting
		background: @highlight-success;
	}
 
	&.status--16, //encashment
	&.status--21{ //review_necessary
		background: @highlight-error;
	}
}
 

 

Wenn Du nach der Anpassung den Cache leerst und Dein Theme neu kompilierst wird der Zahlstatus wie folgt im Frontend angezeigt: