Problem statement at our web agency: In a Shopware-based online shop, we want to set up an accordion for all viewports / screen widths that contains the product description in the product detail view. To do this, we can use the existing swCollapsePanel plugin, which Shopware already uses, for example, to display the cross-selling slider in the "s" and "xs" viewports via the StateManager (using the selector ".tab-menu--cross-selling .tab--header" for the header and ".tab--content" for the content). First, we take a look at the file
/themes/Frontend/YOUR_THEME/frontend/detail/tabs.tpl
or create it and use it to extend the existing file
/themes/Frontend/Bare/frontend/detail/tabs.tpl
with the statement
{extends file="parent:frontend/detail/tabs.tpl"}
We can then decide whether we need both display types (tabs for larger viewports, accordions for smaller ones). In this case, we decided to extend the existing block, which we implement as follows:
{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'])
This ensures that the accordion functionality is available in the selected viewports. Done. Seen at our web agency while creating an online shop with Shopware 5.5.6 Professional Edition.
