Shopware 5 Theming – Teil 2 – Arbeiten mit Smarty

Shopware 5 Theming – Teil 2 – Arbeiten mit Smarty

Ewald Gering 06. Dezember 2016 12

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'}

Der 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. Man sollte im Theme am Besten mit dem "{$smarty.block.parent}" arbeiten.

Wenn man etwas vor dem eigentlichem Inhalt haben möchte schreibt man es vor den parent Block.

{* 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 "{$smarty.block.parent}" Befehl:

{* Topseller *}
{block name="frontend_listing_index_topseller"}
	{$smarty.block.parent} 
	Nach 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

12 Kommentare

  • Hallöchen,

    danke für die tolle Anleitung, das hat mir sehr weitergeholfen. Ich wollte jetzt ein wenig am Footer rumspielen und auch da einiges testen, aber wenn in der footer.tpl {$smarty.block.parent} einsetze, lädt er meine Seite nicht mehr. Lösche ich es wieder raus und schreibe nur Text rein, dann läuft es ganz normal. Greift diese Variable dort nicht?

    Gruß

    Thomas
  • Hey Thomas,

    extendest du die Footer Template auch?

    Viele Grüße
    Ewald
  • Hallo Ewald,

    das war es, danke. Da habe ich mich zu sehr an Deine Anleitung gehalten und da ging das unter.

    Viele Grüße


    Thomas
  • Moin, moin!
    Danke für das Tut, wenn ich das richtig sehe ist das hier aber falsch:
    {extends file=parent:'frontend/listing/index.tpl'} und müsste so lauten:
    {extends file='parent:frontend/listing/index.tpl'}

    Das Hochkomma ist an der falschen Stelle.
  • Hey David,

    da hast du recht! Ist nun angepasst.

    Vielen Dank & viele Grüße
    Ewald
  • Hallo Ewald,

    ich bin gerade im SW Forum über einen interessanten Beitrag gestoßen, in dem davon die Rede ist, dass SW inzwischen davon abrät "append" und "prepend" zu verwenden.
    Siehe hier:https://forum.shopware.com/discussion/45760/google-kundenrezensionen-einbinden#Comment_193959

    Könntest du dein Tutorial dahingehend bitte anpassen, damit niemand erst die falsche Syntax lernt.

    Und dann bist mir noch im Abschnitt "Block erweitern" ein Copy-and-Paste Fehler aufgefallen. "Vor dem Topseller Block." müste heißen "Nach dem Topseller Block."

    Ansonsten ein Top-Beitrag :-)
  • Hey Andreas,

    es scheint viele Probleme mit Plugins gegeben zu haben. Daher ist dies für das Theme die bessere Methode.

    Vielen Dank für die Aufmerksamkeit :) Ich habe das Tutorial diesbezüglich up to date gebracht.
  • 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?

8mylez Community

SHOPWARE

FORUM

shopware tutorial ebook mockup

Werde Teil einer einzigartigen Wissensdatenbank!

Zum 8mylez Shopware Forum

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Theme: Eigenes Listing Layout erstellen
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
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Staging Umgebung – Was ist das und warum brauchst du eine?
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware Logo aus dem Footer entfernen
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
Wie Cronjobs bei Shopware funktionieren und wie du sie richtig einstellst
© 2017 by 8mylez. Powered by Goltfisch GmbH.