系列选型与比较

先定真实差异属性，再实现筛选、结果与型号比较。

真实属性筛选与空结果

用 collection.filters 的实际选项、参数名和结果数生成表单，保持已选状态。先让提交与清除可靠，再增强为手机抽屉。

数据与依赖

真实配置的 list／boolean 筛选。
价格区间需要单独使用对应 min/max 字段。

交互逻辑

无结果且未选中的值禁用。
已选的零结果值仍可取消，排序值保留。

示例代码 · snippets/ww-filters.liquid

Liquid · WESWOO

<form action="{{ collection.url }}" method="get">
  {% for filter in collection.filters %}
    {% if filter.type == 'list' or filter.type == 'boolean' %}
      <fieldset>
        <legend>{{ filter.label | escape }}</legend>
        {% for value in filter.values %}
          <label>
            <input type="checkbox" name="{{ value.param_name }}" value="{{ value.value | escape }}"
              {% if value.active %}checked{% endif %}
              {% if value.count == 0 and value.active == false %}disabled{% endif %}>
            {{ value.label | escape }} ({{ value.count }})
          </label>
        {% endfor %}
      </fieldset>
    {% endif %}
  {% endfor %}
  <input type="hidden" name="sort_by" value="{{ collection.sort_by | default: collection.default_sort_by }}">
  <button type="submit">Apply filters</button>
  <a href="{{ collection.url | escape }}">Clear all filters</a>
</form>
<p>{{ collection.products_count }} products</p>

验收检查

核有结果、无结果、组合与重置。
刷新后核参数、选择与结果一致。

片段不处理价格区间；分面 URL 的抓取策略另行确认，不能只靠前端隐藏参数。

官方开发文档

实现对照

Shopify/dawn · snippets/facets.liquid

商品网格、排序与分页

保留系列导语，把筛选后的商品交给统一卡片渲染；原生分页负责可达结果。排序提交应保留已选筛选，不能只重排当前屏幕的商品。

数据与依赖

collection.products 及产品卡片依赖。
排序来自 collection.sort_options，与当前参数一起提交。

交互逻辑

没有结果时给出调整入口。
翻页后显示对应商品和可读页码。

示例代码 · snippets/ww-collection-grid.liquid

Liquid · WESWOO

<h1>{{ collection.title | escape }}</h1>
<div>{{ collection.description }}</div>
{% paginate collection.products by 24 %}
  <ul class="ww-product-grid">
    {% for product in collection.products %}
      <li>{% render 'ww-product-card', product: product %}</li>
    {% else %}
      <li>No matching products. Change or clear the filters.</li>
    {% endfor %}
  </ul>
  {{ paginate | default_pagination }}
{% endpaginate %}

示例代码 · snippets/ww-product-card.liquid

Liquid · WESWOO

{% assign card_product = product %}
{% assign card_variant = card_product.selected_or_first_available_variant %}
{% assign card_form_id = 'CardProduct-' | append: section.id | append: '-' | append: card_product.id %}
<article>
  <a href="{{ card_product.url | escape }}">
    {% if card_product.featured_image %}
      {{ card_product.featured_image | image_url: width: 640 | image_tag: widths: '320, 480, 640', sizes: '(max-width: 749px) 45vw, 25vw', loading: 'lazy' }}
    {% endif %}
    <h3>{{ card_product.title | escape }}</h3>
  </a>
  <p>{{ card_product.metafields.custom.key_spec.value | escape }}</p>
  <p>{{ card_variant.price | money_with_currency }}</p>
  {% if card_product.has_only_default_variant and card_variant.available %}
    {% form 'product', card_product, id: card_form_id %}
      <input type="hidden" name="id" value="{{ card_variant.id }}">
      <button type="submit">Add to cart</button>
    {% endform %}
  {% else %}
    <a href="{{ card_product.url | escape }}">Choose options and check availability</a>
  {% endif %}
</article>

示例代码 · assets/ww-module-layout.css

CSS · WESWOO

.ww-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  list-style: none;
  padding: 0;
}
.ww-product-grid img { width: 100%; height: auto; }
.ww-product-grid h3 { overflow-wrap: anywhere; }
.ww-table-scroll { max-width: 100%; overflow-x: auto; }
.ww-table-scroll table { border-collapse: collapse; min-width: 30rem; }
.ww-table-scroll th, .ww-table-scroll td { padding: .75rem; text-align: start; }
@media (max-width: 749px) {
  .ww-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
}

验收检查

从第一页进入最后一页再返回。
核排序／筛选组合和卡片价格。

示例依赖 ww-product-card 片段，样式应接现有主题网格；排序控件与筛选表单一起整合。

官方开发文档

实现对照

Shopify/dawn · snippets/card-product.liquid

WESWOO 文章

产品页架构：商品事实、SEO与实验

型号差异与 HTML 对比表

按顾客的用途与适配问题挑选比较维度，以同单位和测试条件展示。参数使用真实文字，型号链接回具体商品。

数据与依赖

collection.custom.comparison_products：list.product_reference。
商品 custom.key_spec 与正式规格资料一致。

交互逻辑

缺少资料显示未提供，不自行补零。
手机表格可聚焦横向阅读，保留列标题。

示例代码 · snippets/ww-comparison.liquid

Liquid · WESWOO

{% assign models = collection.metafields.custom.comparison_products.value %}
{% if models != blank %}
  <div class="ww-table-scroll" role="region" aria-label="Model comparison" tabindex="0">
    <table>
      <caption>Compare the models in this collection</caption>
      <thead><tr><th scope="col">Model</th><th scope="col">Use and key specification</th></tr></thead>
      <tbody>
        {% for model in models %}
          <tr>
            <th scope="row"><a href="{{ model.url | escape }}">{{ model.title | escape }}</a></th>
            <td>{{ model.metafields.custom.key_spec.value | default: 'Not supplied' | escape }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endif %}

示例代码 · assets/ww-module-layout.css

CSS · WESWOO

.ww-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  list-style: none;
  padding: 0;
}
.ww-product-grid img { width: 100%; height: auto; }
.ww-product-grid h3 { overflow-wrap: anywhere; }
.ww-table-scroll { max-width: 100%; overflow-x: auto; }
.ww-table-scroll table { border-collapse: collapse; min-width: 30rem; }
.ww-table-scroll th, .ww-table-scroll td { padding: .75rem; text-align: start; }
@media (max-width: 749px) {
  .ww-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
}

验收检查

用一个实际选型问题走到型号。
核相同单位、条件及商品链接。

示例只有一项比较维度；需要更多规格时从同一字段字典扩展列。

官方开发文档

WESWOO 文章

先理解，再整合，最后验证

选择模块，确认数据和输入输出。
将片段接入当前主题或框架。
用真实变体、市场和失败恢复场景验收。

示例按 Shopify Online Store 2.0 主题编写；Headless 使用单独的数据与版本边界。代码片段需接实际字段、主题和语言文件。

架构参考

示例由 WESWOO 编写，结合 Shopify 官方文档和固定版本的仓库参考。采用仓库代码时应保留适用许可。

Shopify/dawn · 许可commit 3e9ee2281dc4 · Shopify 集成主题的限定许可；参考架构，不复制仓库实现。

Shopify/hydrogen · 许可commit 9e358a2462ba · MIT；采用实质代码时保留版权与许可。

依据核对 2026-11-12