Problemstellung in unserer Internetagentur: In einem Onlineshop auf Shopware-Basis möchten wir für alle Viewports / Bildschirmbreiten ein Akkordeon einrichten, dass die Artikelbeschreibung in der Produktdetailansicht enthält. Hierzu kann man das bereits vorhandene Plugin swCollapsePanel, welches Shopware beispielsweise schon für die Darstellung des Crossselling-Sliders in den Viewports "s" und "xs" via StateManager verwendet (hier die Selectoren ".tab-menu--cross-selling .tab--header" für den Header und ".tab--content" für den Inhalt. Zuerst schauen wir uns die Datei
/themes/Frontend/DEIN_THEME/frontend/detail/tabs.tpl
an bzw. erstellen diese und erweitern damit die bereits vorhandene Datei
/themes/Frontend/Bare/frontend/detail/tabs.tpl
mit der Anweisung
{extends file="parent:frontend/detail/tabs.tpl"}
Dann können wir entscheiden, ob wir beide Darstellung brauchen (Tabs für große Viewports, Akkordeons für kleine). Wir haben uns hier für eine Erweiterung des vorhandenen Blocks entschieden, die wir so umsetzen:
{block name="frontend_detail_tabs"}
<div class="tab-menu--product-details">
<div class="tab--container-list">
<div class="tab--container" data-tab-id="description">
<div class="tab--header {if $descriptionCollapsed eq 1} is--active {/if}">
<a href="#" class="tab--title" title="{s name='DetailTabsDescription' namespace='frontend/detail/tabs'}{/s}">
{s name='DetailTabsDescription' namespace='frontend/detail/tabs'}{/s}
</a>
</div>
<div class="tab--content">
{include file="frontend/detail/tabs/description.tpl"}
</div>
</div>
<div class="tab--container" data-tab-id="rating">
<div class="tab--header">
<a href="#" class="tab--title" title="{s name='DetailTabsRating'}{/s}">{s name='DetailTabsRating'}{/s}</a>
<span class="product--rating-count">{$sArticle.sVoteAverage.count}</span>
</div>
<div id="tab--product-comment" class="tab--content">
{include file="frontend/detail/tabs/comment.tpl"}
</div>
</div>
</div>
</div>
{$smarty.block.parent}
{/block}
Sind die Strukturen hiermit vorbereitet, müssen wir noch im StateManager das Plugin für die gewünschten Viewports aktivieren. Wir haben das in einer bereits vorhandenen, also über die Theme.php eingebundenen Datei gemacht, in der wir nur diese Anweisungen ergänzen müssen (siehe z.B. https://www.econcess.de/blog/14-onlineshop-erstellung/181-shopware-onlineshop-breakpoints-anpassen):
window.StateManager
.addPlugin('.tab-menu--product-details .tab--header', 'swCollapsePanel', {
'contentSiblingSelector': '.tab--content'
}, ['xs', 's', 'm','l','xl'])
Damit wird die Akkordeon-Funktionalität in den gewählten Viewports gewährleistet. Fertig. Gesehen in unserer Webagentur bei einer Onlineshop Erstellung mit Shopware 5.5.6 Professional Edition.
