DEEN
Alle Ergebnisse anzeigen

Änderungen am Template vornehmen

Ziel

Ziel dieses Tutorials soll es sein anhand 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 stets 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 Niederlande, Frankreich, Spanien und Italien hinterlegt. Diese sind in der Datei /themes/Frontend/Responsive/frontend/_public/src/less/_components/flags.less hinterlegt.
Um weitere Flaggen für die Auswahl bereitzustellen, ist eine Theme-Anpassung notwendig.

Anpassungen

flags.less

Die Datei flags.less enthält die Informationen zu den Lokalisierungen und Flaggen, die verwendet werden sollen.
Jede Lokalisierung erhält einen eigenen Eintrag, der mit dem ISO-Code beginnt. Diesen Code kannst Du in den Grundeinstellungen unter Shopeinstellungen > Lokalisierungen entnehmen.

Generell können Flaggen per CSS selbst erstellt werden.
Dies bietet sich vor allem für Flaggen an, die z.B. aus horizontalen/vertikalen Streifen bestehen.
Als Anhaltspunkt können auch die im Standard hinterlegten Flaggen herangezogen werden.

Auch komplexere Flaggen können so erstellt werden. Da hier allerdings mit mehreren Layern zu arbeiten ist, erfordert dies jedoch ggf. erweiterte CSS-Kentnisse.
Als einfachere Alternative ist es möglich, eine fertige Flagge als Base64 einzubinden. Hierzu wird ein Bild in eine Zeichenfolge umformatiert und diese Zeichenfolge in der Datei hinterlegt.
Weitere Details zu Base64 sowie einen Konverter findest Du unter https://www.base64-image.de/

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

Beispiel

Flagge als CSS erstellen
Exemplarisch ist hier die Erweiterung für Ungarn aufgeführt


