Tutorial: Änderungen am Template vornehmen

Achtung! Die hier zur Verfügung gestellten Informationen wurden zum Zeitpunkt der Veröffentlichung dieses Artikels getestet, können sich zwischenzeitlich aber geändert haben. Die Durchführung dieses Tutorials geschieht auf eigene Gefahr! Lege Dir vor der Durchführung ein Backup an, sodass Du dieses im Zweifel zurückspielen kannst. Beachte, dass es sich hier um Anpassungen von Shopware handelt und der Inhalt dieses Tutorials daher nicht offiziell supportet wird!

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.

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

Beispiele

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 dem Editor "Notepad++" die Dateien nach Stichwörtern durchsuchen. Suche daher nun in allen Dateien des Pfades nach "ordernumber", dies bringt uns zu folgendem Ergebnis:

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

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)

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 Block mit append erweitert werden (Erklärung). Der erweiterte Block sieht dann so aus:

 
{* Append Article SKU with link to size chart *}
{block name='frontend_detail_data_ordernumber' append}
    {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

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

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 mittels append abgeleitet, sodass wir den Inhalt danach ins Template geben:

 
{* Listing *}
{* Listing um Beschreibung erweitern *}
{block name="frontend_listing_index_listing" append}
    {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" append}
    <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, daher sieht das schon ganz richtig aus:

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

Änderung korrekt ableiten

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

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:

Datei Verantwortlich für
index.tpl Rechnung
index_gs.tpl Gutschrift
index_ls.tpl Lieferschein
index_sr.tpl Stornorechnung

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 interessante Artikel:

Artikel und Kategorien für bestimmte Kundengruppen sperren

Vorwort Mit Shopware können Kategorien sowie Artikel standardmäßig für bestimmte Kundengruppen unsichtbar geschaltet werden. Somit hast Du die Option, einen B2C- mit einem B2B-Shop zu kombinieren. Im Zusammenspiel mit dem Premium-Plugin...

weiterlesen

Aufwandspauschale statt Versandkosten

Du möchtest grundsätzlich kostenlosen Versand anbieten, aber diesen durch eine Aufwandspauschale abfedern? In diesem Tutorial zeigen wir, wie das gehen kann. Im Tutorial nutzen wir dafür den Mindermengenzuschlag. Kundengruppe modifizeren...

weiterlesen

Tutorial: Frontend-Texte suchen und bearbeiten

Vorwort In diesem Tutorial geht es darum herauszufinden, wie Verlinkungen aus dem Frontend, zum Beispiel die AGB-Verlinkung oder die Datenschutzbestimmungen im Checkout, zu finden sind. Alle Texte im Frontend, die keine Artikeldaten sind,...

weiterlesen
€ 1,00

Preise inkl. gesetzlicher
MwSt. + Versandkosten*