shopify-liquid

Shopify Liquid 技能

Liquid 是 Shopify 使用的模板语言，用于在店面加载动态内容。

1. 核心语法

• 输出：{{ ... }} - 将内容打印到页面上。
• 标签：{% ... %} - 逻辑（if、for、assign）。
• 过滤器：{{ value | filter }} - 修改输出。

2. 主题应用扩展（应用区块）

现代应用使用应用区块向主题注入代码，避免直接修改旧版代码。

schema 标签

定义主题编辑器中可用的设置。

{% schema %}
{
  "name": "Star Rating",
  "target": "section",
  "settings": [
    {
      "type": "color",
      "id": "star_color",
      "label": "Star Color",
      "default": "#ff0000"
    }
  ]
}
{% endschema %}

访问设置

使用 block.settings.id 访问 schema 中定义的值。

<div style="color: {{ block.settings.star_color }}">
  ★★★★★
</div>

应用嵌入区块

全局运行的脚本（例如，分析工具、聊天气泡）。

{% schema %}
{
  "name": "Chat Bubble",
  "target": "body",
  "javascript": "chat.js",
  "settings": []
}
{% endschema %}

3. 常用对象

• product：
  • {{ product.title }}
  • {{ product.variants.first.id }}
  • {{ product.featured_image | image_url: width: 400 }}
• cart：
  • {{ cart.item_count }}
  • {{ cart.currency.iso_code }}
• customer：
  • {% if customer %} 用于检查客户是否已登录。
• shop：
  • {{ shop.name }}
  • {{ shop.permanent_domain }}

4. 实用过滤器

• 金额：{{ product.price | money }} -> $10.00
• 资源 URL：{{ 'style.css' | asset_url }}（引用 assets/ 文件夹中的资源）
• JSON：{{ product | json }}（适用于向 JS 传递数据）

5. 与 JavaScript 搭配使用

使用数据属性或全局变量将 Liquid 数据传递给 JavaScript。

模式：数据属性（首选）

<div id="my-app" data-product-id="{{ product.id }}" data-shop="{{ shop.permanent_domain }}"></div>

<script>
  const app = document.getElementById('my-app');
  const productId = app.dataset.productId;
</script>

模式：全局对象（旧版）

<script>
  window.ShopifyData = {
    product: {{ product | json }},
    cart: {{ cart | json }}
  };
</script>

6. 应用代理

请求来自应用代理时，Liquid 会先渲染响应，然后再将其发送到布局。

• 如果返回 Content-Type: application/liquid，Shopify 将解析响应中的 Liquid。