Shopware 6：如何在OffCanvas菜单组件中添加自定义菜单？

要实现这个需求，你可以通过主题模板重写或者插件扩展的方式来完成，下面是两种方式的详细步骤，优先推荐主题方式（更轻量，适合单主题场景）：

一、主题自定义方式（推荐） #

Shopware 6允许主题重写核心模板，你只需要在自己的主题里创建对应的模板文件，覆盖默认的OffCanvas菜单模板即可。

步骤1：创建主题模板路径 #

在你的主题目录下（通常是custom/theme/YourTheme/src/Resources/views/storefront/layout/navigation/offcanvas/），创建navigation-offcanvas.html.twig文件。

步骤2：重写模板并添加自定义菜单 #

复制Shopware核心的navigation-offcanvas.html.twig内容（你可以在vendor/shopware/storefront/Resources/views/storefront/layout/navigation/offcanvas/找到原文件），然后在分类菜单块之后添加你的自定义菜单。

以下是关键修改部分的代码示例：

{% block layout_navigation_offcanvas_content %}
    {# 原有的分类菜单块 #}
    {% block layout_navigation_offcanvas_categories %}
        {% sw_include '@Storefront/storefront/layout/navigation/offcanvas/navigation-offcanvas-categories.html.twig' %}
    {% endblock %}

    {# 新增：Profile 菜单 #}
    {% block layout_navigation_offcanvas_profile %}
        <div class="navigation-offcanvas-divider"></div>
        <div class="navigation-offcanvas-menu-item">
            {% if context.customer %}
                <a href="{{ path('frontend.account.home') }}" class="navigation-offcanvas-link">
                    <sw-icon name="user" class="navigation-offcanvas-icon"></sw-icon>
                    {{ 'account.myAccount'|trans }} ({{ context.customer.firstName }})
                </a>
                <a href="{{ path('frontend.account.logout') }}" class="navigation-offcanvas-link mt-2">
                    <sw-icon name="exit" class="navigation-offcanvas-icon"></sw-icon>
                    {{ 'account.logout'|trans }}
                </a>
            {% else %}
                <a href="{{ path('frontend.account.login') }}" class="navigation-offcanvas-link">
                    <sw-icon name="user" class="navigation-offcanvas-icon"></sw-icon>
                    {{ 'account.loginRegister'|trans }}
                </a>
            {% endif %}
        </div>
    {% endblock %}

    {# 新增：语言切换菜单 #}
    {% block layout_navigation_offcanvas_language_switch %}
        <div class="navigation-offcanvas-divider"></div>
        <div class="navigation-offcanvas-menu-item">
            <sw-icon name="globe" class="navigation-offcanvas-icon"></sw-icon>
            {{ 'header.language'|trans }}
            <div class="navigation-offcanvas-dropdown">
                {% for language in page.header.languages %}
                    <a href="{{ path('frontend.change.language', {'languageId': language.id}) }}"
                       class="navigation-offcanvas-dropdown-item{% if language.id == context.languageId %} active{% endif %}">
                        {{ language.name }}
                    </a>
                {% endfor %}
            </div>
        </div>
    {% endblock %}
{% endblock %}

步骤3：适配样式（可选） #

如果默认样式不符合你的需求，可以在主题的app.scss里添加自定义样式，比如调整菜单间距、图标大小等：

.navigation-offcanvas-divider {
    margin: 1rem 0;
    border-top: 1px solid #eaeaea;
}

.navigation-offcanvas-dropdown {
    margin-top: 0.5rem;
    padding-left: 2rem;
}

.navigation-offcanvas-dropdown-item.active {
    font-weight: 600;
    color: $sw-color-primary;
}

步骤4：激活主题并测试 #

在Shopware后台的主题管理里激活你的主题，然后刷新前端页面，打开OffCanvas菜单就能看到新增的Profile和语言切换菜单了。

二、插件扩展方式（适合多主题复用） #

如果你需要在多个主题里复用这个功能，可以创建一个Shopware插件，通过插件来重写模板：

步骤1：创建基础插件 #

按照Shopware 6的插件开发规范创建一个新插件，比如命名为CustomOffCanvasMenu。

步骤2：添加模板重写 #

在插件目录下创建src/Resources/views/storefront/layout/navigation/offcanvas/navigation-offcanvas.html.twig，内容和上面主题方式的模板代码一致。

步骤3：安装并激活插件 #

在Shopware后台安装并激活你的插件，同样刷新前端页面即可看到效果。

关键说明 #

• 模板重写时，尽量使用{% block %}来扩展，而不是直接替换整个模板，这样可以保留Shopware核心的更新兼容性。
• 语言切换部分的代码复用了Shopware的page.header.languages数据，确保和系统语言设置保持一致。
• Profile菜单会根据用户登录状态动态显示不同内容，符合Shopware的上下文逻辑。

内容的提问来源于stack exchange，提问作者Bharati Wagh