Shopware 6：如何将筛选器与排序栏置于同一层级？

我在Shopware 6的Storefront中，想把筛选器和排序栏相邻放置。已经通过布局编辑器把<sidebar-filter>移到商品列表顶部，但没法和排序栏对齐，同时需要实现筛选器的展开/折叠功能。目前已经写了相关Twig代码，请问怎么让筛选器和排序栏处于同一层级？

现有代码 #

1. src/custom/plugins/myTheme/src/Resources/views/storefront/component/product/listing.html.twig #

{% block element_product_listing_pagination_nav_actions %}
    <div class="cms-element-product-listing-actions row mb-4">
        <div class="col-12 d-flex justify-content-start">
            {% block element_product_listing_filter %}
                {% sw_include '@Storefront/storefront/block/cms-block-sidebar-filter.html.twig' %}
            {% endblock %}
        </div>
        <div class="col-12 d-flex justify-content-end">
            {% block element_product_listing_sorting %}
                {{ parent() }}
            {% endblock %}
        </div>
    </div>
{% endblock %}

2. src/custom/plugins/IabTheme/src/Resources/views/storefront/block/cms-block-sidebar-filter.html.twig #

{% sw_extends '@Storefront/storefront/block/cms-block-sidebar-filter.html.twig' %}

{% block block_sidebar_filter %}
    {% set element = block.slots.getSlot('content') %}
    {% set columns = 1 %}

    <div class="col-12 iab-block-sidebar-filter" data-cms-element-id="{{ element.id }}">
        <div class="font-weight-bold pb-475">
            <div class="iab-filter-wrapper">{{ 'general.filterSidebarHeadline'|trans|sw_sanitize|upper }}</div>
        </div>

        <div class="filter-inputs collapse">
            {% block block_sidebar_filter_inner %}
                {{ parent() }}
            {% endblock %}
        </div>
    </div>

    <script id="toggle-filters" type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            var clickableDiv = document.querySelector('.iab-filter-wrapper');
            var contentDiv = document.querySelector('.filter-inputs');

            clickableDiv.addEventListener('click', function() {
                contentDiv.classList.toggle('collapse');
            });
        });
    </script>
{% endblock %}

解决方案 #

1. 调整布局实现同级对齐 #

当前代码给筛选器和排序栏都用了col-12，导致两者各占整行无法并排。修改列布局分配，同时优化垂直对齐：

修改listing.html.twig：

{% block element_product_listing_pagination_nav_actions %}
    <div class="cms-element-product-listing-actions row mb-4 align-items-center">
        <div class="col-md-8 d-flex justify-content-start">
            {% block element_product_listing_filter %}
                {% sw_include '@Storefront/storefront/block/cms-block-sidebar-filter.html.twig' %}
            {% endblock %}
        </div>
        <div class="col-md-4 d-flex justify-content-end">
            {% block element_product_listing_sorting %}
                {{ parent() }}
            {% endblock %}
        </div>
    </div>
{% endblock %}

同时去掉筛选器容器里多余的col-12，避免嵌套列布局错乱：
修改cms-block-sidebar-filter.html.twig的核心代码：

{% block block_sidebar_filter %}
    {% set element = block.slots.getSlot('content') %}
    {% set columns = 1 %}

    <div class="iab-block-sidebar-filter" data-cms-element-id="{{ element.id }}">
        <div class="font-weight-bold pb-2">
            <div class="iab-filter-wrapper d-flex align-items-center cursor-pointer">
                {{ 'general.filterSidebarHeadline'|trans|sw_sanitize|upper }}
                <i class="ms-2 fa fa-chevron-down"></i>
            </div>
        </div>

        <div class="filter-inputs collapse">
            {% block block_sidebar_filter_inner %}
                {{ parent() }}
            {% endblock %}
        </div>
    </div>

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            // 按筛选器块上下文选择元素，避免多筛选器冲突
            const filterBlocks = document.querySelectorAll('.iab-block-sidebar-filter');
            
            filterBlocks.forEach(block => {
                const clickableDiv = block.querySelector('.iab-filter-wrapper');
                const contentDiv = block.querySelector('.filter-inputs');
                const icon = block.querySelector('.fa-chevron-down');

                clickableDiv.addEventListener('click', function() {
                    contentDiv.classList.toggle('collapse');
                    // 切换折叠图标方向
                    icon.classList.toggle('fa-chevron-down');
                    icon.classList.toggle('fa-chevron-up');
                });
            });
        });
    </script>
{% endblock %}

2. 折叠功能优化点 #

• 给iab-filter-wrapper加cursor-pointer，明确可点击提示
• 基于筛选器块上下文选择元素，解决多筛选器页面的控制冲突
• 添加折叠状态图标（需确保Storefront已引入Font Awesome，或替换为Shopware内置图标）
• 用标准Bootstrap间距类pb-2替代自定义类，提升兼容性

3. 响应式适配 #

上述col-md-8和col-md-4的设置，会在移动端自动切换为堆叠布局，适配小屏幕体验。

内容的提问来源于stack exchange，提问作者Mahmoud Abdelsattar