&.hu_HU { background-position: 0 0; background-image: linear-gradient(to bottom, #DD0000 33%, white 33%, white 66%, #336333 66%); }

Der Eintrag in der flags.less beginnt mit dem ISO-Code der Lokalisierung, in diesem Fall hu_HU.
Danach folgen die Informationen zur Erstellung der Flagge. Der Anfang


background-position: 0 0; background-image:

ist für alle per CSS erstellten Flaggen identisch. Der Teil 


linear-gradient(to bottom, #DD0000 33%, white 33%, white 66%, #336333 66%);

beinhaltet die Informationen zur Erstellung der Flagge. In diesem Fall wird die Flagge von oben nach unten ("linear-gradient(to bottom") erstellt. Der erste Teil nimmt 33% der Fläche ein und erhält die Farbe mit dem HEX-Wert DD0000. Der zweite Farbbereich beginnt bei 33% und endet bei 66% mit der Farbe Weiß. Der letzte Bereich beginnt bei 66% und erhält den Farbwert 336333).

Die vollständige Datei sieht dann wie folgt aus:


/*
Language Flags
==================================================
Displays a country flag the size of 14px x 11px used for language selections purposes.

inspired by: https://github.com/dhanishgajjar/css-flags

en_GB: we need to use svg for en_GB, cause it's smaller than the CSS-Version
*/

.language--flag {
    .unitize-height(11);
    .unitize-width(14);
    display: inline-block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;

    &.de_DE { background-position: 0 0; background-image: linear-gradient(to bottom, black 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%); }
    &.en_GB { background-position: 0 0; background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='640' height='480'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M-85 0h682v512H-85z'%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg clip-path='url%28%23a%29' transform='translate%2880%29 scale%28.94%29'%3E%3Cpath fill='%23006' d='M-256 0H768v512H-256z'%2F%3E%3Cpath fill='%23fff' d='M-256 0v57l910 455h114v-57L-141 0h-115zM768 0v57l-909 455h-115v-57L654 0h114z'%2F%3E%3Cpath fill='%23fff' d='M171 0v512h170V0H171zm-427 171v170H768V171H-256z'%2F%3E%3Cpath fill='%23c00' d='M-256 205v102H768V205H-256zM205 0v512h102V0H205zm-461 512L85 341h77l-342 171h-76zm0-512L85 171H9L-256 38V0zm606 171L692 0h76L427 171h-77zm418 341L427 341h76l265 133v38z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
    &.nl_NL { background-position: 0 0; background-image: linear-gradient(to bottom, #DD0000 33%, white 33%, white 66%, #21468B 66%); }
    &.fr_FR { background-position: 0 0; background-image: linear-gradient(to right, #21468B 33%, white 33%, white 66%, #DD0000 66%); }
    &.es_ES { background-position: 0 0; background-image: linear-gradient(#DD0000 25%, #FFCE00 25%, #FFCE00 75%, #DD0000 75%);}
    &.it_IT { background-position: 0 0; background-image: linear-gradient(to right, #009246 33%, white 33%, white 66%, #DD0000 66%);}
    &.hu_HU { background-position: 0 0; background-image: linear-gradient(to bottom, #DD0000 33%, white 33%, white 66%, #336333 66%); }
}


Flagge als Base64 einbinden
Exemplarisch ist hier die Erweiterung für Schweden aufgeführt.
Suche Dir zunächst eine Bilddatei der Flagge, die Du verwenden möchtestet und wandele diese in den Base64-Code um.


&.sv_SE { background-position: 0 0; background-size: 100%; background-repeat: no-repeat; background-image: url('data:image/gif;base64,R0lGODlhkgBvADAAACwAAAAAkgBvAIcAAAAAADMAAGYAAJkAAMwAAP8AKwAAKzMAK2YAK5kAK8wAK/8AVQAAVTMAVWYAVZkAVcwAVf8AgAAAgDMAgGYAgJkAgMwAgP8AqgAAqjMAqmYAqpkAqswAqv8A1QAA1TMA1WYA1ZkA1cwA1f8A/wAA/zMA/2YA/5kA/8wA//8zAAAzADMzAGYzAJkzAMwzAP8zKwAzKzMzK2YzK5kzK8wzK/8zVQAzVTMzVWYzVZkzVcwzVf8zgAAzgDMzgGYzgJkzgMwzgP8zqgAzqjMzqmYzqpkzqswzqv8z1QAz1TMz1WYz1Zkz1cwz1f8z/wAz/zMz/2Yz/5kz/8wz//9mAABmADNmAGZmAJlmAMxmAP9mKwBmKzNmK2ZmK5lmK8xmK/9mVQBmVTNmVWZmVZlmVcxmVf9mgABmgDNmgGZmgJlmgMxmgP9mqgBmqjNmqmZmqplmqsxmqv9m1QBm1TNm1WZm1Zlm1cxm1f9m/wBm/zNm/2Zm/5lm/8xm//+ZAACZADOZAGaZAJmZAMyZAP+ZKwCZKzOZK2aZK5mZK8yZK/+ZVQCZVTOZVWaZVZmZVcyZVf+ZgACZgDOZgGaZgJmZgMyZgP+ZqgCZqjOZqmaZqpmZqsyZqv+Z1QCZ1TOZ1WaZ1ZmZ1cyZ1f+Z/wCZ/zOZ/2aZ/5mZ/8yZ///MAADMADPMAGbMAJnMAMzMAP/MKwDMKzPMK2bMK5nMK8zMK//MVQDMVTPMVWbMVZnMVczMVf/MgADMgDPMgGbMgJnMgMzMgP/MqgDMqjPMqmbMqpnMqszMqv/M1QDM1TPM1WbM1ZnM1czM1f/M/wDM/zPM/2bM/5nM/8zM////AAD/ADP/AGb/AJn/AMz/AP//KwD/KzP/K2b/K5n/K8z/K///VQD/VTP/VWb/VZn/Vcz/Vf//gAD/gDP/gGb/gJn/gMz/gP//qgD/qjP/qmb/qpn/qsz/qv//1QD/1TP/1Wb/1Zn/1cz/1f///wD//zP//2b//5n//8z///8AAAAAAAAAAAAAAAAI/wALCBxIsKDBgwgTEhxjr6HDhxAdKpxIsaLFixgzaizAMKLHhxtDihxJcmTHjx9LqlzJUmUalChbypxJM+FJmBBr6tzZ8iZOiTyDCtXo86e9oUiTKnxpFKTSp1CL/oRKNalUnFWzBr0KU6vXmkybNvxKtqdYoGXTmjw7Vq3bjVxjvp17MaxYungpxk2Zt+/BvR79Cl7I9ujgwXabHh4MOOJiwY1zPu4b2elkvImNXs5bGe3mt53bfgZdePTczFNNuw1tWHVa1q7Vwo5dFjVW2mRn4/aqe3fW3r6p2u4a/Hfp4lWBI7d6fPnT4XKdK1UufWvz6kOpjy7Mvbv37+DDi6EfT768+fPo06tfz769+/fw48ufT7++/fv48+vfz7+///8ABijggAQWaOCBCCao4IIMNujggxBGKOGEEY1h4YUYZqjhhhx2iCEmhXko4ogklmjihV9ph11NKq44U4sutgQdXzHyBGONLl2HI0037rgWWz7q1GOQG80YGJEv6oikSkMueVGTTlZkpGNRrgRllQpdiSVCWm5p0JSSeSlSl2IORGNmmRwpiaZFYFq2JkZnlhmnmHN62aZnb1pU55Z7YtlnlXeKlqeeag5qU6GG/oVoogUF2hqjWS4KqUB/Rlmpk45OOtGlS3KKpKdEZqrpoUCOyqWkk4IapKimGqSqj6/uGCtUAQEAOw==');}

Der Eintrag in der flags.less beginnt mit dem ISO-Kürzel der Lokalisierung. Anschließend folgt ein für die Einbindung von Base64-Code allgemeingültiger Teil


background-position: 0 0; background-size: 100%; background-repeat: no-repeat; background-image:

Der individuelle Code wird dann daran angehangen.

Die vollständige Datei sieht dann wie folgt aus:


/*
Language Flags
==================================================
Displays a country flag the size of 14px x 11px used for language selections purposes.

inspired by: https://github.com/dhanishgajjar/css-flags

en_GB: we need to use svg for en_GB, cause it's smaller than the CSS-Version
*/

.language--flag {
    .unitize-height(11);
    .unitize-width(14);
    display: inline-block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;

    &.de_DE { background-position: 0 0; background-image: linear-gradient(to bottom, black 33%, #DD0000 33%, #DD0000 66%, #FFCE00 66%); }
    &.en_GB { background-position: 0 0; background-size: 100%; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='640' height='480'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M-85 0h682v512H-85z'%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg clip-path='url%28%23a%29' transform='translate%2880%29 scale%28.94%29'%3E%3Cpath fill='%23006' d='M-256 0H768v512H-256z'%2F%3E%3Cpath fill='%23fff' d='M-256 0v57l910 455h114v-57L-141 0h-115zM768 0v57l-909 455h-115v-57L654 0h114z'%2F%3E%3Cpath fill='%23fff' d='M171 0v512h170V0H171zm-427 171v170H768V171H-256z'%2F%3E%3Cpath fill='%23c00' d='M-256 205v102H768V205H-256zM205 0v512h102V0H205zm-461 512L85 341h77l-342 171h-76zm0-512L85 171H9L-256 38V0zm606 171L692 0h76L427 171h-77zm418 341L427 341h76l265 133v38z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");}
    &.nl_NL { background-position: 0 0; background-image: linear-gradient(to bottom, #DD0000 33%, white 33%, white 66%, #21468B 66%); }
    &.fr_FR { background-position: 0 0; background-image: linear-gradient(to right, #21468B 33%, white 33%, white 66%, #DD0000 66%); }
    &.es_ES { background-position: 0 0; background-image: linear-gradient(#DD0000 25%, #FFCE00 25%, #FFCE00 75%, #DD0000 75%);}
    &.it_IT { background-position: 0 0; background-image: linear-gradient(to right, #009246 33%, white 33%, white 66%, #DD0000 66%);}
    &.sv_SE { background-position: 0 0; background-size: 100%; background-repeat: no-repeat; background-image: url('data:image/gif;base64,R0lGODlhkgBvADAAACwAAAAAkgBvAIcAAAAAADMAAGYAAJkAAMwAAP8AKwAAKzMAK2YAK5kAK8wAK/8AVQAAVTMAVWYAVZkAVcwAVf8AgAAAgDMAgGYAgJkAgMwAgP8AqgAAqjMAqmYAqpkAqswAqv8A1QAA1TMA1WYA1ZkA1cwA1f8A/wAA/zMA/2YA/5kA/8wA//8zAAAzADMzAGYzAJkzAMwzAP8zKwAzKzMzK2YzK5kzK8wzK/8zVQAzVTMzVWYzVZkzVcwzVf8zgAAzgDMzgGYzgJkzgMwzgP8zqgAzqjMzqmYzqpkzqswzqv8z1QAz1TMz1WYz1Zkz1cwz1f8z/wAz/zMz/2Yz/5kz/8wz//9mAABmADNmAGZmAJlmAMxmAP9mKwBmKzNmK2ZmK5lmK8xmK/9mVQBmVTNmVWZmVZlmVcxmVf9mgABmgDNmgGZmgJlmgMxmgP9mqgBmqjNmqmZmqplmqsxmqv9m1QBm1TNm1WZm1Zlm1cxm1f9m/wBm/zNm/2Zm/5lm/8xm//+ZAACZADOZAGaZAJmZAMyZAP+ZKwCZKzOZK2aZK5mZK8yZK/+ZVQCZVTOZVWaZVZmZVcyZVf+ZgACZgDOZgGaZgJmZgMyZgP+ZqgCZqjOZqmaZqpmZqsyZqv+Z1QCZ1TOZ1WaZ1ZmZ1cyZ1f+Z/wCZ/zOZ/2aZ/5mZ/8yZ///MAADMADPMAGbMAJnMAMzMAP/MKwDMKzPMK2bMK5nMK8zMK//MVQDMVTPMVWbMVZnMVczMVf/MgADMgDPMgGbMgJnMgMzMgP/MqgDMqjPMqmbMqpnMqszMqv/M1QDM1TPM1WbM1ZnM1czM1f/M/wDM/zPM/2bM/5nM/8zM////AAD/ADP/AGb/AJn/AMz/AP//KwD/KzP/K2b/K5n/K8z/K///VQD/VTP/VWb/VZn/Vcz/Vf//gAD/gDP/gGb/gJn/gMz/gP//qgD/qjP/qmb/qpn/qsz/qv//1QD/1TP/1Wb/1Zn/1cz/1f///wD//zP//2b//5n//8z///8AAAAAAAAAAAAAAAAI/wALCBxIsKDBgwgTEhxjr6HDhxAdKpxIsaLFixgzaizAMKLHhxtDihxJcmTHjx9LqlzJUmUalChbypxJM+FJmBBr6tzZ8iZOiTyDCtXo86e9oUiTKnxpFKTSp1CL/oRKNalUnFWzBr0KU6vXmkybNvxKtqdYoGXTmjw7Vq3bjVxjvp17MaxYungpxk2Zt+/BvR79Cl7I9ujgwXabHh4MOOJiwY1zPu4b2elkvImNXs5bGe3mt53bfgZdePTczFNNuw1tWHVa1q7Vwo5dFjVW2mRn4/aqe3fW3r6p2u4a/Hfp4lWBI7d6fPnT4XKdK1UufWvz6kOpjy7Mvbv37+DDi6EfT768+fPo06tfz769+/fw48ufT7++/fv48+vfz7+///8ABijggAQWaOCBCCao4IIMNujggxBGKOGEEY1h4YUYZqjhhhx2iCEmhXko4ogklmjihV9ph11NKq44U4sutgQdXzHyBGONLl2HI0037rgWWz7q1GOQG80YGJEv6oikSkMueVGTTlZkpGNRrgRllQpdiSVCWm5p0JSSeSlSl2IORGNmmRwpiaZFYFq2JkZnlhmnmHN62aZnb1pU55Z7YtlnlXeKlqeeag5qU6GG/oVoogUF2hqjWS4KqUB/Rlmpk45OOtGlS3KKpKdEZqrpoUCOyqWkk4IapKimGqSqj6/uGCtUAQEAOw==');}
}

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:

Logo entfernen

Über eine Template-Anpassung kannst Du das Shopware Logo aus dem Footer entfernen. 

Beispiel

Zunächst musst Du Dich mit Deinem FTP-Server verbinden. Im Shopware-Verzeichnis hast Du unter "themes > Frontend > DEIN THEME > frontend > index" die Möglichkeit, eine Datei einzubinden, welche das Logo entfernt.

Erstelle hierzu im genannten Pfad die Datei "footer.tpl" mit folgendem Inhalt:

{extends file="parent:frontend/index/footer.tpl"}{block name="frontend_index_shopware_footer_logo"}{/block}

Bitte beachte hierbei, dass es sich um ein Beispiel handelt und ggf. weitere Änderungen am Code vorgenommen werden müssen. Außerdem solltest Du darauf achten ein eigenes Theme zu erstellen, welches vom originalen Theme abgeleitet wird, damit Deine Änderungen update-sicher sind.

Nachdem Du die Datei erstellt, das Theme neu kompiliert und den Cache geleert hast, sollte das Logo entfernt sein.

Schriftzug entfernen

Falls Du den Schriftzug "Realisiert mit Shopware" ändern bzw. entfernen möchtest, kannst Du dies in der Textbaustein-Verwaltung unter Einstellungen > Textbausteine im Backend umsetzen. Hier kannst Du einfach nach dem Textbaustein "IndexCopyright" suchen und den Wert entfernen. 

War dieser Artikel hilfreich?

Version

5.5.3 oder neuer

Inhalt