Shopware 5.7.6 如何将店铺商品添加至首页展示

方法1：调整内置商品滑块配置（无需二次开发，操作最简单） #

• 进入Shopware后台，依次打开「内容」-「购物世界」，找到首页对应的购物世界页面进入编辑状态
• 从右侧元素库拖拽「商品滑块」组件到你需要展示商品的页面位置
• 点击组件打开配置面板：
  • 「商品源」项支持选择分类、自定义商品集、手动勾选单个商品，要展示全店商品直接选择根分类即可
  • 「每页显示商品数」项填写你需要的展示数量，要全部展示直接填写大于等于你商品总数的数值即可（比如填999）
  • 依次关闭「自动轮播」「显示分页导航」「显示左右箭头」三个开关
• 保存购物世界配置后清除缓存，前端首页就会直接平铺展示所有你指定的商品，不会出现滑块滑动效果

方法2：创建自定义购物世界商品列表元素（需轻度开发，灵活性更高） #

如果需要额外的布局、排序、筛选等自定义功能，可以开发专属的购物世界元素：

1. 新建自定义插件 #

在站点custom/plugins/目录下创建自定义插件（例如命名为CustomProductListing），按照Shopware 5插件规范编写基础配置文件，进入后台安装并激活插件。

2. 注册自定义购物世界元素 #

在插件目录下新建Resources/views/backend/swag_extension/elements/product-listing.json配置文件，核心配置参考如下：

{
  "name": "custom-product-listing",
  "label": "自定义商品列表",
  "component": "swag-element-product-listing",
  "configComponent": "swag-element-product-listing-config",
  "previewMedia": "path/to/preview.png",
  "config": {
    "productSource": {
      "type": "product-selection",
      "label": "选择商品源",
      "required": true
    },
    "showCount": {
      "type": "number",
      "label": "展示商品数量",
      "default": 24
    },
    "sortRule": {
      "type": "select",
      "label": "商品排序规则",
      "options": [
        {"value": "name ASC", "label": "名称正序"},
        {"value": "price DESC", "label": "价格倒序"},
        {"value": "releaseDate DESC", "label": "最新上架优先"}
      ],
      "default": "releaseDate DESC"
    }
  }
}

3. 编写前端渲染模板 #

在插件目录下新建Resources/views/frontend/shopping_world/elements/custom-product-listing.html.twig模板文件，参考代码如下：

{% sw_extends '@ShopwareFrontend/frontend/shopping_world/element/base.html.twig' %}

{% block element_content %}
    {# 加载指定数量和排序规则的商品 #}
    {% set products = element.config.productSource.getProducts(element.config.showCount, element.config.sortRule) %}
    
    <div class="custom-product-listing row">
        {% for product in products %}
            {# 复用Shopware内置的商品卡片模板 #}
            <div class="col-md-3 col-sm-6 col-xs-12">
                {% sw_include '@ShopwareFrontend/frontend/listing/product-box/product-box-base.html.twig' with {
                    product: product,
                    boxLayout: 'standard'
                } %}
            </div>
        {% endfor %}
    </div>
{% endblock %}

• 完成上述操作后清除Shopware全量缓存，重新进入购物世界编辑页面，就能在元素库看到新增的「自定义商品列表」组件，拖拽使用即可自由配置商品源、展示数量和排序规则。

内容的提问来源于stack exchange，提问作者Alihan Şişman