Shopware顶部栏语言选择改造：将下拉改为并排按钮

直接替换原有的layout_header_actions_language_widget代码即可，核心是移除下拉组件，将每个语言转为横向排列的按钮式选项，保留原有的表单提交逻辑和跳转参数：

{% block layout_header_actions_language_widget%}
    {% if position is empty %}
        {% set position = 'top-bar' %}
    {% endif %}

    {% if  page.header.languages.count > 1 %}
        <div class="top-bar-nav-item top-bar-language">
            {% block layout_header_actions_language_widget_form %}
                <form method="post"
                      action="{{ path('frontend.checkout.switch-language') }}"
                      class="language-form d-flex gap-2 align-items-center"
                      data-form-auto-submit="true">

                    {% block layout_header_actions_language_widget_form_csrf %}
                        {{ sw_csrf('frontend.checkout.switch-language') }}
                    {% endblock %}

                    {% block layout_header_actions_language_widget_content %}
                        {% for language in  page.header.languages %}
                            {% set isoCode = language.translationCode.code|lower|split('-') %}
                            {% set flagCountry = isoCode[0] %}
                            {% set flagLanguage = isoCode[1] %}

                            <label class="top-bar-language-btn{% if language.id is same as(page.header.activeLanguage.id) %} active{% endif %}"
                                   for="{{ position }}-{{ language.id }}">
                                <input id="{{ position }}-{{ language.id }}"
                                       class="d-none"
                                       value="{{ language.id }}"
                                       name="languageId"
                                       type="radio"
                                    {% if language.id is same as(page.header.activeLanguage.id) %} checked{% endif %}>
                                <div class="top-bar-list-icon language-flag country-{{ flagCountry }} language-{{ flagLanguage }}"></div>
                                <span class="top-bar-nav-text">{{ language.name }}</span>
                            </label>
                            {% if not loop.last %}
                                <span class="language-separator">|</span>
                            {% endif %}
                        {% endfor %}

                        <input name="redirectTo" type="hidden" value="{{ app.request.get('_route') }}"/>

                        {% for key, value in app.request.attributes.get('_route_params') %}
                            <input name="redirectParameters[{{ key }}]" type="hidden" value="{{ value }}">
                        {% endfor %}
                    {% endblock %}
                </form>
            {% endblock %}
        </div>
    {% endif %}
{% endblock %}

修改要点： #

• 移除所有下拉菜单相关DOM（dropdown容器、切换按钮、下拉列表）
• 遍历语言时直接渲染每个选项，用label模拟按钮样式，隐藏原生radio输入框
• 添加语言间的|分隔符，通过loop.last控制仅在非最后一项显示
• 给表单添加d-flex gap-2 align-items-center类（Bootstrap布局类）实现横向排列，可根据项目样式自行调整
• 给当前激活的语言按钮添加active类，方便做样式区分

可选样式优化： #

如果需要更贴近按钮的视觉效果，可添加自定义CSS：

.top-bar-language-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.top-bar-language-btn.active {
    background-color: #f0f0f0;
    font-weight: 600;
}

.language-separator {
    color: #ccc;
    margin: 0 0.25rem;
}

内容的提问来源于stack exchange，提问作者pim krook