Shopware 6自定义插件页面如何加载购物体验自定义布局？

一、在控制器中加载购物体验布局 #

在自定义插件的控制器中注入SalesChannelCmsPageLoader服务，通过布局的UUID或别名加载对应的CMS页面数据，同时传递自定义实体列表数据到视图：

use Shopware\Core\Content\Cms\SalesChannel\SalesChannelCmsPageLoader;
use Shopware\Core\System\SalesChannel\SalesChannelContext;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;

class CertificateController extends AbstractController
{
    private SalesChannelCmsPageLoader $cmsPageLoader;

    public function __construct(SalesChannelCmsPageLoader $cmsPageLoader)
    {
        $this->cmsPageLoader = $cmsPageLoader;
    }

    public function index(Request $request, SalesChannelContext $context)
    {
        // 替换为你在后台创建的购物体验布局的UUID
        $targetCmsPageId = 'your-cms-page-uuid';
        
        // 加载CMS页面数据
        $cmsPage = $this->cmsPageLoader->load(
            $request,
            $context,
            $targetCmsPageId
        );

        // 查询自定义实体列表（替换为你的实际业务逻辑）
        $customEntities = $this->getDoctrine()
            ->getRepository(YourCustomEntity::class)
            ->findAll();

        return $this->render('@YourPlugin/certificate.html.twig', [
            'customEntities' => $customEntities,
            'cmsPage' => $cmsPage
        ]);
    }
}

如果想用别名加载布局（无需记忆UUID，更易维护），修改load方法参数即可：

$cmsPage = $this->cmsPageLoader->load(
    $request,
    $context,
    null,
    ['identifier' => 'your-cms-page-alias'] // 对应后台设置的布局别名
);

二、在Twig模板中渲染CMS布局内容 #

在certificate.html.twig中，先渲染自定义实体列表，再通过Shopware内置的sw_cms_page函数渲染后台编辑的CMS布局内容：

{# 渲染自定义实体列表 #}
<section class="custom-entity-list">
    {% for entity in customEntities %}
        <div class="entity-item">
            <h3>{{ entity.title }}</h3>
            <p>{{ entity.description }}</p>
        </div>
    {% endfor %}
</section>

{# 渲染后台编辑的CMS布局内容 #}
{% if cmsPage %}
    <section class="cms-editable-content">
        {{ sw_cms_page(cmsPage) }}
    </section>
{% endif %}

三、替代方案：自定义可编辑内容实体 #

如果不需要完整的购物体验布局功能，可在插件中创建简单的自定义实体（比如CertificateEditableContent），包含htmlContent字段，后台添加对应的CRUD管理页面。控制器查询该实体内容后直接传递到Twig渲染：

{# 直接渲染自定义实体存储的HTML内容 #}
<section class="editable-content">
    {{ editableContent.htmlContent|raw }}
</section>

这种方式更轻量化，适合仅需编辑静态HTML的场景。

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