Entdecken Sie eBooks
Kategorien
Entdecken Sie Hörbücher
Kategorien
Entdecken Sie Zeitschriften
Kategorien
Entdecken Sie Dokumente
Kategorien
Leseprobe
Insiderwissen aus erster Hand: Daniel Nögel ist Entwickler bei der
Shopware AG. In seinem Handbuch für Entwickler zeigt er Ihnen,
wie Sie Schritt für Schritt die Funktionen von Shopware gezielt
einsetzen. Dieser Buchauszug führt Sie in das Shopware-Temp-
lating ein, damit Sie das Shopsystem an eigene Gestaltungsideen
anpassen können.
»Shopware-Templating« (Auszug)
Inhaltsverzeichnis
Index
Der Autor
Leseprobe weiterempfehlen
Daniel Nögel
Shopware – Das Handbuch für Entwickler
466 Seiten, gebunden, Dezember 2016
49,90 Euro, ISBN 978-3-8362-4243-1
www.rheinwerk-verlag.de/4185
Kapitel 4
Shopware-Templating
Das Anpassen des Aussehens und Designs von Shopware wird 4
»Templating« genannt. Es ist eine gestalterische Anpassung des
Shopsystems gemäß den eigenen Wünschen.
Abbildung 4.1 Ein Template kann für bestimmte Seitentypen wiederverwendet werden.
87
4 Shopware-Templating 4.1 Einstieg in Templates und Themes
Abbildung 4.1 stellt das vereinfacht dar: Die gestalterischen Merkmale der Seite wer-
den im Template definiert, sodass Shopware dieses Template später nur mit den
Daten des jeweiligen Artikels (Artikelname, Preis, Beschreibung etc.). befüllen muss.
Für diese veränderlichen Merkmale von Artikeln werden jeweils Platzhalter im Tem-
plate definiert – die Template-Variablen. 4
In Shopware können Sie auch eine Vielzahl dieser gestalterischen Elemente komfor-
tabel steuern – ob der Knopf In den Warenkorb also rot oder blau ist, lässt sich
ebenfalls ohne Programmieraufwand konfigurieren. Die Gesamtheit aller Templates
mitsamt der Farbkonfiguration (also das große Ganze) wird Theme genannt.
Ein Theme ist ein austauschbares Leitmotiv für den Shop, das entweder selbst entwi-
ckelt bzw. angepasst werden kann oder aus dem Shopware Community Store bezogen
werden kann. Auch wenn Shopware von Haus aus bereits ein ansprechendes Theme
mitliefert, gibt es in der Regel in jedem Projekt Anpassung am Aussehen des Shops –
sei es, um sich lediglich von anderen Shops abzugrenzen, oder sei es, um die eigene
Farb- und Markenkommunikation des Shopbetreibers im Shop zu reflektieren.
88 89
4 Shopware-Templating 4.1 Einstieg in Templates und Themes
Auch Einstellungen zum Infinite Scrolling oder zum Variantenwechsel können Jetzt öffnet sich ein Dialog, der verschiedene Daten abfragt. Unter Ableiten von
hier vorgenommen werden. Ganz unten in dem Fenster lassen sich auch CSS-Dateien müssen Sie angeben, von welchem Theme Sie Ihr eigenes Theme ableiten wollen:
und JavaScript-Bibliotheken einbinden. Dies ist nützlich, wenn beispielsweise be- Shopware bietet im Standard das Bare-Theme sowie das Responsive-Theme.
stimmte Schriftarten genutzt werden sollen. Natürlich bietet Shopware Ihnen auch Das Bare-Theme beinhaltet alle Templates, die Shopware benötigt, allerdings keiner-
Möglichkeiten, diese Einbindungen über Plugins oder eigene Themes direkt vorzu- lei JavaScript oder Styling. Es ist damit also nur geeignet, wenn Sie große Teile des 4
nehmen – die zusätzliche Möglichkeit direkt in der Theme-Konfiguration ist aber Themes selbst entwickeln möchten oder müssen. In den meisten Fällen werden Sie
auch für weniger technisch versierte Nutzer interessant und eignet sich darüber hi- Ihr Theme vom Theme Responsive ableiten wollen: Dieses ergänzt das Bare-Theme
naus zum schnellen Testen einer Anpassung. um eine Vielzahl von Styles und JavaScript-Plugins und bildet damit in der Summe
Der letzte Reiter im Fenster ist der Reiter Farb-Konfiguration. Im Standard-Re- das Frontend, das Sie von Shopware kennen.
sponsive-Theme gibt es hier eine Vielzahl von Konfigurationsmöglichkeiten, die der Im Feld Name sollten Sie darüber hinaus einen einprägsamen Namen für Ihr Theme
Nutzer setzen kann. Dabei arbeitet Shopware mit einem Platzhalter-System: Der Nut- vergeben. Oftmals wird hier der Name des Shop-Projekts genutzt – in unserem Bei-
zer kann also zunächst verschiedene Platzhalter wie brand-primary, brand-secondary spiel LoremIpsum (siehe Abbildung 4.4). Nach einem Klick auf Speichern erzeugt
oder highlight-succcess definieren und diese dann an verschiedenen Stellen im Shopware das neue Theme. Sie können es mit einem Klick auf Theme zuweisen
Theme referenzieren. Dieses Platzhaltersystem ermöglicht es, die Farbsprache des unten rechts im Theme Manager auch direkt aktivieren. Da Sie vom Theme Respon-
Shops sehr komfortabel auf den jeweiligen Shopbetreiber hin zu optimieren, indem sive abgeleitet haben, stehen Ihnen unter Theme konfigurieren alle Einstellungen
beispielsweise die Firmenfarben als Primär- und Sekundärfarben gesetzt werden. Da- zur Verfügung, die auch das Responsive-Theme kennt (vgl. Abschnitt 4.1.1).
rüber hinaus können Sie damit aber auch häufige Farbvariationen direkt pflegen, bei-
spielsweise eine hellere Variante der Primärfarbe einstellen, um Hover- und
Schatteneffekte abbilden zu können.
Schließlich können Sie auch Platzhalter für Erfolgs-, Hinweis- und Fehlermeldungen
hinterlegen, ebenso für Hintergrund- und Rahmenfarben.
Durch das Ändern von wenigen Platzhaltern ist es so möglich, den gesamten Shop
mitsamt all seiner Seiten, Formulare, Knöpfe, Texte und anderen Bedienelementen
in ein anderes Farbenspiel zu überführen. Natürlich besteht dabei immer die Mög-
lichkeit, einzelne oder alle Elemente weiterhin individuell mit Farben auszustatten –
die Nutzung der Platzhalter empfiehlt sich jedoch schon deshalb, weil diese auch von
Plugins und Drittentwicklern genutzt werden können, um beispielsweise neue Sei-
tentypen ebenfalls im Farbton des restlichen Shops zu halten.
90 91
4 Shopware-Templating 4.1 Einstieg in Templates und Themes
Im Hintergrund hat sich durch das Anlegen des Themes aber Einiges getan: Im Ver- </h1>
zeichnis /themes/Frontend Ihrer Shopware-Installation finden Sie für gewöhnlich {/block}
nur die beiden Verzeichnisse Bare und Responsive für die beiden Shopware-Standard-
Listing 4.1 Beispiel aus der Datei »themes/Frontend/Bare/frontend/detail/index.tpl«
Themes. Das neue Verzeichnis LoremIpsum wurde beim Anlegen des neuen Themes
direkt miterzeugt. Shopware erstellt dabei auch direkt alle Unterverzeichnisse mit, Die Anweisungen in geschweiften Klammern kennzeichnen Smarty-Anweisungen. 4
die Sie später vielleicht einmal benötigen werden. Im Auslieferungszustand sind die Hier wird zunächst ein Block frontend_detail_index_name definiert. Blöcke sind
Verzeichnisse zunächst leer; durch Anlegen von Template-Dateien können Sie aber benannte Bereiche im Template, die später gezielt überschrieben oder erweitert wer-
die Standard-Vorlagen des Bare-Themes leicht überschreiben. den können. Wenn Sie also ein bestimmtes Detail im Template überschreiben möch-
Auf der obersten Ebene finden Sie die Verzeichnisse documents, frontend, newsletter ten, sind Blöcke immer nützlich. Shopware hat über 1800 solche Erweiterungsblöcke.
und widgets. Das Verzeichnis documents beinhaltet die Vorlagen für die Dokument- Innerhalb des Blocks finden Sie die bekannten HTML-Tags. Hier wird ein Überschrif-
generierung, wie beispielsweise Rechnungen. frontend beinhaltet alle Templates für tenelement definiert, das die Klasse product--title erhält und mit dem Attribut
das Shopware-Frontend. Hier finden Sie eine ganze Reihe von Unterverzeichnissen, itemprop=name Suchmaschinen signalisiert, dass sich in diesem Element der Name
die jeweils für bestimmte Bereiche im Frontend zuständig sind: frontent/account bei- des Artikels befindet.
spielsweise für den Benutzeraccount, frontend/blog für Blogseiten, frontend/listing
Der Name des Artikels kann natürlich nicht Teil der Vorlage sein, da er sich je nach
für die Kategorielisten und frontend/detail für die Artikeldetailseiten. Das Verzeich- Artikel verändert. Entsprechend ist {$sArticle.articleName} eine typische Smarty-
nis newsletter beinhaltet Vorlagen für den Newsletter-Versand, und widgets enthält Variable. Die Anweisung bedeutet so viel wie: »Gib an dieser Stelle den Wert der Vari-
verschiedene Vorlagen für die sogenannten Shopware-Widgets – dazu gehören Top- ablen $sArticle.articleName aus.« Das Zuweisen der Variablen geschieht in aller
seller-Slider, Einkaufswelten und ähnliche wiederverwendbare Elemente. Regel in den sogenannten PHP-Controllern. In späteren Beispielen wird noch gezeigt,
Wenn Sie mit einem Theme arbeiten, spielen sich alle template-bezogenen Anpas- wie Sie solche Zuweisungen selbst erzeugen. Hier wollen wir uns zunächst darauf
sungen von Shopware in diesen Verzeichnissen ab: Als Shopbetreiber müssen Sie beschränken, mit den zur Verfügung stehenden Variablen zu arbeiten.
also keine Plugins schreiben, nur um an der ein oder anderen Stelle in Shopware klei- Aber welche Variablen stehen überhaupt zur Verfügung? Um diese Frage zu beant-
nere Anpassungen des Aussehens vorzunehmen. Gleichermaßen gilt: Alle Anpas- worten, können erfahrene Entwickler den Shopware Profiler installieren (vgl.
sungen, die Sie in Form eines eigenen Themes vornehmen, können Sie später leicht Abschnitt 18.3). Alternativ können Sie das Smarty-{debug}-Tag nutzen:
anderen Shopbetreibern zur Verfügung stellen oder mit wenig Aufwand in ein Plugin
{block name='frontend_detail_index_name'}
überführen, das Sie dann beispielsweise über den Shopware Community Store zum
{debug}
Verkauf anbieten können.
<h1 class="product--title" itemprop="name">
{$sArticle.articleName}
</h1>
4.1.3 Zusätzliche Daten im Frontend anzeigen
{/block}
Shopware nutzt die Template-Sprache Smarty. In Abbildung 4.1 haben Sie das grund-
Listing 4.2 Anpassung der Datei »themes/Frontend/Bare/frontend/detail/index.tpl«
legende Prinzip dabei schon gesehen: Das grundsätzliche Aussehen der Seite wird
durch Webtechnologien wie HTML, CSS und JavaScript bestimmt. Dort wird festge-
In diesem Fall habe ich direkt im Original-Template, das erweitert werden soll, das
legt, welche Boxen wie groß sind und welche Farben sie erhalten sollen. Das Tem-
Debug-Tag ergänzt. Wenn Sie nun den Shopware-Cache im Administrationsbereich
plate-System Smarty ermöglicht es Ihnen nun, dort auch Platzhalter zu definieren
leeren und eine Artikeldetailseite aufrufen, öffnet sich ein neues Fenster, das alle
und später zu befüllen. In der Abbildung wurden beispielsweise Platzhalter für den
Variablen ausgibt, die auf der aktuellen Seite zur Verfügung stehen.
Namen, den Preis oder die Beschreibung des Artikels definiert. In der Praxis sieht das
dann wie folgt aus: Abbildung 4.5 zeigt dieses Fenster mit einigen Variablen: Auf der linken Seite sehen
Sie jeweils den Namen, auf der rechten Seite den Wert. Die Werte können dabei
{block name='frontend_detail_index_name'} durchaus verschachtelt sein, also wiederum Listen beinhalten. So finden Sie bei-
<h1 class="product--title" itemprop="name"> spielsweise auf der linken Seite den Eintrag sArticle. Ihm ist eine Liste von weiteren
{$sArticle.articleName} Werten zugeordnet – unter anderem auch articleName mit dem Wert Sonnenbrille
92 93
4 Shopware-Templating 4.1 Einstieg in Templates und Themes
Red. In den oben gezeigten Beispielen würde für die aktuelle Seite also der Wert Son- Der Smarty-Debug-Konsole können Sie aber noch viele weitere wertvolle Informa-
nenbrille Red an die Stelle der Variablen sArticle.articleName gesetzt. tionen entnehmen. Ganz oben finden Sie beispielsweise den Namen der aktuellen
Template-Datei frontend/detail/index.tpl. Auch diese Information kann sehr hilfreich
sein.
Außerdem finden Sie eine Reihe weiterer Smarty-Variablen, auf die Sie zugreifen 4
können. So haben Sie beispielsweise auch Zugriff auf die $SeoMetaDescription oder
auf den aktuellen Subshop $shop. In der Variablen $sArticle finden Sie eine Reihe
von weiteren Feldern, beispielsweise den Lagerbestand $sArticle.instock, das Arti-
kelgewicht, Artikelbilder oder eine Vielzahl von Attributen. Nehmen Sie sich also
ruhig Zeit, um die zur Verfügung stehenden Variablen ein wenig zu analysieren: Hier
stehen Ihnen viele nützliche Informationen zur Verfügung.
Bevor Sie nun weiterarbeiten, sollten Sie zunächst das {debug}-Tag aus dem Template
entfernen. Im nächsten Beispiel soll einmal der Artikelname auf der Artikeldetail-
seite durch den Wert eines Freitextfeldes ausgetauscht werden. Zunächst legen Sie
dazu unter Einstellungen 폷 Freitextfeld-Verwaltung ein neues Freitextfeld an
(vgl. Abschnitt 3.6, »Freitextfelder«). Als Tabelle wählen Sie s_articles_attributes.
Klicken Sie dann auf Hinzufügen. Nun erstellen Sie folgendes Freitextfeld:
왘 Spaltenname: alternative_article_name
왘 Spaltentyp: Einfacher Text
왘 Label: Alternativer Artikelname
왘 Im Backend anzeigen: Ja
왘 Übersetzbar: Ja
Nach einem Klick auf Speichern erzeugt Shopware die neue Spalte. Öffnen Sie nun
im Administrationsbereich den Artikel »Sonnenbrille Red« oder einen beliebigen
anderen Artikel. Im Reiter Stammdaten finden Sie ganz unten den Bereich Frei-
textfelder. Tragen Sie hier unter Alternativer Artikelname eine beliebige
Beschreibung ein, und speichern Sie den Artikel.
Durch einen Klick auf das kleine Globus-Symbol können Sie die alternative Artikel-
Abbildung 4.5 Smarty-Debug-Fenster
beschreibung auch direkt in andere Sprachen übersetzen. Shopware stellt dann im
94 95
4 Shopware-Templating 4.1 Einstieg in Templates und Themes
Frontend automatisch immer den richtigen Wert zur Verfügung. Wenn Sie diesen Feld hinterlegt haben, können Sie über die Länderflagge oben rechts auf die englische
Artikel nun im Frontend aufrufen, sehen Sie zunächst keine Änderung: Die Vorlage Sprache wechseln: Der Artikel erhält dann die englische alternative Beschreibung.
wurde noch nicht angepasst.
Sie wissen bereits, dass der Artikelname standardmäßig in der Datei themes/Front-
end/Bare/frontend/detail/index.tpl definiert wird. Um die Anpassung vorzunehmen, 4
legen Sie nun analog dazu die Datei themes/Frontend/LoremIpsum/frontend/detail/
index.tpl an. Die leeren Ordner wurden bereits direkt beim Erzeugen des Themes
erstellt, sodass Sie nur noch die Datei index.tpl im richtigen Pfad anlegen müssen.
Der Inhalt soll wie folgt aussehen:
{extends file='parent:frontend/detail/index.tpl'}
{block name='frontend_detail_index_name'}
<h1 class="product--title" itemprop="name">
{$sArticle.attributes.core->get('alternative_article_name')} Abbildung 4.6 Ein Artikel mit übersetztem Alternativnamen
</h1>
{/block} Durch wenige Anpassungen haben Sie also ein komplett individuelles Datenfeld an
Ihrem Artikel eingepflegt und es im Frontend eingebunden. Allerdings gibt es noch
Listing 4.3 Die Datei »themes/Frontend/LoremIpsum/frontend/detail/index.tpl«
ein kleines Problem: Wenn Sie einen Artikel ohne Alternativbeschreibung aufrufen,
wird gar kein Name mehr angezeigt. Das Template muss also noch so ergänzt wer-
Dadurch, dass diese Datei in der gleichen Stuktur wie die Standard-Datei angelegt
den, dass statt des alternativen Namens der Standardname genutzt wird, wenn es
wird, wurde der Standard überschrieben: Das Template-System berücksichtigt nun
keinen alternativen Namen gibt. Dazu können Sie Ihr individuelles Template wie
die Datei im Bare-Theme nicht mehr, sondern verarbeitet zunächst nur noch die
folgt abändern:
neue Datei. Das ist aber in diesem Fall eigentlich zu viel des Guten: Sie wollen ja nur
eine Kleinigkeit austauschen. Darum können Sie Smarty mit dem extends-Schlüssel- {extends file='parent:frontend/detail/index.tpl'}
wort anweisen, doch von den Eltern-Themes abzuleiten. {block name='frontend_detail_index_name'}
<h1 class="product--title" itemprop="name">
Da unser LoremIpsum-Theme vom Responsive-Theme abgeleitet ist, würde Smarty
{assign var=alternative_name value=$sArticle.attributes.core->
nun zuerst dort nach der entsprechenden Datei suchen – und sie nicht finden. Das
get('alternative_article_name')}
Responsive-Theme leitet sich wiederum vom Bare-Theme ab, sodass Smarty im
{if $alternative_name}
nächsten Schritt dort nach der Datei sucht – und fündig wird.
{$alternative_name}
Über das extends-Schlüsselwort können Sie also auf diese Vererbungshierarchie zu- {else}
greifen und müssen nicht für kleine Template-Anpassungen ganze Template- {$sArticle.articleName}
Dateien neu schreiben: Sie erben einfach vom Eltern-Theme und überschreiben nur {/if}
die Blöcke, die Sie austauschen möchten – im obigen Beispiel also den Block front- </h1>
end_detail_index_name, da dieser den Artikelnamen beinhaltet. Der Klassenname {/block}
und das itemprop-Attribut sollten dabei übernommen werden. Statt der vorherigen
Listing 4.4 Die Datei »themes/Frontend/LoremIpsum/frontend/detail/index.tpl«
Ausgabe von {$sAticle.articleName} soll nun aber das neue Attribut ausgegeben wer-
den. Dies geschieht durch die Anweisung {$sArticle.attributes.core->get('alter- Um die Übersicht zu wahren, wird in diesem Beispiel zunächst der Inhalt von
native_article_name')}. $sArticle.attributes.core->get('alternative_article_name') der Variablen alter-
Nach dem Leeren des Caches können Sie nun im Frontend den Artikel aufrufen, den native_name zugewiesen. Dafür benutze ich die Smarty-Funktion assign. Diese
Sie mit einem alternativen Namen versehen haben (vgl. Abbildung 4.6). Dieser wird Methode ist immer dann praktisch, wenn Sie in Ihrem Template öfter auf eine Varia-
nun statt des Standardnamens ausgegeben. Falls Sie auch eine Übersetzung für das ble zugreifen wollen, die tief verschachtelt ist. So können Sie die Variable einfach an
96 97
4 Shopware-Templating 4.1 Einstieg in Templates und Themes
einen kürzeren, sprechenden Namen binden und damit die Lesbarkeit Ihrer Anpas- gabe der Seite rendern, sodass Sie leicht nachschauen können, wo Ihnen welche Blö-
sung deutlich erhöhen. cke zur Verfügung stehen. Sie kommen aber auch ohne zusätzliche Werkzeuge
Sicher stellen Sie sich die Frage, warum in dem Konstrukt $sArticle.attributes.core schnell zum Ergebnis, indem Sie die Entwicklerkonsole Ihres Browsers nutzen. Kli-
->get('alternative_article_name') sowohl mit dem Punkt-Operator (beispielsweise cken Sie dazu, wie in Abbildung 4.8 zu sehen, mit der rechten Maustaste in die Nähe
nach sArticle) als auch mit dem Pfeil-Operator (nach core) gearbeitet wird: Der Punkt- des Elements, bei dem Sie Ihre Anpassung vornehmen möchten. 4
Operator kann in Smarty für Arrays genutzt werden, der Pfeil-Operator bezieht sich Nun öffnet sich ein Kontextfenster, in dem Sie den Menüpunkt Prüfen auswählen
auf Objekte. Die Faustregel lautet hier schlicht: Artikel-Attribute werden im Template können (der Name kann sich je nach Browser unterscheiden). Daraufhin erscheint
als Objekte zur Verfügung gestellt; hier müssen Sie mit dem Pfeil-Operator arbeiten. ein Fenster, das das gewählte HTML-Element im Quelltext anzeigt. Hier suchen Sie
Im nächsten Schritt finden Sie eine if-Abfrage in der Form {if $alternative_ sich jetzt einen möglichst eindeutigen Bezeichner – also einen Klassennamen oder
name}…{else}…{/if}. In dem if-Block wird dabei immer eine Bedingung definiert. In eine ID, die Sie nicht zu oft im Quelltext erwarten. In diesem Fall empfehlen sich die
diesem Fall soll die Variable $alternative_name nicht leer sein. Ist dies der Fall, wird Klassen entry--sku oder product--base-info. Beide Namen nehmen ja sehr konkret
{$alternative_name} ausgegeben, andernfalls ({else}) wird der Standardname mit Bezug auf die Information »Bestellnummer« oder »Artikelinformation«.
{$sArticle.articleName} ausgegeben. Sie können in Ihrem Template also auch Werte
abfragen und je nach Wunsch bedingte Ausgaben vornehmen.
{block name='frontend_detail_data_ordernumber'}
<li class="base-info--entry entry--sku">
{* Product SKU - Label *}
Abbildung 4.7 Der Lagerbestand soll unter der Artikelnummer zu sehen sein. {block name='frontend_detail_data_ordernumber_label'}
<strong class="entry--label">
Erneut können Sie hierfür den Shopware Profiler (vgl. Abschnitt 18.3) nutzen. Dieser {s name="DetailDataId" namespace="frontend/detail/data"}{/s}
kann Ihnen auf Wunsch die Smarty-Blöcke direkt als HTML-Kommentar in die Aus- </strong>
{/block}
98 99
4 Shopware-Templating 4.1 Einstieg in Templates und Themes
{* Product SKU - Content *} sich ein Label entry--label sowie der Inhalt entry--content befindet. Wirklich neu ist
{block name='frontend_detail_data_ordernumber_content'} hier nur die Ausgabe des Lagerbestandes: {$sArticle.instock}.
<meta itemprop="productID" content="{$sArticle.articleDetailsID}"/>
Durch verhältnismäßig wenig Aufwand können Sie mit diesem Vorgehen also nicht
<span class="entry--content" itemprop="sku">
nur herausfinden, welche Blöcke Sie überschreiben müssen, damit Sie Ihre Anpas-
{$sArticle.ordernumber}
sungen an dem gewünschten Ort vornehmen können: Sie finden so auch die CSS- 4
</span>
Klassen und HTML-Elemente, die Sie benötigen, um Ihre Ausgabe auf die gleiche
{/block}
</li>
Weise vorzunehmen, wie es auf anderen Shopware-Seiten der Fall ist.
{/block}
Listing 4.5 Der Abschnitt »SKU« aus der Datei »themes/Frontend/Bare/frontend/detail/ 4.1.5 Schleifen, Währungen und Modifier nutzen
index.tpl« Neben den Bedingungen und Variablenzuweisungen, die bisher besprochen wurden,
bietet Smarty noch eine große Zahl weiterer Funktionen, die ich Ihnen nun an eini-
So wird also die Bestellnummer ausgegeben: Das Ganze ist eine HTML-Liste, bei der gen Beispielen zeigen werde.
der Name die Klasse entry--label erhält und der Wert die Klasse entry--content. Wei-
Im ersten Beispiel soll unterhalb der Artikelbeschreibung eines Artikels auf der Arti-
terhin befindet sich der ganze Abschnitt im Smarty-Block frontend_detail_data_
keldetailseite jeweils eine Liste von ähnlichen Artikeln mit Links und Preisen ausge-
ordernumber, den Sie nicht nur überschreiben können, sondern an denen Sie auch
geben werden:
Informationen anhängen können:
{extends file='parent:frontend/detail/tabs/description.tpl'}
{extends file='parent:frontend/detail/index.tpl'}
100 101
4 Shopware-Templating 4.1 Einstieg in Templates und Themes
Das grundlegende Vorgehen ist bereits bekannt: Sie überschreiben das Template für Weil dieser Preis in aller Regel unformatiert ist, sollten Sie bei der Ausgabe von Prei-
die Beschreibung auf der Artikeldetailseite, indem Sie eine gleichnamige Datei in sen immer den sogenannten Currency-Modifier verwenden: Modifier sind kleine Hel-
Ihrem Template anlegen. Durch extends erbt Ihr Template jedoch von dem über- fer, die die Ausgabe nach bestimmten Regeln formatieren. Sie erkennen sie an dem
schriebenen Template, sodass Sie nicht alle Template-Inhalte nachbauen müssen. Pipe-Symbol |. Der Currency-Modifier kennt alle Währungen in Shopware und stellt
Stattdessen hängen Sie mit append den gewünschten Inhalt an den Block frontend_ diese korrekt dar. In diesem Fall ergänzt der Modifier das €-Symbol und stellt sicher, 4
detail_description_links_list an, sodass unterhalb der Links Ihr Inhalt ausgegeben dass der korrekte Dezimaltrenner verwendet wird.
wird. Innerhalb des div mit der CSS-Klasse content--title wird die Überschrift des Weitere Beispiele für Smarty-Modifier sind etwa lower, upper und capitalize: Die
Abschnitts ausgegeben: ersten beiden setzen eine Zeichenkette komplett in Klein- beziehungsweise Groß-
{s name="my_similar_articles"} buchstaben, und capitalize setzt jeweils den ersten Buchstaben eines Wortes in
Diese Artikel könnten Sie auch interessieren Großbuchstaben. Ebenfalls gerne genutzt wird beispielsweise truncate, das eine
{/s} Zeichenkette nach einer vorgegebenen Anzahl an Zeichen abschneidet – dies ist
Bei diesem Konstrukt handelt es sich um ein sogenanntes Snippet, einen Textbau- z. B. dann nützlich, wenn Sie eine Artikelbeschreibung nur anreißen möchten. Eine
stein. Er ermöglicht es Ihnen, Textelemente direkt im Template einzupflegen und Übersicht vieler Modifier finden Sie auf www.smarty.net/docsv2/en/language.modi-
diese später in der Textbaustein-Verwaltung im Administrationsbereich bequem für fiers.tpl.
andere Sprachen zu übersetzen. Mehr Informationen zu den Textbausteinen finden
Sie in Abschnitt 15.3, »Arbeiten mit Übersetzungen«.
Weiter unten gibt es ein div mit der CSS-Klasse content--list list--unstyled. In die-
sem soll nun eine Liste von Artikeln ausgegeben werden. Die Liste wird mit einem
<ul>-Element erzeugt. Mit dem folgenden Smarty-Konstrukt wird eine Schleife
erzeugt:
102 103
4 Shopware-Templating 4.1 Einstieg in Templates und Themes
104 105
4 Shopware-Templating 4.1 Einstieg in Templates und Themes
Das ist auch in Shopware so: Damit Änderungen an CSS, Less und JavaScript greifen,
müssen die Dateien verkleinert und zusammengefügt werden: Das Resultat finden
Sie in Form einer großen JavaScript- und CSS-Datei im Verzeichnis /web/cache einer
jeden Shopware-Installation.
4
Wenn Sie nun eine Seite im Frontend neu laden, werden für jeden Request alle benö-
tigten Daten neu aufgebaut – das umständliche Leeren des Caches entfällt. Allerdings
bezahlen Sie diesen Komfort mit einer etwas längeren Wartezeit bei jedem Seitenauf-
ruf: kein guter Kompromiss.
Eine sinnvolle Alternative für Entwickler ist das Tool Grunt: Es beobachtet während
der Entwicklung kontinuierlich alle JavaScript- und Less-Dateien und baut bei Bedarf
alle benötigten Caches direkt auf. Das ist nicht nur sehr schnell – es ist auch sehr
bequem. Zunächst müssen dazu alle benötigten Informationen exportiert wer-
Abbildung 4.10 Das manuelle Kompilieren der Caches ist für die Entwicklung weniger den. Dazu gibt es in Shopware ein dediziertes Konsolenkommando (vgl. Kapitel 12,
geeignet. »Shopware-Kommandos«):
./bin/console sw:theme:dump:configuration
Grundsätzlich können Sie das Kompilieren jederzeit über den Administrationsbe-
reich im Performance-Modul anstoßen. Wer aber für längere Zeit mit CSS, Less und Nun navigieren Sie mit cd themes in das Theme-Verzeichnis. Dort führen Sie folgende
JavaScript entwickeln und experimentieren möchte, braucht hier sicher bequemere Kommandos aus:
Alternativen.
npm install
Grundsätzlich können Sie das Kompilieren und Caching auch deaktivieren –
grunt
Shopware baut die nötigen Informationen dann bei jeder Anfrage bei Bedarf wieder
auf. Dazu öffnen Sie unter Einstellungen 폷 Theme Manager die Theme-Verwal- Das erste Kommando installiert Grunt und alle dafür benötigten Abhängigkeiten,
tung und klicken dann auf Einstellungen. Dort setzen Sie nun einen Haken bei das zweite Kommando führt Grunt schließlich aus. Grunt wird – solange es läuft –
Compiler Cache deaktivieren und entfernen die Haken bei CSS komprimieren permanent auf geänderte Dateien prüfen und bei Bedarf die Theme-Caches neu auf-
sowie bei JavaScript komprimieren, wie in Abbildung 4.11 gezeigt wird.
106 107
4 Shopware-Templating 4.2 Erweitertes Templating mit JavaScript und Less
bauen. Standardmäßig beobachtet das Kommando allerdings nur JavaScript- und Die Datei no_notepad.css wird dazu in no_notepad.less umbenannt und in den Ord-
Less-Dateien: Dies sind die empfohlenen Standards von Shopware. Beides zeige ich ner src/less/_modules verschoben. Shopware unterscheidet hier grundsätzlich vier
Ihnen im nächsten Abschnitt genauer. verschiedene Typen von Less-Anweisungen, die jeweils in unterschiedlichen Ord-
nern gepflegt werden:
왘 Variablen sind bestimmte Werte, die an vielen Stellen in den Stylesheets benötigt 4
4.2 Erweitertes Templating mit JavaScript und Less werden, etwa für bestimmte Device-Größen oder Farben.
Der Einstieg in das Templating mit CSS und Smarty ist auch für Einsteiger in aller 왘 Komponenten sind Styles für wiederverwendbare Komponenten wie Formulare,
Regel leicht zu bewerkstelligen: Schließlich können Sie hier bereits mit wenig Vor- Hinweisboxen oder Listen.
kenntnissen in CSS und HTML loslegen. Im vorigen Abschnitt hat sich aber auch 왘 Mixins sind Anweisungen, die oftmals in andere Styles »hineingemischt« werden.
gezeigt, dass Shopware einiges an Aufwand betreibt, um Less- und JavaScript-Dateien 왘 Modules sind Styles, die explizit Bezug auf bestimmte Teilbereiche von Shopware
zu verarbeiten und zusammenzufassen. Da dieser Schritt ohnehin erforderlich ist, ist nehmen, etwa Styles für die Registrierung, für den Warenkorb oder die Produkt-
es empfehlenswert, sich auch direkt mit Less auseinanderzusetzen. liste.
Less ist eine Obermenge von CSS: Das Schreiben von CSS-Anweisungen ist gerade bei Eine Übersicht über alle verfügbaren Komponenten, Variablen, Mixins und Module
größeren Applikationen sehr umständlich und redundant: In den vorigen Theme- finden Sie im sogenannten Styletile unter https://developers.shopware.com/styletile.
Beispielen haben Sie beispielsweise die Primär- und Sekundärfarben Ihres Shops fest-
Less-Styles müssen nicht in der Theme.php registriert werden: Die $css-Eigenschaft
gelegt: Durch wenige Mausklicks werden alle Knöpfe rot, alle Schriften blau und alle
kann dort also ersatzlos entfernt werden. Stattdessen verarbeitet Shopware automa-
Hintergründe grün – wenn gewünscht. In CSS ist das nicht so leicht umsetzbar, da es
tisch die Datei all.less in jedem Theme. In diese Datei müssen also alle Less-Dateien
Hunderte Elemente gibt, denen die jeweiligen Farben zugewiesen werden müssen.
eingebunden werden. Aus Gründen der Übersichtlichkeit empfiehlt Shopware, für
Wäre es nicht praktisch, wenn es dafür Variablen gäbe, die nur an einer Stelle gepflegt
Module, Komponenten, Mixins sowie Variablen jeweils eigene Dateien zu pflegen, in
werden müssen?
welche die jeweiligen Dateien inkludiert werden:
Genau das kann Less: Es erweitert CSS um zusätzliche Funktionen wie Mixins, Varia-
@import 'modules';
blen und verschachtelte Selektoren. All dies macht das Schreiben von Styles deutlich
einfacher, als es mit CSS wäre. Allerdings unterstützen die Browser Less nicht nativ – Listing 4.11 Die Datei »themes/Frontend/LoremIpsum/frontend/_public/src/less/all.less«
daher müssen die Less-Anweisungen in CSS-Anweisungen übersetzt werden. Dieser
Vorgang wird auch kompilieren genannt. In der von Shopware automatisch inkludierten Datei all.less wird also zunächst nur
auf die Datei modules.less verwiesen, die im nächsten Schritt erstellt wird:
Zunächst müssen Sie das LoremIpsum-Theme so anpassen, dass statt CSS Less ge- Listing 4.12 Die Datei »themes/Frontend/LoremIpsum/frontend/_public/src/less/
nutzt wird. Da Less eine Obermenge von CSS ist (jedes CSS also auch als Less interpre- modules.less«
tiert werden kann), muss an den CSS-Anweisungen selbst zunächst nichts geändert
Hier wird nun schließlich die eigene Style-Datei importiert. Wenn Sie den Grunt-Task
werden:
aus den vorherigen Beispielen noch laufen haben, greift die Änderung bereits, andern-
li.navigation--entry.entry--notepad { falls starten Sie Grunt wie zuvor beschrieben oder kompilieren den Theme-Cache über
display: none; das Cache-Modul neu.
}
Damit haben Sie nun ein einfaches CSS in Less überführt. Less kann aber viel mehr:
Listing 4.10 Die Datei »themes/Frontend/LoremIpsum/frontend/_public/src/less/
@myColor: #ff0000;
_modules/no_notepad.less«
.myStyle {
background-color: @myColor;
108 109
4 Shopware-Templating 4.2 Erweitertes Templating mit JavaScript und Less
} }
.someOtherStyle { .someOtherBox {
background-color: @myColor; text-decoration: underline;
} color: red;
} 4
Listing 4.13 Definition und Nutzung einer Less-Variable
Erneut besteht der Vorteil darin, dass Sie bestimmte, häufig genutzte Style-Informa-
Hier wird zunächst die Variable myColor definiert – sie erhält den Wert #ff0000 (also
tionen nur an einer Stelle zentral pflegen müssen und später komfortabel ändern
rot). Diese Variable wird dann in den CSS-Klassen myStyle sowie someOtherStyle
können. Mixins können dabei auch Parameter haben, wie das Beispiel des unitize-
genutzt, um den Hintergrund zu definieren.
Mixins zeigt:
Wenn der Hintergrund nun zu einem späteren Zeitpunkt geändert werden soll, muss
.my-class {
nur der Wert der Variablen @myColor angepasst werden. Dies ist der Grund, warum Sie
.unitize(font-size, 22);
in der Theme-Konfiguration allgemeingültige Primär- und Sekundärfarben definie-
.unitize-padding(10, 10, 10, 10);
ren können, die an vielen verschiedenen Stellen berücksichtigt werden. Die stan-
}
dardmäßig verfügbaren Farben werden in der Theme.php des Responsive-Templates
definiert – hier können Sie auch die Standardwerte entnehmen. Das unitize-Mixin dient dazu, absolute Pixel-Angaben in relative rem-Angaben
Während Sie mit Variablen bestimmte Werte wiederverwenden können, haben Sie umzuwandeln: Dadurch richtet sich die Größe jeweils nach der Standardschriftgröße
mit Mixins die Möglichkeit, komplette Style-Definitionen zu übernehmen, ohne des Browsers. Dies ist möglich, weil Less es erlaubt, innerhalb der Styles einfache
diese duplizieren zu müssen: arithmetische Operationen durchzuführen. Ebenfalls möglich ist es, Selektoren zu
verschachteln:
.my-text {
text-decoration: underline; .product {
color: red; .detail {
} font-weight: bold;
.someBox { .description {
.my-text; text-decoration: underline;
} }
.someOtherBox { }
.my-text; }
}
Dies wird nach der Kompilierung zu:
Listing 4.14 Nutzung von Mixins in Less
.product .detail {
In diesem Beispiel wird zunächst die Klasse my-text definiert: Sie unterstreicht einen font-weight: bold;
Text und setzt ihn in Rot. Die beiden CSS-Klassen someBox und someOtherBox nutzen }
nun diese Klasse als Mixin: Nach dem Kompilieren wird die Style-Definition von my- .product .detail .description {
text in someBox und someOtherBox übernommen: text-decoration: underline;
}
.someBox {
text-decoration: underline; Auch dies kann in der Praxis eine große Arbeitserleichterung sein, da Selektoren in
color: red; aller Regel ja genutzt werden, um bestimmte Verschachtelungen zu beschreiben.
110 111
4 Shopware-Templating 4.2 Erweitertes Templating mit JavaScript und Less
.examplebox {
.unitize-margin(0, 0, 10, 0);
.unitize-padding(10, 10, 10, 10);
.border-radius(3px); 4
border: 1px solid @panel-border;
display: block;
}
@import "_modules/no_notepad";
@import "_modules/examplebox";
Durch diese Anpassungen wird auf der Artikeldetailseite oberhalb der Artikelbe-
schreibung eine neue Box examplebox erzeugt. Diese erhält über die Style-Definitio-
nen einen runden Rahmen. Durch die unitize-Mixins erhält die Box weiterhin
Padding und Margin relativ zur Schriftgröße des Browsers. Zunächst sollen einige
Theme-Variablen genutzt werden:
112 113
4 Shopware-Templating 4.2 Erweitertes Templating mit JavaScript und Less
114 115
4 Shopware-Templating 4.2 Erweitertes Templating mit JavaScript und Less
Warnmeldung mit Icon Verstecken und Anzeigen von Informationen bis hin zur Abbildung interaktiver Pro-
</div> duktdesigner ist dabei vieles möglich.
</div>
Für einen ersten Test geben Sie im Folgenden zunächst nur die Meldung »Hallo
Listing 4.20 Ansprechendere Hinweismeldung mit Icon Welt« aus:
4
alert("Hallo Welt");
Hinweisboxen Listing 4.22 Die Datei »themes/Frontend/LoremIpsum/frontend/_public/src/js/
Shopware stellt für Hinweisboxen fertige Smarty-Komponenten bereit, die bei Be- my-example.js«
darf eingebunden werden können (vgl. dazu Kapitel 14, »Arbeiten mit Formularen«).
Diese muss nun noch in der Theme.php des Templates registriert werden:
Sehr beliebt sind darüber hinaus auch die sogenannten Badges: An Produktboxen
namespace Shopware\Themes\LoremIpsum;
lenken sie die Aufmerksamkeit des Besuchers auf Rabattaktionen oder andere wich-
tige Informationen: use Shopware\Components\Form as Form;
<div class="content--title">Badges</div>
<div><span class="badge is--primary">1</span>Badge 1</div> class Theme extends \Shopware\Components\Theme
<div><span class="badge is--secondary">2</span>Badge 2</div> {
<div><span class="badge is--minimal">3</span>Badge 3</div> protected $extend = 'Responsive';
Auch die sogenannten Ribbons sind für Hinweise und Markierungen an Produkten protected $name = "LoremIpsum";
gut geeignet: protected $description = "LoremIpsum";
protected $author = "LoremIpsum";
<div class="content--title">Ribbons</div> protected $license = "LoremIpsum";
<div class="ribbon-box">
<div class="ribbon is--left"> protected $javascript = array(
<p class="ribbon--content orange">Highlight!</p> 'src/js/my-example.js'
</div> );
<div class="ribbon is--right"> }
<p class="ribbon--content green">Highlight!</p>
Listing 4.23 Die Datei »themes/Frontend/LoremIpsum/Theme.php«
</div>
</div>
Wie zuvor schon bei der Eigenschaft $css wird in der Eigenschaft $javascript eine
Listing 4.21 Hinweisbänder (Ribbons) in Shopware Liste von JavaScript-Dateien angegeben, die zum Theme gehören. Wenn Sie den
Grunt-Task nutzen, müssen Sie nach der Registrierung einer neuen JavaScript-Datei
Insgesamt zeigen die Beispiele, dass auch im Frontend das Rad nicht immer neu unter Umständen die Konfiguration neu exportieren und den Task neu starten:
erfunden werden muss: Durch vordefinierte Less-Komponenten und Variablen
cd /shopverzeichnis/
ebenso wie durch viele nützliche CSS-Klassen können Sie schnell Ergänzungen am
php ./bin/console sw:theme:dump:configuration
Template vornehmen, die sich nahtlos in das Gesamtbild des Shops einfügen.
cd theme
grunt
4.2.2 JavaScript-Plugins
Wenn Sie nun eine Seite im Shop aufrufen, erscheint zunächst ein Fenster mit der
Neben Templates und Styles ist JavaScript das dritte große Werkzeug im Shopware- Meldung »Hallo Welt«. In der Praxis sollten Sie allerdings auf diese Art der Erweite-
Frontend. Mit JavaScript als Programmiersprache können Sie das Verhalten des Front- rung verzichten: Shopware bietet ein eigenes JavaScript-Plugin-System, das Ihnen
ends umfangreich programmieren: Vom einfachen Nachladen von Daten über das hilft, wartbare und übersichtliche JavaScript-Erweiterungen zu schreiben.
116 117
4 Shopware-Templating 4.2 Erweitertes Templating mit JavaScript und Less
Im folgenden Beispiel erweitern Sie die Produktdetailseite so, dass der Nutzer beim wählt und dann darauf das Plugin (hier: loremExample) ausgeführt. Jedes Plugin kennt
Klick auf Artikel unter »Ähnliche Artikel« oder »Kunden haben sich ebenfalls angese- das Element, auf dem es ausgeführt wurde, und kann entsprechend auf ihm arbeiten.
hen« nicht zu der jeweiligen Seite weitergeleitet wird, sondern den entsprechenden In diesem Fall habe ich als Selektor .product--box.box--slider ausgewählt, da dies
Artikel in einer kleinen Modalbox sieht. die Klasse der Artikelboxen in den Slidern ist.
;(function ($, window) { Die eigentliche Plugin-Initialisierung sieht auf den ersten Blick komplizierter aus, als 4
'use strict'; sie ist. Bei dem Konstrukt
Ganz grob lassen sich bei dem JavaScript-Programm zwei Teile unterscheiden: das Durch den Aufruf von applyDataAttributes liest Shopware die Data-Attribute des
Plugin und der Plugin-Aufruf. DOM-Elements, auf dem das Plugin aufgerufen wurde, und führt diese mit dem
Der Plugin-Aufruf ist in der Regel ein Einzeiler: defaults-Objekt des Plugins zusammen. Dieses Plugin wird ja auf dem Selektor .pro-
duct--box.box--slider aufgerufen. Der sieht im HTML-Dokument so aus:
$('.product--box.box--slider').loremExample();
<div class="product--box box--slider" data-ordernumber="SW10115.3">
Die Plugins werden immer auf bestimmten Elementen aufgerufen. Daher wird im <!-- HTML-Code einer Product-Box -->
ersten Teil mit einem jQuery-Selektor ein bestimmtes Element im Dokument ausge- </div>
118 119
4 Shopware-Templating 4.2 Erweitertes Templating mit JavaScript und Less
Das Attribut data-ordernumber ist ein sogenanntes Data-Attribut. Durch den Aufruf wird. Grundsätzlich sind derartige Event-Registrierungen auch ohne die Helfer-
von applyDataAttributes liest Shopware dieses als ordernumber aus (das Präix data- methode _on möglich: Diese Methode hat aber den Vorteil, dass die Events auch
entfällt also) und führt dieses mit dem defaults-Objekt zusammen. automatisch wieder deregistriert werden, wenn sie nicht mehr benötigt werden.
In Ihrem Plugin steht Ihnen nun immer das Objekt me.opts zur Verfügung, und über Nach Möglichkeit sollten Sie also diese Methode verwenden.
me.opts.ordernumber können Sie die Bestellnummer des Elements auslesen: Für das Die besagte Callback-Methode onButtonClick sieht wie folgt aus: 4
obige Beispiel lautet sie »SW10115.3«.
onButtonClick: function (event) {
Data-Attribute sind eine sehr einfache Möglichkeit, um Daten zwischen dem Tem- var me = this,
plate und JavaScript auszutauschen: Immer wenn Sie also bestimmte Informationen path = csrfConfig.basePath,
in JavaScript benötigen, die letztlich nur im PHP-Stack von Shopware zur Verfügung ordernumber = me.opts.ordernumber,
stehen, haben Sie die Möglichkeit, diese Informationen an das Template zu überge- quickView = '/detail/productQuickView/ordernumber/';
ben und als Data-Attribut auszugeben.
if (!ordernumber) {
var me = this? return
}
Häufig finden Sie in JavaScript-Beispielen diese Zuweisung: var me=this; Hierbei
handelt es sich um eine bewährte Vorgehensweise, um die Geltungsbereiche in Java-
event.preventDefault();
Script sauber zu trennen: Durch die Zuweisung des aktuellen Geltungsbereichs this
zur Variablen me ist es für Sie leichter, verschachtelte Geltungsbereiche sauber zu
$.modal.open(path + quickView + ordernumber, {
trennen, wie folgendes Beispiel zeigt:
mode: 'ajax',
var myClass = function (el) { sizing: 'content'
this.name = "Jan"; });
el.on('click', function() { },
alert(this.name);
Listing 4.26 Callback-Funktion für das »click«-Event
});
};
myClass($("body")) Zunächst werden hier einige Variablen zugewiesen: path enthält den relativen Pfad
des Shops, ordernumber die Bestellnummer aus dem Data-Attribut und quickview die
Die innere anonyme Funktion hat einen eigenen Geltungsbereich this. Anders als
URL zu einer Kurzansicht eines Artikels, wie sie beispielsweise auch im Shopware-
man auf den ersten Blick denken könnte, wird der Name »Jan« niemals ausgegeben –
Warenkorb verwendet wird. Falls die Bestellnummer leer sein sollte, verlassen Sie die
die Geltungsbereiche passen nicht. Durch die explizite Benennung des Geltungs-
Methode mit einem return. Andernfalls wird durch den Aufruf von preventDefault()
bereichs können Sie derartige Überraschungen vermeiden.
verhindert, dass die Aktion ausgeführt wird, die eigentlich bei einem Klick stattfinden
soll. In unserem Fall würde der Browser den Benutzer eigentlich zu der entsprechen-
Die Methode registerEvents ist für die Registrierung von Events zuständig:
den Artikeldetailseite führen. Dies wird nun unterbunden. Stattdessen wird durch
registerEvents: function () { $.modal.open eine Modalbox geöffnet. Die Modalbox zeigt den Inhalt einer hinterleg-
var me = this; ten URL als Inhalt an. Die URL wird in diesem Fall aus path + quickView + ordernumber
me._on(me.$el, 'click', $.proxy(me.onButtonClick, me)); zusammengesetzt. Im Ergebnis wird dann beispielsweise die URL /shopware/detail/
}, productQuickView/ordernumber/SW10115.3 aufgerufen.
Hier wird die Helfermethode _on verwendet. Sie registriert auf einem Element (hier: destroy: function () {
me.$el) ein Event (hier: click) und ruft bei Auftreten des Events den Callback auf var me = this;
(hier me.onButtonClick). Der Callback wird hier aber nicht direkt angegeben, sondern me.off(me.eventSuffix);
in der Form $.proxy(me.onButtonClick, me). Durch die Proxy-Methode wird sicher- me._destroy();
}
gestellt, dass unser Callback immer im Geltungsbereich unseres Plugins ausgeführt
120 121
4 Shopware-Templating
Der Destruktor destroy wird aufgerufen, wenn das Plugin beendet wird – das ge-
schieht beispielsweise in Responsive-Templates, wenn der Viewport sich auf eine
Größe ändert, die vom Plugin nicht unterstützt wird. Das Implementieren der Me-
thode destroy ist zwingend notwendig, hier können Sie aufräumen und beispiels-
weise Events deregistrieren. Durch das Verwenden der Methode _on geschieht dies in
diesem Beispiel automatisch.
Das Ergebnis ist in Abbildung 4.13 zu sehen: Nach einem Klick auf einen Artikel unter
»Zubehör«, »Ähnliche Artikel« oder »Kunden haben sich ebenfalls angesehen« ver-
lässt der Kunde nicht mehr – wie im Shopware-Standard – die Seite. Stattdessen öff-
net sich eine Modalbox und zeigt den entsprechenden Artikel in einer Kurzansicht
an. Erst wenn der Kunde nun erneut auf den Artikel klickt, wechselt er die Seite. Klickt
er neben die Modalbox oder auf das kleine Kreuz, schließt sich die Box und der
Kunde kann auf der ursprünglichen Seite weitersurfen.
122
Auf einen Blick
1 Einleitung ...................................................................................................... 17
4 Shopware-Templating ................................................................................ 87
Inhalt
Vorwort .................................................................................................................................................. 11
1 Einleitung 17
4 Shopware-Templating 87
5
Inhalt Inhalt
5.1 Das erste Plugin ................................................................................................................... 137 10.1 Schnelle Ergebnisse mit den Backend-Komponenten erzielen ...................... 257
5.2 Das Shopware-Event-System ......................................................................................... 146 10.2 Assoziationen nutzen ........................................................................................................ 267
6.3 Eigene Models ....................................................................................................................... 178 11.1 REST-Schnittstelle einrichten und nutzen ............................................................... 289
6.4 Repositorys und der ORM-Querybuilder .................................................................. 191 11.2 Die API lokal verwenden .................................................................................................. 304
7.3 Elemente für Designer konfigurieren ........................................................................ 212 12.1 Standardkommandos nutzen ........................................................................................ 325
8.4 Einschränken mit eigenen Bedingungen ................................................................. 231 13.2 Kompatible Plugins schreiben ....................................................................................... 335
6 7
Inhalt Inhalt
8 9
Index
Index
A Artikel (Forts.)
Beschreibung ................................................ 55, 83
Abhängigkeiten ....................................................... 30 Bewertung ............................................................. 83
ACL ................................................................................ 38 Bezeichnung .................................................. 55, 56
Administrator .................................................... 37, 38 Bild ............................................................. 56, 83, 95
AGB ............................................................................... 81 Bonus ...................................................................... 83
Aktualisierung .......................................................... 18 Bundle ..................................................................... 83
Aktualisierungsstrategie ...................................... 48 Cross-Selling ......................................................... 59
ant ................................................................................. 29 Eigenschaft .................................................... 55, 83
Apache ......................................................................... 22 Freitextfeld ........................................................... 80
APCu 씮 PHP Gewicht .................................................................. 95
API ................................................................................. 37 Grundpreisberechnung ................................... 56
ACL ........................................................................ 312 Hersteller ................................................. 55, 56, 59
Artikel ................................................................... 298 Individualisierung ............................................. 59
Aufbereitung der Daten ................................ 317 Kategorie ........................................................ 55, 56
Batch-Modus ........................................... 300, 321 Lagerbestand ....................................................... 58
Beispiel-Client ................................................... 292 Lieferzeit ................................................................ 83
Berechtigung ..................................................... 312 Mindestbestellmenge ....................................... 56
Bestellstatus ...................................................... 296 Modus .................................................................. 158
Controller ........................................................... 305 Nachfolgeartikel .............................................. 159
create .......................................................... 311, 314 Name ....................................................................... 83
curl ........................................................................ 293 Nummer ................................................................. 55
delete .......................................................... 311, 316 Pflichtfelder .......................................................... 56
Eigenen Endpunkt erstellen ........................ 305 Preis .................................................... 55, 56, 58, 83
Einrichtung ........................................................ 290 Reiter ....................................................................... 83
Fehlermeldung ................................................. 312 Stammdaten ........................................................ 56
filtern .................................................................... 296 Steuersatz .............................................................. 55
getIdByData ...................................................... 323 Typen ................................................................... 158
getList ......................................................... 311, 313 Übersetzung ......................................................... 55
getOne ................................................................. 311 Variante ............................................ 56, 57, 58, 83
Kunden ................................................................ 295 Verfügbarkeit ...................................................... 56
lokale Verwendung ......................................... 304 Vergleich ................................................................ 82
Nutzer .................................................................. 290 Vorauswahl .......................................................... 58
paginieren .......................................................... 296 Warenkorb ............................................................ 83
Passwort ............................................................. 290 Zubehör ........................................................... 59, 83
Ressource .................................................. 305, 310 Artikeldetailseite ........................................... 49, 160
Ressourcenübersicht ...................................... 289 Reiter .................................................................... 150
REST ............................................................... 37, 289 Artikel-Übersicht .................................................... 53
Stapelverarbeitung ............................... 300, 321 Bearbeitung .......................................................... 54
update ........................................................ 311, 315 Filterung ................................................................ 54
Varianten ............................................................ 302 individuelle Filter ............................................... 54
Zugang ................................................................. 290 Kategoriebaum ................................................... 54
Arbeitsumgebung ................................................... 30 Kategorien ............................................................ 54
Artikel .......................................................................... 56 Spalten ................................................................... 54
Ähnliche Artikel ........................................... 59, 83 Split-View .............................................................. 55
anlegen ................................................................... 55 Variante ................................................................. 55
Artikeldetailseite ......................................... 58, 83
453
Index Index
454 455
Index Index
456 457
Index Index
458 459
Index Index
460 461
Index Index
462 463
Index Index
464 465
Index
466
Wissen, wie’s geht.
Wir hoffen sehr, dass Ihnen diese Leseprobe gefallen hat. Sie dürfen sie gerne
empfehlen und weitergeben, allerdings nur vollständig mit allen Seiten. Bitte
beachten Sie, dass der Funktionsumfang dieser Leseprobe sowie ihre Darstel-
Daniel Nögel lung von der E-Book-Fassung des vorgestellten Buches abweichen können.
Diese Leseprobe ist in all ihren Teilen urheberrechtlich geschützt. Alle Nut-
Shopware – Das Handbuch für Entwickler zungs- und Verwertungsrechte liegen beim Autor und beim Verlag.
466 Seiten, gebunden, Dezember 2016
49,90 Euro, ISBN 978-3-8362-4243-1 Teilen Sie Ihre Leseerfahrung mit uns!
www.rheinwerk-verlag.de/4185