Shopware 6.6：按设备设置商品详情页关联商品滑块显示数量

问题背景 #

• 仅能在后台设置关联商品滑块的最大显示商品数，无法针对桌面/移动端分别配置不同的展示数量
• 关联商品模板src/Storefront/Resources/views/storefront/page/product-detail/cross-selling.html.twig未提供响应式配置入口
• 全局商品滑块的配置逻辑无法直接复用在关联商品滑块上

一、模板覆写方案（快速实现备选） #

直接修改关联商品模板，为tiny-slider添加响应式配置：

1. 打开模板文件src/Storefront/Resources/views/storefront/page/product-detail/cross-selling.html.twig，找到滑块初始化的JavaScript代码段
2. 替换原有items配置，加入断点响应规则，示例如下：

// 替换原有的items配置
items: {{ crossSelling.maxItems }},
responsive: {
  640: { // 移动端断点
    items: 2
  },
  900: { // 平板端断点
    items: 3
  },
  1200: { // 桌面端用后台配置的最大数量
    items: {{ crossSelling.maxItems }}
  }
}

3. 根据需求调整断点阈值和对应items数量即可

二、后台配置扩展方案（长期适配优先） #

若需通过后台可视化配置实现，需自定义Shopware扩展：

1. 创建扩展，在关联商品的后台配置界面新增移动端、平板端的商品显示数量字段
2. 在cross-selling.html.twig模板中读取这些自定义配置字段，动态生成响应式参数：

{% set sliderConfig = {
  items: crossSelling.maxItems,
  responsive: {
    640: { items: crossSelling.config.mobileItems ?: 2 },
    900: { items: crossSelling.config.tabletItems ?: 3 }
  }
} %}

3. 将sliderConfig传入滑块初始化逻辑，实现后台配置驱动的响应式展示

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