Shopify如何截断双括号[[itemTitle]]包裹的产品标题字符

你代码中的[[itemTitle]]是Boost Product Filter & Search插件的服务端渲染占位符，这类占位符本身不支持直接在模板层写入截断逻辑，以下两种方案均不需要修改插件核心模板，不会随插件更新失效：

方案1：CSS自适应截断（优先推荐） #

该方案无JS侵入、性能最好，会根据标题容器宽度自动截断，超出部分显示省略号，支持单行/多行截断配置：

/* 产品标题截断样式 */
.cl-product-card-name {
  /* 按需调整显示行数，单行截断设为1，双行设为2 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 可选：固定行高避免布局抖动 */
  line-height: 1.5;
  margin: 0;
}

若业务要求严格按固定字符数截断，而非宽度自适应，使用下方JS方案。

方案2：JS固定字符数截断 #

插件会动态加载、渲染产品列表，直接在页面初始化时执行截断无法覆盖动态生成的内容，优先使用插件官方提供的渲染完成回调触发逻辑：

// 通用标题截断工具函数
// maxLen参数可按需调整，默认30字符
const truncateProductTitle = (title, maxLen = 30) => {
  return title.length <= maxLen ? title : `${title.slice(0, maxLen)}...`;
};

// 监听Boost PFS插件渲染完成事件
document.addEventListener('boost-pfs:filter-rendered', () => {
  document.querySelectorAll('.cl-product-card-name').forEach(titleEl => {
    // 缓存原始标题，避免重复截断导致内容丢失
    if (!titleEl.dataset.originalTitle) {
      titleEl.dataset.originalTitle = titleEl.textContent.trim();
    }
    titleEl.textContent = truncateProductTitle(titleEl.dataset.originalTitle);
  });
});

若你使用的插件版本不支持上述渲染事件，可使用通用DOM监听方案，兼容所有动态渲染场景：

const truncateProductTitle = (title, maxLen = 30) => {
  return title.length <= maxLen ? title : `${title.slice(0, maxLen)}...`;
};

const domObserver = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.nodeType !== 1) return;
      const titleEls = node.querySelectorAll('.cl-product-card-name');
      titleEls.forEach(titleEl => {
        if (!titleEl.dataset.originalTitle) {
          titleEl.dataset.originalTitle = titleEl.textContent.trim();
        }
        titleEl.textContent = truncateProductTitle(titleEl.dataset.originalTitle);
      });
    });
  });
});

// 启动全局DOM监听
domObserver.observe(document.body, {
  childList: true,
  subtree: true
});

部署说明 #

• 上述CSS代码可直接粘贴到主题后台的「自定义CSS」区域
• 上述JS代码可直接粘贴到主题后台的「自定义JS」区域，或者主题的theme.liquid文件末尾的<script>标签中
• 禁止直接修改插件的核心模板文件，否则插件更新后所有修改会被覆盖

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