Shopware 6.5移动端自定义商品详情标签页无法显示问题

核心问题分析 #

自定义标签在移动端失效，根源是两个关键不符合Shopware内置逻辑的点：

• data属性拼写错误：你使用了data-off-canvas-tabs，但Shopware移动端标签逻辑识别的是data-offcanvas-tabs（无连字符格式）
• 缺少标准offcanvas结构：自定义标签内容没有按Shopware要求包裹.offcanvas-header和.offcanvas-body容器，导致JS无法触发弹窗逻辑

修复步骤 #

1. 修正标签导航的data属性 #

将导航链接里的data-off-canvas-tabs="true"改为data-offcanvas-tabs="true"，和官方标签保持一致：

{% 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-offcanvas-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>
{% endblock %}

2. 给自定义标签内容添加offcanvas结构 #

Shopware移动端标签内容必须包含标准的offcanvas容器结构，JS才会识别并触发弹窗。修改你的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"
>
    <div class="offcanvas-header">
        <button class="btn btn-light offcanvas-close js-offcanvas-close">
            <span class="icon icon-x icon-sm">
                {% sw_icon 'x' style {pack:'default'} %}
            </span>
            {{ 'general.close' | trans }}
        </button>
    </div>

    <div class="offcanvas-body">
        <div class="tab-pane-container">
            <h3>Cost Transparency</h3>
            <!-- 你的自定义内容 -->
        </div>
    </div>
</div>

3. 验证基础逻辑 #

• 确保没有自定义CSS强制修改.product-detail-tabs-content的移动端默认显示规则
• 检查插件是否引入了干扰Shopware原生ProductDetailTabsPlugin逻辑的自定义JS

逻辑说明 #

当data-offcanvas-tabs="true"时，Shopware移动端JS会执行以下操作：

1. 隐藏默认的.product-detail-tabs-content（这就是你看到display: none的原因）
2. 将对应标签的内容加载到全局offcanvas容器中弹窗显示
   如果结构或属性不符合要求，这个逻辑会直接失效，导致内容无法正常展示。

内容的提问来源于stack exchange，提问作者Ingo Steinke