Twig Block zwischen Blöcken einfügen Shopware 6

Shopware 6 (German) Themes & Design
1

Guten Tag,

ich möchte gerne einen zusätzlichen Block zwischen zwei Blöcken in der header.html.twig einfügen. Ich weiss, wie ich einen gesamten Block überschreibe und wie ich innerhalb eines Blocks am Anfang oder Ende etwas einfüge (parent). Aber:

  • wie füge ich ZWISCHEN zwei Blöcken der vendor header.html.twig einen komplett NEUEN Block in meiner custom header.html.twig ein? (Ich möchte neben dem Logo noch eine Box für ein paar Siegel). Kann ich nur vorhandene erweitern, keine zwischen rein schieben?
  • wie füge ich etwas in einem Block in meiner custom header.html.twig ein, wenn davor UND danach innerhalb des Blocks in der vendor header.hrml.twig noch etwas kommt? Zwei parents? Eines davor eines danach?

lg
Wilo

2 
           {% block page_product_detail_description_content %}
                {% block page_product_detail_description_content_text %}
                    
                        
                            {{ page.product.translated.description|raw }}
                        

{#eigene Einfügung ms#}
                        {% set usage = "Anwendung" %}
                        
                            {{ 'Anwendung'|trans }}
                            {{ page.product.translated.customFields.productfield_usage|raw }}
                        
{#eigene Einfügung Ende#}
                    
                {% endblock %}

 

Hier ein Beispiel:  Zusammen mit angelegten Zusatzfeldern zum Produkt (“customFields.productfield_usage”) und Textbaustein mit diesem Namen gibt der code (hier in der description.html.twig) NACH der sowieso vorhandenen offiziellen Description den Inhalt dieses Zusatzfeldes aus.

3

Oder hier - für Certificates, die als Bilder angezeigt werden. Beispielhaft in der index.html.twig: Im Backend ein Produktfield (zugeordnet zu Produkte) mit Mehrfachauswahl für die Certificates anlegen, einen Textbaustein mit dem Namen des Produktfield erzeugen, und die Assets in den Ordner bei img source laden.

                            {% for cert in page.product.translated.customFields.productfield_seals %}
                                
                                    
                                
                            {% endfor %}

…in den Block, indem Du es haben willst. @XYZ ist dabei der Name Deines verwendeten Themes.

Wie Du siehst, verwende ich keine neuen Blöcke, die ich definieren müsste, sondern setze einfach zwischen vorhandene Elemente das von mir Gewünschte…Dann wird eine ‘Box’ mit dem Zusatzfeld ausgegeben - bzw. die Bilder zu den Namen, wenn das Zusatzfeld keine Textbox ist.

1 „Gefällt mir“
4

Vielen Dank für deine Vorschläge. Ich weiss auch den Zeitaufwand sehr zu schätzen. Offen gesagt bin ich aber noch nicht so weit und verstehe das nicht. Ich bin so frei und frage noch mal nach.

Ich möchte einen Eigenen Block einfügen, der belebigen Inhalt haben kann (Bild/Text).

Im Original-Template in der header.html.twig in diesem Verzeichnis /vendor:

Programme/MAMP/htdocs/shopware/development/vendor/shopware/plattform/src/Storefront/Ressources/views/storefront/layout/header/

… befinden sich ja alle Blöcke.

In der header.html.twig im Verzeichnis /custom:

Programme/MAMP/htdocs/shopware/development/custom/plugins/MyTheme/src/Ressources/views/storefront/layout/header/

… ist bei mir noch nichts, die Datei habe ich angelegt aber sie ist leer.

Nun möchte ich in der header.html.twig im Verzeichnis /custom… einen eigenen Block anlegen. Der soll dann quasi zwischen zwei Blöcken der header.html.twig im Verzeichnis/vendor…angezeigt werden.

Die header.html.twig in /vendor… sieht so aus:

{% block layout_header %}
    {% block layout_top_bar %}
        {% sw_include '@Storefront/storefront/layout/header/top-bar.html.twig' %}
    {% endblock %}

    {% block layout_header_navigation %}
        
       

            {% block layout_header_logo %}
                
                
                    {% sw_include '@Storefront/storefront/layout/header/logo.html.twig' %}
                
            {% endblock %}
            
            {% block layout_header_search %}
                
                    
                        
                            {% block layout_header_navigation_toggle_tablet %}
                                
                                    {% block layout_header_navigation_toggle_tablet_button %}
                                        
                                            {% block layout_header_navigation_toggle_tablet_button_icon %}
                                                {% sw_icon 'stack' %}
                                            {% endblock %}
                                        
                                    {% endblock %}
                                
                            {% endblock %}
                        
                        
                            {% sw_include '@Storefront/storefront/layout/header/search.html.twig' %}
                        
                    
                
            {% endblock %}

            {% block layout_header_actions %}
                
                    
                        {% block layout_header_navigation_toggle %}
                            
                                
                                    {% block layout_header_navigation_toggle_button %}
                                        
                                            {% block layout_header_navigation_toggle_button_icon %}
                                                {% sw_icon 'stack' %}
                                            {% endblock %}
                                        
                                    {% endblock %}
                                
                            
                        {% endblock %}

                        {% block layout_header_search_toggle %}
                            
                                
                                    
                                        {% sw_icon 'search' %}
                                    
                                
                            
                        {% endblock %}

                        {% block layout_header_actions_account %}
                            
                                
                                    {% sw_include '@Storefront/storefront/layout/header/actions/account-widget.html.twig' %}
                                
                            
                        {% endblock %}

                        {% block layout_header_actions_cart %}
                            
                                
                                    
                                        {% sw_include '@Storefront/storefront/layout/header/actions/cart-widget.html.twig' %}
                                    
                                
                            
                        {% endblock %}
                    
                
            {% endblock %}
        
    {% endblock %}
{% endblock %}

Und ich möchte in meiner leeren header.html.twig nun gerne einen eigenen Block (div Container mit beliebigem Inhalt) zwischen zwei Blöcken (der header.html.twig in /custom) einfügen, und zwar zwischen:

{% block layout_header_logo %}

(hier eigener Block/div)

 {% block layout_header_search %}

Der eigene Block soll praktisch den Div Container beinhalten, in den Text/Bild etc… rein kann.

lg

Wilo

 

5

No worries! Ich habe mehrere Monate gebraucht, und kann vieles auch jetzt noch nicht.

Ein Theme anlegen: https://docs.shopware.com/en/shopware-platform-dev-en/theme-guide/theme-create

Nicht vergessen: Dem Verkaufskanal danach auch dieses Theme zuweisen. Die Ordnerstruktur aus vendor/views, die dein Theme benutzt, unter custom wiederspiegeln.

Dann nimmt Shopware einfach diese header.html.twig. Und dadurch, das Du ein eigenes Plugin (des Typs: Theme) verwendest, wird die Veränderung auch bei einem Versionsupdate nicht überschrieben. Allerdings musst Du das Plugin nach einem Update erneut aktivieren…

Z.B die vorhandene header.html.twig nehmen - und abändern.

An der gewünschten Stelle den eigenen Twig-code/html einfügen.

Statt einen eigenen Block zu definieren und zu extenden (…zieht einen Rattenschwanz an Code-Änderungen nach sich…), an die passende Stelle “einfach” ein eigenes

einfügen - und ggf. mit css anders stylen.

Wenn Du eigene Texte aus dem Backend ausgeben möchtest, musst Du dafür Zusatzfelder (Einstellungen->System->Zusatzfelder) definieren, und dafür dann einem CustomField kreieren (Einstellungen->Shop->Texbausteine). Dann kannst Du sie einbinden.

Hier ein Bildschirmfoto von meiner header.html.twig und der Ordnerstruktur (die viel mehr enthält, als für die Veränderung notwendig…):

1672×857 157 KB

Und von Backend-CustomField und Zusatzfeld:

734×753 25.7 KB

1172×564 49.8 KB

1 „Gefällt mir“
6

Nicht vergessen: Dem Verkaufskanal danach auch dieses Theme zuweisen. Die Ordnerstruktur aus vendor/views, die dein Theme benutzt, unter custom wiederspiegeln.

Wenn ich die gesamte Ordnerstruktur übernehme, sollte ich es hinbekommen. Ich dachte aber genau das soll man nicht machen, sondern immer nur den Teil aus der Twig überschreiben oder ergänzen, den man abändern möchte?

Das mit dem Blöcke dazwischenschieben ist dann für mich auch klarer wenn ich die gesamte Struktur oder die ganze File zu custom übernehme, aber ist es korrekt? Ich möchte früher oder später gerne die Zertifizierungen als Shopware Designer, darum ist es mir wichtig, dass es korrekt ist.

lg

Wilo

7

Die Ordner_struktur_ musst Du abbilden (aber: mein Bildschirmfoto enthält weitere Dateien und andere Ordnerzweige, weil ich auch andere Dateien verändert habe. Für Dich ist nur die Struktur relevant, die zu header.html.twig führt).

Den Code in den Twig-Files musst Du nicht komplett kopieren, sondern kannst ihn auch extenden/ mit parent versehen.

Ja, den Code kopieren und einfach dazwischenschreiben bzw. auskommentieren ist die „Quick&Dirty“-Lösung - aber nicht die korrekte.

1 „Gefällt mir“
8

Hallo,

ok das verstehe ich und so würde ich es auch hinbekommen. 

Wie würde man es richtig machen?

Originaldatei von Shopware: development/ vendor /shopware/plattform/src/Storefront/Ressources/views/storefront/layout/header/
Datei: header.html.twig

MyTheme Verzeichnis: development/ custom /plugins/MyTheme/src/Resources/views/storefront/layoutZheader/ 
Datei noch leer: header.html.twig

Ziel: Ich möchte gerne neben dem Logo einen Block haben mit einem Icon . Dazu muss ich ja mit extend und parent den Block einfügen. Ich bekomme es aber nicht korrekt hin. Wichtig ist mir, dass ich nur den nötigen Code überehme, damit ich den weiteren Block einfügen kann und nicht alles übenrehmen muss.

Zwischen die Blöcke layout_header_logo und layout-header_search soll also ein weiterer Block (mein Block: layout-header_symbols). Was muss ich in meiner header.html.twig schreiben, damit das funktioniert?

Neuer Block der zwischen Logo und Suche soll also:

  {% block layout_header_symbols %} 
             

mein Inhalt

  {% endblock %}

lg
Wilo
            

Original von Shopware:

{% block layout_header %}
    {% block layout_top_bar %}
        {% sw_include '@Storefront/storefront/layout/header/top-bar.html.twig' %}
    {% endblock %}





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

            {% block layout_header_search %}
                
                    
                        
                        
                        
                            {% block layout_header_navigation_toggle_tablet %}
                                
                                
                                    {% block layout_header_navigation_toggle_tablet_button %}
                                        
                                                
                                            {% block layout_header_navigation_toggle_tablet_button_icon %}
                                                {% sw_icon 'stack' %}
                                            {% endblock %}
                                        
                                    {% endblock %}
                                    
                                
                            {% endblock %}
                            
                            
                            
                            
                        
                        
                        
                        
                            {% sw_include '@Storefront/storefront/layout/header/search.html.twig' %}
                        
                    
                
            {% endblock %}


            {% block layout_header_actions %}
                
                    
                    
                    
                    
                        {% block layout_header_navigation_toggle %}
                            
                                
                                                                
                                                                
                                
                                    {% block layout_header_navigation_toggle_button %}
                                        
                                                
                                                
                                            {% block layout_header_navigation_toggle_button_icon %}
                                                {% sw_icon 'stack' %}
                                            {% endblock %}
                                        
                                    {% endblock %}
                                
                            
                        {% endblock %}
                        
                        
                        

                        {% block layout_header_search_toggle %}
                            
                                
                                    
                                        {% sw_icon 'search' %}
                                    
                                
                            
                        {% endblock %}
                        
                        
                        
                        

                        {% block layout_header_actions_account %}
                            
                                
                                    {% sw_include '@Storefront/storefront/layout/header/actions/account-widget.html.twig' %}
                                
                            
                        {% endblock %}

                        {% block layout_header_actions_cart %}
                            
                                
                                    
                                        {% sw_include '@Storefront/storefront/layout/header/actions/cart-widget.html.twig' %}
                                    
                                
                            
                        {% endblock %}
                        
                        
                        
                        
                        
                    
                
            {% endblock %}
            
            
            
            
            
            
            
            
            
            
            
            
            
        
    {% endblock %}
    
    
    
    
    
    
{% endblock %}

 

Meine File bis jetzt:

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

 

 

 

9

Hallo, ich habe es leider noch immer nicht geschafft, einen Block zwischen zwei Blöckein einzufügen. Ich kann innerhalb eines Blocks am Anfang des Blocks oder am Ende des Blocks etwas einfügen, das bekomme ich hin. Aber wie füge ich einen neuen Block zwischen zwei Blöcken ein.

Geht das nciht oder ist nicht bekannt wie das geht? Hab schon keine Haare mehr Undecided

lg

Wilo

10

Hi Wilo,

der parent() Tag lässt sich tatsächlich nur verwenden, wenn du deine eigene Einfügung vor oder nach dem kompletten originalen Blockinhalt machen möchtest. Du kannst den Code aber trotzdem kurz halten. Im Falle deines Beispiels reicht der folgende Inhalt in der header.html.twig aus:

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

{% block layout_header_navigation %}
    
        {% block layout_header_logo %}
            {{ parent() }}
        {% endblock %}

        {% block layout_header_box %}
            Dein Inhalt
        {% endblock %}

        {% block layout_header_search %}
            {{ parent() }}
        {% endblock %}

        {% block layout_header_actions %}
            {{ parent() }}
        {% endblock %}
    
{% endblock %}

Viele Grüße
finsti

1 „Gefällt mir“
11

Wenn der Block nur unter bestimmten Bedingungen angezeigt werden soll, ist das hilfreich:

https://docs.shopware.com/en/shopware-platform-dev-en/how-to/indepth-guide-bundle

Konkret: https://docs.shopware.com/en/shopware-platform-dev-en/how-to/indepth-guide-bundle/storefront?category=shopware-platform-dev-en/how-to/indepth-guide-bundle

1 „Gefällt mir“
12

@FragenAnsForum schrieb:

Wenn der Block nur unter bestimmten Bedingungen angezeigt werden soll, ist das hilfreich:

https://docs.shopware.com/en/shopware-platform-dev-en/how-to/indepth-guide-bundle

Konkret: https://docs.shopware.com/en/shopware-platform-dev-en/how-to/indepth-guide-bundle/storefront?category=shopware-platform-dev-en/how-to/indepth-guide-bundle

LIeben Dank.

Wäre danach das hier nicht korrekt als if-Bedingung für einen Block?

Funktionieren tut es ja.

{% if controllerAction != ('home') %}

{% block xy %}
                    Inhalt
{% endblock %}

{% endif %}

lg

Wilo

 

13

Der Logik nach “ja”.

Aber ob es “best practice” ist, weiss ich nicht - als Entwickler bin ich noch nicht sonderlich erfahren…

Mglw. hilft auch: https://docs.shopware.com/en/shopware-platform-dev-en/developer-guide/administration/inheritance?category=shopware-platform-dev-en/developer-guide/administration

und https://docs.shopware.com/en/shopware-platform-dev-en/developer-guide/storefront/templates?category=shopware-platform-dev-en/developer-guide/storefront

14

Aus der index.html.twig

(aus https://docs.shopware.com/en/shopware-platform-dev-en/how-to/indepth-guide-bundle/storefront?category=shopware-platform-dev-en/how-to/indepth-guide-bundle. Das ganze Beispiel-Plugin ist in github; siehe Kapitel 10)

 {% sw\_extends '@Storefront/storefront/page/product-detail/index.html.twig' %} {# @var page \Shopware\Storefront\Page\Product\ProductPage #} {% block page\_product\_detail\_content %} {% if page.product.extension('bundles').elements|length \> 0 %} 
 {{ 'swag-bundle.detail.bundleBadge'|trans }} 
 {% endif %} {{ parent() }} {% endblock %}
15

@FragenAnsForum schrieb:

Aus der index.html.twig

(aus https://docs.shopware.com/en/shopware-platform-dev-en/how-to/indepth-guide-bundle/storefront?category=shopware-platform-dev-en/how-to/indepth-guide-bundle. Das ganze Beispiel-Plugin ist in github; siehe Kapitel 10)

{% sw_extends ‚@Storefront/storefront/page/product-detail/index.html.twig‘ %} {# @var page \Shopware\Storefront\Page\Product\ProductPage #} {% block page_product_detail_content %} {% if page.product.extension(‚bundles‘).elements|length > 0 %} {{ ‚swag-bundle.detail.bundleBadge‘|trans }} {% endif %} {{ parent() }} {% endblock %}

Vielen Dank FragenAnsFroum, ich muss offen sagen, ich verstehe deine Antworten nicht wirklich (in Bezug auf meine Fragen). Ich hatte in einem anderen Post eine Frage in zu einer konkreten if-Abfrage gepostet und hier in Bezug auf die Reihenfolge der Blöcke. Deine Beiträge bringen mich irgendwie nicht weiter, dazu weiss ich noch zu wenig. Aber trotzdem vielen Dank.

Wilo