Erweitern einer Template-Datei

Wie Du bereits gelernt hast, verwendet hostware unter der Haube die twig template engine. Dadurch lässt sich alles rund um Storefront und Theme ganz einfach erweitern.

Mach Dich damit vertraut

Zuerst solltest Du Dich mit den zentralen Template-Dateien der hostware-Storefront vertraut machen. Schau im Verzeichnis /resources/views/storefront nach. Dort findest Du alle grundlegenden twig-Templates.

Die Verzeichnisstruktur ist extrem wichtig und sollte immer berücksichtigt werden. Du benötigst die Pfadstruktur immer dann, wenn Du etwas erweitern möchtest.

Erweiterungsvorgang

Was möchtest Du ändern?

Finde heraus, welches Template Du ändern möchtest. Musst Du wirklich das HTML-Layout ändern, um das Theme an das Design anzupassen? Vielleicht erreichst Du das Ziel auch nur mit CSS.

Nehmen wir an, Du möchtest die folgende Produktkarte anpassen, die wahrscheinlich in einer separaten Komponente gekapselt ist.

Template finden

Diese spezielle Karte findest Du in /storefront/components/product/card.twig.

In diesem Fall sieht die Template-Datei so aus. Wie Du sehen kannst, gibt es an jeder wichtigen Stelle einen {% block %}-Wrapper um das HTML. Dieses Vorgehen stellt sicher, dass Du so wenig wie möglich ändern musst.

Das Ziel für dieses Beispiel ist es, a) der Klasse .card eine weitere Klasse hinzuzufügen und b) dem Kartentitel einen Präfix voranzustellen.

Deine Überschreibungs-Template erstellen

Um dieses Template zu überschreiben, musst Du in Deinem Theme-/Modulverzeichnis einen Template-Namen mit demselben Namen und derselben Pfadstruktur anlegen.

Für dieses Beispiel erstelle folgendes Template: custom\themes\hw\hostx\resources\views\storefront\component\product\card.twig

Die erste Zeile in Deiner benutzerdefinierten card.twig-Datei sollte den Pfad zur Datei enthalten, die Du überschreiben möchtest. In diesem Fall müssen wir den Namespace storefront:: voranstellen, weil wir ein Core-Template ändern wollen. Damit teilt man dem hostware-Framework mit, in welcher Reihenfolge die Templates gerendert werden sollen.

{% hw_extends 'storefront::component/product/card.twig' %}

Einzelne Blöcke überschreiben

In unserem Beispiel möchten wir den Teil mit class="card" überschreiben, um unsere zusätzliche Klasse hinzuzufügen. Wir müssen im ursprünglichen Template eine {% block %}-Stelle finden, die vor dem liegt, was wir ändern möchten. In diesem Beispiel ist der Block product_item_card perfekt für uns.

Dann schreiben wir vorerst einfach folgenden Code, um die gesamte Produktkarte zu überschreiben:

Der neue Inhalt "Overwrite!" wird nun anstelle des ursprünglichen Inhalts innerhalb dieses speziellen Blocks gerendert. Stattdessen sollten wir nur das ändern, was wir brauchen, und dann den nächsten untergeordneten Block rendern, um so wenig Core-Code wie möglich zu überschreiben. Das sollte funktionieren:

Wir möchten außerdem den Titel ändern. Jeder Block, den Du ändern möchtest, MUSS auf der obersten Ebene Deiner twig-Datei stehen. Verschachtelte Blöcke sind nicht gültig, wenn Du sie überschreiben möchtest. Schau in die Originaldatei, um den besten zu überschreibenden Block zu finden. In unserem Fall scheint der Block product_item_card_head_inner am besten zu passen.

Unsere Überschreibungsdatei sieht jetzt so aus:

Schau es Dir an

Nachdem Du die Datei gespeichert hast, solltest Du Deine Änderungen sehen. (Wenn nicht, versuche den Cache zu leeren!)

Fehlerbehebung

Wenn Deine Änderungen nicht gerendert werden, prüfe Folgendes:

1. Ist Dein Template-Pfad derselbe wie im Core-Template?

2. Hast Du das hw_extends flag korrekt in der ersten Zeile Deines Templates eingefügt?

3. Überschreibst Du den richtigen Block auf der obersten Ebene Deiner twig-Datei?

4. Hast Du den Cache geleert? (Administration -> Einstellungen -> Debug ODERphp artisan twig:cache)

Wenn Du weitere Probleme hast, kontaktiere uns bitte.