Shopware 5 Theming – Teil 2 – Arbeiten mit Smarty

Shopware 5 Theming – Teil 2 – Arbeiten mit Smarty

Ewald Gering 06. Dezember 2016 5

In diesem Teil erklären wir die ersten Schritte mit Smarty. Dafür sollte euch das Vererbungssystem von Shopware bekannt sein, das in dem letzten Teil erklärt wurde.
Was macht diese Smarty Blöcke so besonders?
Man kann diese ersetzen, verändern, erweitern und auch den Inhalt löschen.

  1. Template ersetzen
  2. Block ersetzen
  3. Block erweitern
  4. Block löschen
  5. Block finden

Template ersetzen

Alle Anpassungen müssen in unserem eigenem Theme gemacht werden.
Wie im ersten Teil beschrieben, leiten wir von den originalen Shopware Dateien ab und erhalten damit die Updatefähigkeit.

Als Beispiel wollen wir diese Template Datei bearbeiten:

/themes/Frontend/Bare/frontend/listing/index.tpl

Dafür gehen wir in unser Theme und erstellen diese Datei:

/themes/Frontend/MEIN_THEME/frontend/listing/index.tpl

Da wir prinzipiell erstmal die Datei gleich behalten möchten leiten wir unser Template von der Originalen ab.

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

Mit dem parent Befehl verweisen wir auf die Elterndatei, die sich in diesem Fall standardmäßig im Bare Theme auffinden lässt.

Wenn wir das ganze speichern und im Shop Backend das Theme neu kompilieren sehen wir keine Veränderung.
Das liegt daran, dass wir in unserer Template Datei nur die Originaldatei laden lassen.

Jetzt kann es losgehen mit dem Verändern.

Block ersetzen

Dann öffnen wir mal die Originale listing/index.tpl aus dem Bare Theme und schauen uns die Blöcke an.

Sehen wir uns mal diesen Block an:

{* Topseller *}
{block name='frontend_listing_index_topseller'}

Das Kommentar über dem Block verrät uns, dass es sich um die Topseller handelt.
Dort werden dann weitere Dateien geladen wie die Einkaufswelt und unsere Artikel.

In unsere "listing/index.tpl" fügen wir nun den Block ein und schreiben einfach als Inhalt in den Block "Die Topseller sollen raus.".

{* Topseller *}
{block name='frontend_listing_index_topseller'}
Die Topseller sollen raus.
{/block}

Das ganze sollte jetzt so aussehen:

topseller_block_ueberschreiben

Hier kann man nun einfügen was man möchte, ob es ein eigenes Bild oder ähnliches ist.

Block erweitern

Manchmal wollen wir etwas hinzufügen und das Original beibehalten. Dafür gibts es die 2 Funktionen "prepend" und "append".
Es gibt noch eine weitere Möglichkeit und zwar den Befehl "{$smarty.block.parent}".
Dieser lädt den bisherigen Block Inhalt.
Dies hat den Vorteil, dass man sich mit anderen Plugins die auch diesen Block nutzen nicht in die Quere kommt.

Wenn man etwas vor dem eigentlichem Inhalt haben möchte schreibt man hinter den Block Namen prepend:

{* Topseller *}
{block name="frontend_listing_index_topseller" prepend}
Vor dem Topseller Block.
{/block}

Die andere Möglichkeit:

{* Topseller *}
{block name="frontend_listing_index_topseller"}
Vor dem Topseller Block.
{$smarty.block.parent} 
{/block}

topseller_block_prepend

Das ganze nach dem Topseller Block mit dem append Befehl:

{* Topseller *}
{block name="frontend_listing_index_topseller append}
Nach dem Topseller Block.
{/block}

Die andere Möglichkeit:

{* Topseller *}
{block name="frontend_listing_index_topseller"}
{$smarty.block.parent} 
Vor dem Topseller Block.
{/block}

topseller_block_append

Block löschen

Hier ist es so Simpel wie es scheint... Der Block wird einfach leer gelassen.

{* Topseller *}
{block name="frontend_listing_index_topseller"}
{/block}

Blocks finden

Mit dem Shopware Profiler von Shyim kann man ganz genau sehen wo ein Block anfängt und aufhört.
Dadurch ist das Suchen von dem richtigen Smarty Block sehr einfach.
So sieht das ganze dann in der Developer Bar von z.B. Google Chrome aus.

block_plugin

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

5 Kommentare

  • Hallo Ewald,
    kurzer Tipp: Grundsätzlich sollte man in den Templates ja eher nicht prepend/append nutzen, weil dies die Erweiterbarkeit durch Plugins stört. Hier würde ich immer empfehlen, im Elternelement des zu ergänzenden Blockes mit {$smarty.block.parent} zu arbeiten :)
  • Hallo Dominik,

    vielen Dank für den Tipp. Die mögliche Problematik mit anderen Plugins habe ich wohl übersehen. Ich habe die Variante auch mal hinzugefügt.

    Viele Grüße
    Ewald
  • […] wollen wir die Texte wie "Mein Konto" und den Preis im Warenkorb entfernen. An dieser Stelle werden Smarty und Less Kenntnisse benötigt. Durch viele andere Tutorials sollte das allerdings kein Problem für […]
  • Hey, super Beitrag. Danke dir. Ist da evtl. noch ein kleiner Fehler im Code? Ich denke es muss heissen: {extends file=parent:'frontend/listing/index.tpl'}
    Viele Grüsse
  • Hey Michael,

    danke für den Hinweis. Jetzt ist es wieder das Listing :)

    Viele Grüße,
    Ewald

Was denkst du?

Das Shopware eBook für Einsteiger!

Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.Zum 8mylez Store

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 Shop erstellst und verwaltest

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein erstes eigenes Theme erstellst
Plugin Theme Struktur überschreiben und Plugins individuell anpassen
Logo Größe anpassen mit Less für Shopware 5
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Wie du jedes Icon in Shopware 5 anpassen kannst
Wie du deine Shop Geschwindigkeit optimierst
Plugin: Einkaufswelt Element Kategorie-Teaser mit eleganten Mouseover Effekten
Social Media Icon mit Link im Footer
Shopware Logo aus dem Footer entfernen
Die Ups! Ein Fehler ist aufgetreten! Fehlermeldung

8mylez gehört zu

© 2016-2017