如何在Liquid集合页循环的指定迭代位置插入自定义内容

推荐优先使用服务端Liquid实现，避免前端插入导致的视觉闪烁，也不依赖脚本加载状态。

方案1：Liquid原生实现 #

直接在产品循环逻辑中插入判断，利用Liquid自带的forloop.index变量（循环计数从1开始）匹配你需要的位置：

<ul id="collection-grid" data-id="{{ section.id }}" class="grid">
  {%- for product in collection.products -%}
    <li class="grid-item">
      {% render 'product-wrapper' %}
     </li>
     {% comment %} 对应位置插入自定义卡片 {% endcomment %}
     {% case forloop.index %}
       {% when 3 %}
         <li class="info-card card-wrapper">
           <img src="替换为第一张自定义图的链接" alt="替换为对应图片描述">
         </li>
       {% when 7 %}
         <li class="info-card card-wrapper">
           <img src="替换为第二张自定义图的链接" alt="替换为对应图片描述">
         </li>
       {% when 11 %}
         <li class="info-card card-wrapper">
           <img src="替换为第三张自定义图的链接" alt="替换为对应图片描述">
         </li>
     {% endcase %}
  {%- endfor -%}
 </ul>

如果产品总数不足11，对应位置的自定义卡片不会渲染，不会产生报错。

方案2：修复后的jQuery实现 #

你之前的代码存在两个问题：

• 选择器$("ul:nth-child(3)")匹配的是父元素下第三个ul标签，不是ul内的第三个li
• append是向ul末尾追加内容，不是在指定li后插入

修复后的代码如下，需要确保DOM加载完成后执行：

$(function() {
  // 第3个产品后插入
  $("#collection-grid li:nth-child(3)").after('<li class="info-card card-wrapper"><img src="第一张图链接" alt="描述"></li>');
  // 第7个产品后插入
  $("#collection-grid li:nth-child(7)").after('<li class="info-card card-wrapper"><img src="第二张图链接" alt="描述"></li>');
  // 第11个产品后插入
  $("#collection-grid li:nth-child(11)").after('<li class="info-card card-wrapper"><img src="第三张图链接" alt="描述"></li>');
})

如果产品列表是动态懒加载的，需要在列表渲染完成后再执行这段脚本。

内容的提问来源于stack exchange，提问作者caio.samper