Artikeldetail-Tabs als CollapsedPanel (Accordion) anstatt OffcanvasButton

Shopware 5 Themes & Design
1

Hallo zusammen,

ich möchte mein Artikelbeschreibung-Tab auf der Artikeldetailansicht auf mobilen Endgeräten (Viewport: XS/S) nicht per OffcanvasButton, sondern per Accordion also via “swCollapsePanel” realisieren.

Ich habe bereits versucht in der “jquery.shopware-responsive.js” folgendes zu ändern:

Auskommentieren von:
 

        .addPlugin('.tab-menu--product .tab--container', 'swOffcanvasButton', {
            titleSelector: '.tab--title',
            previewSelector: '.tab--preview',
            contentSelector: '.tab--content'
        }, ['xs'])

Hinzufügen von:

        .addPlugin('.tab-menu--product .tab--header', 'swCollapsePanel', {
            'contentSiblingSelector': '.tab--content'
        }, ['xs', 's'])

Leider funktioniert dieser Ansatz nicht. Die Artikelbeschreibung wird ohne OffcanvasButton komplett angezeigt, aber es ist kein Accordion-Funktion zu sehen.

Die Anweisung:

        .addPlugin('.tab-menu--cross-selling .tab--header', 'swCollapsePanel', {
            'contentSiblingSelector': '.tab--content'
        }, ['xs', 's'])

für die Cross-Selling-Artikel scheinen aber zu funktionieren?

Hat jmd von euch eine Idee?
 

2

Hat hierzu niemand eine Idee?

3

Hallo,

wie hast du denn in der jquery.shopware-responsive.js das auskommentiert und geändert? Dir ist aber schon bewusst, das man nie, wirklich nie, Änderungen in den Bare- und Responsive Theme - Dateien vornehmen darf, oder? Die Änderungen würden unter anderem bei jedem Update wieder komplett überschrieben.

Änderungen gehören immer in ein eigenes Theme, das im Bestfall vom Responsive Theme ableitet.

Grüße

Sebastian

4

@work schrieb:

Hallo zusammen,

ich möchte mein Artikelbeschreibung-Tab auf der Artikeldetailansicht auf mobilen Endgeräten (Viewport: XS/S) nicht per OffcanvasButton, sondern per Accordion also via „swCollapsePanel“ realisieren.

Ich habe bereits versucht in der „jquery.shopware-responsive.js“ folgendes zu ändern:

Auskommentieren von:
 

.addPlugin(‚.tab-menu–product .tab–container‘, ‚swOffcanvasButton‘, {
titleSelector: ‚.tab–title‘,
previewSelector: ‚.tab–preview‘,
contentSelector: ‚.tab–content‘
}, [‚xs‘])

Hinzufügen von:

.addPlugin(‚.tab-menu–product .tab–header‘, ‚swCollapsePanel‘, {
‚contentSiblingSelector‘: ‚.tab–content‘
}, [‚xs‘, ‚s‘])

Leider funktioniert dieser Ansatz nicht. Die Artikelbeschreibung wird ohne OffcanvasButton komplett angezeigt, aber es ist kein Accordion-Funktion zu sehen.

Die Anweisung:

.addPlugin(‚.tab-menu–cross-selling .tab–header‘, ‚swCollapsePanel‘, {
‚contentSiblingSelector‘: ‚.tab–content‘
}, [‚xs‘, ‚s‘])

für die Cross-Selling-Artikel scheinen aber zu funktionieren?

Hat jmd von euch eine Idee?
 

Prinzipiell ist das schon der richtige Gedanke. Ich würde jedoch ersteinmal eine passende Struktur in einer Datei  /themes/Frontend/DEIN_THEME/frontend/detail/tabs.tpl anlegen und dann in einer Javascript-Datei aus einem eigenen Theme das passende Plugin aktivieren. Z.B.:

window.StateManager

.addPlugin('.tab-menu--product-details .tab--header', 'swCollapsePanel', {

                'contentSiblingSelector': '.tab--content'

}, ['xs', 's', 'm','l','xl'])

Einen ausführlichen Lösungsansatz findest Du dazu hier: https://www.econcess.de/blog/14-onlineshop-erstellung/182-onlineshops-mit-shopware-akkordeon-statt-tab-fuer-artikelbeschreibung. Bei Fragen jederzeit melden!

5

Versuch mal

zu entfernen, so dass tab–header und tab–content direkt aufeinander folgen.