I have added a custom tab to product details programmatically using a Shopware 6 plugin that works as expected on desktop browsers. But on mobile screens, when clicking on the tab title ("cost transparency"), the tab content is rendered neither in the "off-canvas" section (as the built-in tabs do on mobile) nor below the tab head.
When I override the parent container's visibility by setting .product-detail-tabs-content { display: block, the custom tab becomes visible, which proves that it has been rendered, but .product-detail-tabs-contentis set todisplay: none` on mobile. The problem can be reproduced on mobile devices or in desktop browsers using mobile emulation or a viewport width smaller than 576 pixels.
My plugin extends the tabs.html.twig view and adds a new .nav-item tab title element in the block page_product_detail_tabs_navigation_description and a new tab content element in the block page_product_detail_tabs_content_description. Relevant code snippets:
{% block page_product_detail_tabs_navigation_description %}
{{ parent() }}
<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>
{% 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' %}
<div
class="tab-pane fade show"
id="ingos-cost-transparency-tab-pane"
role="tabpanel"
aria-labelledby="ingos-cost-transparency-tab"
>
Generated HTML:
Tab titles:
<div class="product-detail-tabs">
<div class="card card-tabs">
<div class="card-header product-detail-tab-navigation">
<ul class="nav nav-tabs product-detail-tab-navigation-list" id="product-detail-tabs" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link product-detail-tab-navigation-link" id="description-tab" data-bs-toggle="tab" data-offcanvas-tabs="true" href="#description-tab-pane" role="tab" aria-controls="description-tab-pane" aria-selected="false" tabindex="-1">
<span>Description</span>
<span class="product-detail-tab-navigation-icon">
<span class="icon icon-arrow-medium-right">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><defs><path id="icons-solid-arrow-medium-right" d="M4.7071 5.2929c-.3905-.3905-1.0237-.3905-1.4142 0-.3905.3905-.3905 1.0237 0 1.4142l4 4c.3905.3905 1.0237.3905 1.4142 0l4-4c.3905-.3905.3905-1.0237 0-1.4142-.3905-.3905-1.0237-.3905-1.4142 0L8 8.5858l-3.2929-3.293z"></path></defs><use transform="rotate(-90 8 8)" xlink:href="#icons-solid-arrow-medium-right" fill="#758CA3" fill-rule="evenodd"></use></svg>
</span> </span>
<span class="product-detail-tab-preview">
Some people asked me where I got this "developers for future" T-shirt. Well, I designed an SVG file and went to a local prin…
<span class="product-detail-tab-preview-more">More</span>
</span>
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link product-detail-tab-navigation-link active" 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="true">
<span>Cost Transparency</span>
<span class="product-detail-tab-navigation-icon">
<span class="icon icon-arrow-medium-right">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><use transform="rotate(-90 8 8)" xlink:href="#icons-solid-arrow-medium-right" fill="#758CA3" fill-rule="evenodd"></use></svg>
</span> </span>
</a>
</li>
Tab content:
<div class="product-detail-tabs-content card-body">
<div class="tab-content">
<div class="tab-pane fade" id="description-tab-pane" role="tabpanel" aria-labelledby="description-tab">
<div class="offcanvas-header">
<button class="btn btn-light offcanvas-close js-offcanvas-close">
<span class="icon icon-x icon-sm">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icons-default-x" fill="#758CA3" fill-rule="evenodd"></use></svg>
</span>
Close menu
</button>
</div>
<div class="offcanvas-body">
<div class="product-detail-description tab-pane-container">
<div class="h3 product-detail-description-title">
Product information "Developers for Future Strike T-Shirt"
</div>
<div class="product-detail-description-text" itemprop="description">
Some people asked me where I got this "developers for future" T-shirt. Well, I designed an SVG file and went to a local print shop. But if you want your own shirt, you can order one that will be printed on demand. If you really want the t-shirt, please contact me to select cut and material as well. Without specific data, the price is very high on purpose. <span style="color:rgb(82,102,122);font-family:'Inter var', '-apple-system', blinkmacsystemfont, 'San Francisco', 'Segoe UI', roboto, 'Helvetica Neue', sans-serif;font-size:16px;font-style:normal;font-weight:400;letter-spacing:normal;text-indent:0px;text-transform:none;word-spacing:0px;white-space:normal;background-color:rgb(255,255,255);text-decoration-thickness:initial;text-decoration-style:initial;float:none;">The cost transparency data is just an estimation as well. </span>Remember, this is currently just a demo shop!<div><br></div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade active show" id="ingos-cost-transparency-tab-pane" role="tabpanel" aria-labelledby="ingos-cost-transparency-tab">
<h3>Cost Transparency</h3>
...
Researching the official tutorial and a forum discussion where someone does not want their custom tab content rendered off-canvas I conclude that custom tab content should get rendered in the off-canvas area automatically when the offcanvas property is set to true. Setting offcanvas to false does not make the tab appear either.
Is there any additional requirement to make that happen?
The solution is simple, but hard to spot: while the recent documentation advises to use the attribute data-off-canvas-tabs="true" instead of the deprecated data-offcanvas-tabs="true" (not the subtle difference of an additional hyphen character), older versions, including what seemed to be the latest stable Shopware 6.4 subversion, only use the deprecated version, while the new core code only uses the newer version. To ensure maximum compatibility, use both, i.e.
<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 #}