Shopify Liquid 主题开发实战要点

{% for product in collections['featured'].products %}
  {% if collections['featured'].products.size > 4 %}
    <div class="card carousel-item">
      ...
      {% assign related = collections['featured'].products | where: 'tags', product.tags.first %}
      ...
    </div>
  {% endif %}
{% endfor %}

{% assign featured_products = collections['featured'].products %}
{% assign product_count = featured_products.size %}
 
{% if product_count > 4 %}
  {% for product in featured_products limit: 8 %}
    ...
  {% endfor %}
{% endif %}

{# 反例 #}
{% assign sale_products = collections.all.products | where: 'compare_at_price_max', '>', 0 %}

{% assign sale_products = collections['sale'].products %}

{# 卡片显示宽度 300px，却取了 1500px #}
<img src="{{ product.featured_image | image_url: width: 1500 }}">
 
{# 未指定宽度，返回原图 #}
<img src="{{ product.featured_image | image_url }}">

{% comment %}
  snippets/responsive-image.liquid
 
  参数:
    image (必需) - image 对象
    sizes (可选, 默认 "100vw") - CSS sizes 属性
    widths (可选, 默认 "300, 600, 900, 1200") - srcset 候选宽度
    class (可选) - 额外 class
{% endcomment %}
 
{%- assign sizes = sizes | default: "100vw" -%}
{%- assign widths = widths | default: "300, 600, 900, 1200" -%}
{%- assign widths_array = widths | split: ", " -%}
 
{%- capture srcset -%}
  {%- for w in widths_array -%}
    {{ image | image_url: width: w }} {{ w }}w{%- unless forloop.last -%},{%- endunless -%}
  {%- endfor -%}
{%- endcapture -%}
 
<img
  src="{{ image | image_url: width: 600 }}"
  srcset="{{ srcset }}"
  sizes="{{ sizes }}"
  alt="{{ image.alt | escape }}"
  class="{{ class }}"
  loading="lazy"
  width="{{ image.width }}"
  height="{{ image.height }}"
>

{% render 'responsive-image',
   image: product.featured_image,
   sizes: '(min-width: 768px) 33vw, 100vw',
   widths: '300, 600, 900' %}

{% for image in product.images %}
  <img
    src="{{ image | image_url: width: 1200 }}"
    {% unless forloop.first %}loading="lazy"{% endunless %}
    alt="{{ image.alt | default: product.title }}"
  >
{% endfor %}

{# 反例：永远只展示前 50 个 #}
{% for product in collection.products limit: 50 %}
  ...
{% endfor %}

{% paginate collection.products by 24 %}
  {% for product in collection.products %}
    {% render 'product-card', product: product %}
  {% endfor %}
 
  {{ paginate | default_pagination }}
{% endpaginate %}

{# 错误 1：JS 上下文用 escape，单引号、换行未处理 #}
<script>
  var productTitle = "{{ product.title | escape }}";
</script>
 
{# 错误 2：HTML 属性用 json，引号嵌套出错 #}
<div data-title="{{ product.title | json }}">

<script>
  var productTitle = {{ product.title | json }};
  {# 注意 json 会自带引号，外层不需要再加 #}
</script>
 
<div data-title="{{ product.title | escape }}">

{% liquid
  assign featured_products = collections['featured'].products
  assign product_count = featured_products.size
  assign is_logged_in = customer != blank
  assign has_orders = false
 
  if customer and customer.orders.size > 0
    assign has_orders = true
  endif
 
  if is_logged_in and has_orders
    assign show_returning_banner = true
  else
    assign show_returning_banner = false
  endif
%}

{% assign product = collection.products.first %}
 
{% include 'product-card' %}
{# snippet 内部可直接使用 product #}
 
{% render 'product-card' %}
{# snippet 内部 product 为 nil #}
 
{% render 'product-card', product: product %}
{# 正确调用方式 #}

{% comment %}
  snippets/product-card.liquid
 
  必需参数:
    product - 产品对象
 
  可选参数:
    show_vendor (boolean, 默认 false) - 是否显示品牌
    image_width (number, 默认 400) - 卡片图片宽度
    context (string, 默认 'default') - 'collection' | 'search' | 'featured'
                                       用于埋点和不同布局变体
 
  调用示例:
    {% render 'product-card', product: product, show_vendor: true %}
{% endcomment %}
 
{%- liquid
  assign show_vendor = show_vendor | default: false
  assign image_width = image_width | default: 400
  assign context = context | default: 'default'
-%}
 
<div class="product-card" data-context="{{ context }}">
  ...
</div>

{# 反例 #}
<button>加入购物车</button>
<p>商品已售罄</p>
 
{# 推荐 #}
<button>{{ 'products.product.add_to_cart' | t }}</button>
<p>{{ 'products.product.sold_out' | t }}</p>

// locales/zh-CN.json
{ "products": { "facets": { "showing_count": "共 {{ count }} 件商品" } } }

{{ 'products.facets.showing_count' | t: count: collection.products_count }}