Shopify Section 自定义模块：产品选择模块

Shopify featured-products-tabs 实现解析

该功能可在页面 section 中作为独立 block 使用，支持多产品展示，默认显示4个。同时具备 tab 切换功能，适用于不同产品组的展示需求。

schema结构说明：

• settings：控制tab展示形式，包括PC端和移动端各显示多少产品

• blocks：设置所选产品及其最大展示数量

• presets：配置section默认名称及初始值

完整schema代码如下：

{% schema %}
  "name": "featured-products-tabs",
  "tag": "section",
  "class": "section",
  "settings": [],
  "blocks": [],
  "presets": [
    {
      "name": "featured-products-tabs",
      "blocks": [
        {
          "type": "featured_products"
        }
      ]
    }
  ]
{% endschema %}

每个 block 必须包含 type、name 和 settings 三项属性。settings 中的数据类型分别为：

• 标题（text）：文本输入框

• 产品选择（product_list）：产品选取组件

• 显示数量（range）：滑动条控件

完整 blocks 配置如下：

{
  "type": "featured_products",
  "name": "featured-products-tabs",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Featured products"
    },
    {
      "type": "product_list",
      "id": "product_list",
      "label": "Featured Products"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 12,
      "step": 1,
      "default": 4,
      "label": "Maximum products to show"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 4,
      "label": "Number of columns on desktop"
    }
  ]
}

通过 Liquid 脚本可实现动态标签切换功能，使用如下HTML结构：

<ul class="tab-title-list list--{{ section.id }}">
  {% for block in section.blocks %}
      {% liquid
          assign visible_id =  visible_id | append: visible_id | append: ','
      %}
      {% if visible_id contains block.id %}
          {% liquid
            assign visible_suffix = section.id | append: '-' | append: block.id
          %}
           <li>
            <label for="tab-item-input-{{ visible_suffix }}" class="fpt__tab-item-label button button--secondary ignore-effect fpt__tab-item-label--{{ section.id }}" {{ block.shopify_attributes }}>{{ block.settings.title }}</label>
          </li>
      {% endif %}
  {% endfor %}
</ul>

确保每个 label 拥有唯一的 id，并与对应的 tab-content 的 id 一致，以实现正确切换效果。