Wie funktionieren in SW6 Template Anpassungen?

Shopware 6 (German) Themes & Design
1

Hallo zusammen,

ich setze grade meinen ersten SW6 auf und möchte nun Anpassungen am Template vornehmen. Allerdings funktioniert das nicht, obwohl ich exakt nach der Doku vorgegangen bin.

Als erstes habe ich mir ein neues Theme generiert und ein paar SCSS Anpassungen gemacht. Das funktioniert soweit einwandfrei. Dann habe ich im Ordner meines Plugins folgenden Pfad und Datei erstellt /src/Resources/views/storefront/layout/header/header.html.twig und habe dort in der ersten Zeile die Vererbung zur Basis-Datei angegeben:

{% sw_extends '@Storefront/storefront/layout/header/header.html.twig' %}

Und dann versuche ich lediglich einen vorhandenen Block anzusprechen und zu verändern:

{% block layout_header_logo %}
    
        {% sw_include '@Storefront/storefront/layout/header/logo.html.twig' %}
    
{% endblock %}

Den Cache habe ich geleert und das Theme neu kompiliert. Allerdings ändert sich im Frontend nichts.

Mache ich etwas falsch oder habe ich etwas vergessen?

2

@Timo_ITM schrieb:

Hallo zusammen,

ich setze grade meinen ersten SW6 auf und möchte nun Anpassungen am Template vornehmen. Allerdings funktioniert das nicht, obwohl ich exakt nach der Doku vorgegangen bin.

Als erstes habe ich mir ein neues Theme generiert und ein paar SCSS Anpassungen gemacht. Das funktioniert soweit einwandfrei. Dann habe ich im Ordner meines Plugins folgenden Pfad und Datei erstellt /src/Resources/views/storefront/layout/header/header.html.twig und habe dort in der ersten Zeile die Vererbung zur Basis-Datei angegeben:

{% sw_extends ‚@Storefront/storefront/layout/header/header.html.twig‘ %}

Und dann versuche ich lediglich einen vorhandenen Block anzusprechen und zu verändern:

{% block layout_header_logo %}

{% sw_include ‚@Storefront/storefront/layout/header/logo.html.twig‘ %}

{% endblock %}

Den Cache habe ich geleert und das Theme neu kompiliert. Allerdings ändert sich im Frontend nichts.

Mache ich etwas falsch oder habe ich etwas vergessen?

Ich habe auch einfach mal deine Schritte befolgt, aber statt eine CSS-Klasse hinzuzufügen, habe ich statt nem Logo einen Text ausgegeben.

Worüber ich gestolpert bin:

  1. Hast du deinem SalesChannel das Theme zugewiesen?

  2. Ich musste nach der Zuweisung noch den Cache leeren:

    bin/console cache:clear

Hast du denn in den Browser DevTools geschaut, ob die CSS-Klasse drin ist, aber vielleicht dein CSS an der Stelle nicht greift?

Bei mir hat es geklappt.

{% sw_extends '@Storefront/storefront/layout/header/header.html.twig' %}

{% block layout_header_logo %}
    WOOOHOOOOOOO
{% endblock %}

1111×317 17.6 KB

3

Ich muss sagen, ich habe das selbe Problem wie @Timo_ITM‍. Ich habe es gerade nochmal versucht, leider ohne Erfolg.

Update: Ich konnte das Problem lösen, weiß aber nicht ob das normal so sein soll. Fehlerbehebung am Ende meines Posts.

 

Zuerst habe ich ein eigenes Theme erstellt

php bin/console theme:create

 

Als Grundverzeichnis nehme ich folgendesn Pfad:

/custom/plugins/MeinTheme/src/Resources/views/storefront/

Dort habe ich zwei Ordner und eine Datei angelegt:

layout
    └───header
            header.html.twig

Die Datei header.html.twig hat folgenden Inhalt

Erst leite ich das originale Template ab, dann passe ich meinen gewünschten Block an:

{% sw_extends '@Storefront/storefront/layout/header/header.html.twig' %}


{% block layout_header_logo %}
    WOOOHOOOOOOO
{% endblock %}

 

Leider ohne Erfolg. Egal was ich mache, es wird nicht das gewünschte angezeigt.

Das Theme ist im Verkaufskanal aktiv. Ich habe alle Rechte überprüft und alle Verzeichnisse gehört dem Nutzer www-data, also volle Zugriffsrechte.

Ich habe das Theme kompiliert:

Start theme compilation

 ! [NOTE] Took 43.471875 seconds

Und auch den Cache geleert.

// Clearing the cache for the dev environment with debug true


 [OK] Cache for the "dev" environment (debug=true) was successfully cleared.

Alles mehrmals und in unterschiedlicher Reihenfolge.

In der Datei .env im Root-Verzeichnis habe ich die Variable  APP_ENV auf dev gesetzt. 

APP_ENV=dev

Ursprünglich wollte ich mir alle verfügbaren Variablen innerhalb der .html.twig-Datei ausgeben lassen, was aber leider auch nicht funktioniert hat.

Meinen Browser lade ich auch grundsätzlich mit dem kürzel Strg + F5 neu, um auch den Browser nie aus dem Cache lasen zu lassen. 

Alles ohne Erfolg. Was hab’ ich übersehen, wo liegt der Fehler? Kann mir irgendjemand von euch weiterhelfen? 

 

Update

Ich habe es geschafft, dass mir meine Änderungen im Theme angezeigt werden. Aber ich weiß nicht, ob der Weg zur Lösung so sein sollte.

Nach dem erstellen des Thema via 

php bin/console theme:create

Habe ich das Plugin installiert und aktiviert. Mein Theme wurde mir folglich unter Inhalte -> Themes angezeigt. Änderungen werden nicht übernommen.

Erst wenn ich mein eigenes Theme dupliziere, werden auch die Änderungen angezeigt, aber nur im duplizierten Theme. Ist das normal so? 
Naja also vorerst bin ich zufrieden und die Anpassungen können beginnen. Wäre aber trotzdem interessant, ob das so gehört…? 
Ich meine ich erstelle ein Theme, bearbeite das Theme, muss das Theme aber dann erst wieder duplizieren, damit dann nur im Duplikat die Änderungen angezeigt werden. Hm.

 

4

Hi zusammen,

erst mal Danke für Eure Hilfe. Leider hat es das Problem aber nicht behoben. Die genannten Punkte habe ich alle schon versucht.

Shopware selbst hat sich das Problem angeschaut und nach etwas rätseln vorgeschlagen, dass ich versuchen soll, den Namen meines Plugins in der theme.json mit einem Großbuchstaben beginnen zu lassen. Und das war dann auch tatsächlich das einzige Problem.

Ich habe also quasi meine theme.json von

  "views": [
     "@Storefront",
     "@Plugins",
     "@b3fitness"
  ]

zu

  "views": [
     "@Storefront",
     "@Plugins",
     "@B3fitness"
  ]

geändert und schon hat alles funktioniert Smile