Additional Tabs in Produkt-Details

Shopware 6 (German)
1

Hallo,

ich habe ein Plugin gemacht, welches zusätzliche Tabs in den Produkt-Details anlegt:

{% sw_extends '@Storefront/storefront/page/product-detail/tabs.html.twig' %}

{% block page_product_detail_tabs_navigation_review %}

    <li class="nav-item">
        <a class="nav-link product-detail-tab-navigation-link"
           id="mein-tab"
           {{ dataBsToggleAttr }}="tab"
           data-offcanvas-tabs="true"
           href="#mein-tab-pane"
           role="tab"
           aria-controls="mein-tab-pane"
           aria-selected="true">

            {{ 'meinTabHeadline'|trans }}

            <span class="product-detail-tab-navigation-icon">
				{% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
			</span>
        </a>
    </li>

    {{ parent() }}
{% endblock %}

{% block page_product_detail_tabs_content_review %}

    <div class="tab-pane fade show"
         id="mein-tab-pane"
         role="tabpanel"
         aria-labelledby="mein-tab">

        {% sw_include '@Storefront/storefront/page/product-detail/meintab/meintab.html.twig' %}
    </div>

    {{ parent() }}
{% endblock %}

Im Demo-Shop (Standard, Version 6.4.20) läuft dass wie gewünscht. Der zusätzliche Tab wird eingeblendet, sobald das Plugin aktiv ist.

Im Produktiv-Shop (ebenfalls Version 6.4.20) werden diese Template-Änderungen einfach ignoriert. Es wurden alle anderen Plugins deaktiviert und das Shopware Standard-Theme aktiviert. Wenn ich Änderungen, z.B. im Footer reinbringe, werden diese korrekt angezeigt. Nur alle Änderungen bzgl. des Produktdetail-Register werden konsequent ignoriert. Woran könnte dass liegen?

2

Hast du schonmal ein cache:clear und ein theme:compile im Produktivshop ausgeführt?

3

Hast du das Theme als Plugin oder App gemacht?

4

Danke für die Hinweise. Es ist als Plugin realisiert.

Ich habe ein cache:clear auf dem Produktiv-Shop gemacht. Ein theme:compile nicht, da ich ja am Theme nichts geändert habe.

Der Twig-Code sollte eigentlich passen, nachdem was ich dazu gefunden habe. Es läuft ja auch im Demo-Shop. Irgendwie werden die Änderungen am Template nur im Produktiv-Shop ignoriert, obwohl dort kein einziges Plugin mehr aktiv ist und das SW Standard-Theme.

Wo könnte man da noch ansetzen?

5

Hallo,

eventuell im Produktivshop ein Produktseiten-Layout zugewiesen und im Demoshop nicht? Das sind nämlich zwei verschiedene Twig-Dateien, die man anpassen muss, wenn man beides berücksichtigen möchte.

Grüße
Sebastian

6

Hallo @sschreier,

genau, dass ist der Grund. Es ist im Produktiv-Shop ein anderes Produktseiten-Layout zugewiesen.

Spannend ist, dass es auch nach Zuweisung des Standard-Layouts nicht funktioniert. Man muss die Layout-Zuweisung mittels des Löschbuttons komplett entfernen. Dann funktioniert es. Muss man auch erstmal draufkommen :thinking:.

Kannst Du mir auch noch einen Hinweis geben, was ich im Plugin anpassen muss, damit es auch mit anderen Produktseiten-Layouts funktioniert.

Viele Grüße, Frank

7

… ah okay, ich sehe gerade worauf es hinausläuft:

{% sw_extends '@Storefront/storefront/element/cms-element-product-description-reviews.html.twig' %}

{% block element_product_desciption_reviews_tabs_navigation_review %}
    ...
    {{ parent() }}
{% endblock %}

{% block element_product_desciption_reviews_tabs_content_review %}
    ...
    {{ parent() }}
{% endblock %}

Muss da exakt der gleiche Code rein, wie in /page/product-detail/tabs.html.twig oder muss man da noch etwas beachten.

Danke und viele Grüße, Frank

1 „Gefällt mir“
8

Zusatzfrage: was ist zu beachten, damit ein zusätzlicher Tab in Shopware 6.5+ auch im mobile View angezeigt wird? offcanvas="true" allein scheint nicht zu genügen, und das Tutorial zu " Creating a new tab on the product detail page" im Advanced Developer Training der Shopware Academy geht darauf konkret auch nicht ein.

Mit offcanvas="false" wird der Tab-Inhalt leider auch nicht angezeigt, weil der ganze .product-detail-tabs-content Container mobil auf display:none gesetzt ist. Wenn ich den Style überschreibe, dann wird mein Content erwartungsgemäß eingeblendet, aber dann sind leider die eingebauten Tab-Inhalte doppelt, bei denen Offcanvas funktioniert.

Aus den bisherigen Beschreibungen, Dokumentation und Forenbeiträgen hatte ich zunächst schlussgefolgert, dass auch Custom Tab Content bei Bedarf automatisch ins Offcanvas übernommen wird (vgl. off canvas - doppelter content), was aber bei mir leider nicht der Fall ist, wenn ich die Produktdetails in der Storefront um einen zusätzlichen Reiter erweitere.

In der Antwort auf die Frage, wie man einen Offcanvas-Bereich umsetzt heißt es relativ unkonkret,

Du musst in den Templates einen zusätzlichen offcanvas hinzufügen. Schau dir einfach an, wie das HTML-Gerüst von cart ist und baue es nach. Orientiere dich aber ggf. besser an der mobilen Navigation.

Aber die eingebauten Tabs (Produktbeschreibung und Reviews) haben diesen Code gar nicht in Twig stehen, sondern das scheint per JavaScript (Bootstrap-Offcanvas) dynamisch erstellt zu werden?
Im DOM sehe ich allerdings ein <div class="offcanvas-body"> als Wrapper von <div class="product-detail-review tab-pane-container">".
Sollte dieses Markup bei Custom Tabs explizit selbst erzeugt werden?
Sollte ich gar die views/storefront/utilities/offcanvas.html.twig erweitern, obwohl sie nach einem allgemeingültigen Template ausschaut?

Es wäre allgemein hilfreich, mobile Views ausführlicher zu dokumentieren, wenn responsives Webdesign nicht ausreicht. Wie ist die aktuelle Best Practice und wo ist sie dokumentiert?

9

Hier mein konkreter Template-Code.

Das komplette Plugin ist bei Bedarf auf GitHub zu sehen (Work in Progress, aber funktioniert soweit mit aktueller Shopware 6.5.8.2 im lokalen Dockware-Container). Update: mit 6.5.8.6 verhält sich alles ebenso wie beschrieben.

Hier zunächst das erweiterte Tabs-Template…
custom/plugins/IngoSCostTransparency/src/Resources/views/storefront/page/product-detail/tabs.html.twig

{% sw_extends '@Storefront/storefront/page/product-detail/tabs.html.twig' %}

{% block page_product_detail_tabs_navigation_description %}
    {{  parent() }}
    {% if config('IngoSCostTransparency.config.showOnProductDetailPage') %}
        <li class="nav-item">
            <a
                class="nav-link product-detail-tab-navigation-link"
                id="ingos-cost-transparency-tab"
                data-bs-toggle="tab"
                data-off-canvas-tabs="true"
                href="#ingos-cost-transparency-tab-pane"
                role="tab"
                aria-controls="ingos-cost-transparency-tab-pane"
                aria-selected="false"
            >
                <span>{{ 'ingos.costTransparency.costTransparency' | trans }}</span>
                <span class="product-detail-tab-navigation-icon">
                    {% sw_icon 'arrow-medium-right' style {pack:'solid'} %}
                </span>
            </a>
        </li>
    {% endif %}
{% endblock %}

{% block page_product_detail_tabs_content_description %}
    {{  parent() }}
    {% if config('IngoSCostTransparency.config.showOnProductDetailPage') %}
        {% sw_include '@IngoSCostTransparency/storefront/page/product-detail/ingos-cost-transparency-tab.html.twig' %}
    {% endif %}
{% endblock %}

… und das dort inkludierte Twig-Fragment bzw. dessen Anfang:

custom/plugins/IngoSCostTransparency/src/Resources/views/storefront/page/product-detail/ingos-cost-transparency-tab.html.twig

<div
    class="tab-pane fade show"
    id="ingos-cost-transparency-tab-pane"
    role="tabpanel"
    aria-labelledby="ingos-cost-transparency-tab"
>
    <!-- TODO: should we add offcanvas markup here? -->

    <h3>{{ 'ingos.costTransparency.costTransparency' | trans }}</h3>

    <div class="ingos-cost">
        <!-- more content ... -->
1 „Gefällt mir“
10

Die Lösung schien simpel, aber leicht zu übersehen. Laut aktueller Doku soll das Attribut data-off-canvas-tabs="true" statt des deprecated data-offcanvas-tabs="true" verwendet werden (beachte den feinen Unterschied des einzelnen Bindestriches). Der „alte“ Core (6.5) prüft nur auf das alte, der neue (Shopware 6.6) nur auf das neue Attribut. Eine maximal abwärtskompatible Lösung müsste daher folgendermaßen aussehen:

<a
    class="nav-link product-detail-tab-navigation-link"
    data-bs-toggle="tab"
    data-off-canvas-tabs="true" {# new attribute name #}
    data-offcanvas-tabs="true" {# deprecated attribute name for backward compatibility #}

Update Ende März 2024: nachdem nun Shopware 6.6 offiziell released wurde, habe ich meinen Testshop aktualisiert, und siehe da: das Plugin funktioniert nicht, Tabs werden nicht angezeigt. Vermutung: es gibt noch weitere nötige Änderungen. Aber wer weiß das schon?

Bei der Suche nach weiteren Breaking Changes fand ich übrigens in der tabs.html.twig einen weiteren Deprecation-Hinweis für 6.7.0.: {# @deprecated tag:v6.7.0 - File will be removed as it is no longer loaded by default. #} mit dem Hinweis, das künftig stattdessen cms-element-product-description-reviews.html.twig zu verwenden ist.

Zusätzliche Herausforderung: falls wir mit JavaScript Event Handler setzen, müssen diese nicht nur im originalen DOM-Fragment funktionieren, sondern auch in der Version, die Shopware scheinbar per JavaScript im Off-Canvas rendert, vgl. offCanvas js events (seit 2020 unbeantwortete Frage) oder besser Im eigenen Plugin Events anderer Plugins empfangen, ebenfalls von 2020 aber vielleicht immer noch hilfreich.

Nach Off-Canvas-Rendering können wir nicht mehr davon ausgehen, dass es unsere Elemente jeweils nur einmal git. Somit verbietet es sich, mit document.getElementById oder analogen Selektoren zu arbeiten. Also arbeiten wir entweder über die Plugin-Instanz oder iterieren über alles passende, was wir mit getElementsByClassName finden?

P.S. Ein Fehler ist aufgetreten: Es sind nicht mehr als 3 aufeinanderfolgende Antworten erlaubt. Bitte bearbeite stattdessen deine letzte Antwort oder warte, bis dir jemand antwortet.

1 „Gefällt mir“