Shopware 6自定义页面：侧边栏过滤器复用失效问题排查

我来帮你排查这个问题，你现在遇到的核心问题是直接引入cms-block-sidebar-filter.html.twig模板，但没有提供它依赖的CMS Block和Slot数据，导致模板里的block.slots.getSlot('content')拿不到有效元素，最终渲染出空的div。

问题根源解析 #

Shopware的cms-block-sidebar-filter.html.twig是为CMS页面设计的，它依赖三个核心条件：

1. 一个完整的CmsBlockEntity实例，包含名为content的Slot
2. Slot里关联了product-listing-filter类型的CMS元素
3. 页面需要有产品列表上下文，过滤器才能生成对应的过滤选项

你之前直接引入模板，传递的block变量是$element（看起来是单个元素而非完整Block），自然无法满足模板的依赖要求。

解决方案：两种实现方式 #

方式一：利用Shopware CMS页面构建器（推荐） #

这是最符合Shopware架构的方式，无需手动编写大量底层代码：

• 登录Shopware后台，进入内容 > CMS页面，创建新页面并添加「侧边栏过滤器」区块，配置好需要的过滤条件（如价格、属性、品牌等）
• 在自定义控制器中加载该CMS页面，并关联产品列表上下文：

// 注入所需服务
private $cmsPageLoader;
private $productListingLoader;

public function __construct(
    // 其他依赖...
    CmsPageLoaderInterface $cmsPageLoader,
    ProductListingLoaderInterface $productListingLoader
) {
    $this->cmsPageLoader = $cmsPageLoader;
    $this->productListingLoader = $productListingLoader;
}

public function yourCustomAction(Request $request, SalesChannelContext $context)
{
    // 替换为你后台创建的CMS页面ID
    $cmsPageId = 'your-cms-page-uuid';
    $cmsPage = $this->cmsPageLoader->load([$cmsPageId], $context)->first();
    
    // 加载产品列表，过滤器依赖该数据生成选项
    $listing = $this->productListingLoader->load($request, $context);
    
    $page = $this->genericPageLoader->load($request, $context);
    $page->setCmsPage($cmsPage);
    $page->setListing($listing);

    return $this->renderStorefront('@DRGeolocation\storefront\index.html.twig', [
        'page' => $page,
        'range' => 15,
        'sellers'=>$sellers,
        'config' => $config['config']
    ]);
}

• 在index.html.twig中直接渲染CMS页面内容：

{% sw_extends '@Storefront/storefront/page/content/index.html.twig' %}

{% block page_content %}
    {{ parent() }}
    {% sw_include '@Storefront/storefront/page/content/detail.html.twig' %}
{% endblock %}

方式二：手动构建CMS Block和Element数据 #

如果需要完全自定义，不依赖后台CMS页面，可以手动构建所需的CMS结构：

• 在控制器中创建完整的Block、Slot和Element实例：

use Shopware\Core\Content\Cms\Aggregate\CmsBlock\CmsBlockEntity;
use Shopware\Core\Content\Cms\Aggregate\CmsSlot\CmsSlotEntity;
use Shopware\Core\Content\Cms\Aggregate\CmsSlot\CmsSlotTypes;
use Shopware\Core\Content\Cms\CmsElementEntity;
use Shopware\Core\Framework\Uuid\Uuid;

public function yourCustomAction(Request $request, SalesChannelContext $context)
{
    // 1. 创建产品过滤器元素，配置过滤选项
    $filterElement = new CmsElementEntity();
    $filterElement->setType('product-listing-filter');
    $filterElement->setConfig([
        'activeFilter' => [
            'price' => true,
            'properties' => true,
            'manufacturer' => true
        ],
        'showResetFilterButton' => true
    ]);

    // 2. 创建content Slot，关联过滤器元素
    $contentSlot = new CmsSlotEntity();
    $contentSlot->setId(Uuid::randomHex());
    $contentSlot->setType(CmsSlotTypes::ELEMENT);
    $contentSlot->setSlot('content');
    $contentSlot->setElement($filterElement);

    // 3. 创建侧边栏过滤器Block，添加content Slot
    $filterBlock = new CmsBlockEntity();
    $filterBlock->setId(Uuid::randomHex());
    $filterBlock->setType('sidebar-filter');
    $filterBlock->setSlots([$contentSlot]);

    // 4. 加载产品列表，过滤器依赖该数据
    $listing = $this->productListingLoader->load($request, $context);
    
    $page = $this->genericPageLoader->load($request, $context);
    $page->setListing($listing);

    return $this->renderStorefront('@DRGeolocation\storefront\index.html.twig', [
        'page' => $page,
        'range' => 15,
        'sellers'=>$sellers,
        'config' => $config['config'],
        'filterBlock' => $filterBlock // 传递正确的Block实例
    ]);
}

• 修改index.html.twig，将filterBlock传递给过滤器模板：

{% sw_extends '@Storefront/storefront/page/content/index.html.twig' %}

{% block page_content_blocks %}
    {# 其他自定义内容 #}
    {% sw_include ('@Storefront/storefront/block/cms-block-sidebar-filter.html.twig') with { block: filterBlock } %}
    {# 其他自定义内容 #}
{% endblock %}

关键注意事项 #

• 过滤器必须依赖产品列表上下文：确保页面中存在listing变量，否则过滤器无法获取产品数据生成过滤选项
• 不要直接传递单个元素给block变量：模板期望的是包含Slot的完整CmsBlockEntity实例
• 使用手动构建方式时，记得注入所需的服务（如ProductListingLoaderInterface）

内容的提问来源于stack exchange，提问作者Daniel Richter