如何在Shopify Liquid中创建多属性自定义对象并访问其属性？

一、创建带多属性的自定义对象 #

在Shopify Liquid中，你可以通过assign标签结合**哈希（Hash）**结构来创建自定义对象，哈希的键值对对应对象的属性与值，支持字符串、数字、图片链接等多种数据类型。

基础单对象示例 #

{% assign productData = {
  "name": "复古手工皮质背包",
  "price": 299.99,
  "image": "https://cdn.shopify.com/s/files/1/0000/0001/0001/files/leather-backpack.jpg?v=1620000000",
  "stock": 15
} %}

注意：Liquid哈希的键必须用双引号包裹，字符串类型的值也需要双引号，数字、布尔值可直接书写。

嵌套属性对象示例 #

如果需要多层级的结构化数据，可以在哈希中嵌套另一个哈希：

{% assign productData = {
  "name": "智能运动手表",
  "price": 199.99,
  "specs": {
    "battery_life": "7天",
    "water_resistance": "50米"
  }
} %}

多对象数组示例 #

若要管理一组同类型对象，可创建包含多个哈希的数组：

{% assign productList = [
  {
    "name": "复古手工皮质背包",
    "price": 299.99,
    "image": "https://cdn.shopify.com/s/files/1/0000/0001/0001/files/leather-backpack.jpg?v=1620000000"
  },
  {
    "name": "简约帆布托特包",
    "price": 99.99,
    "image": "https://cdn.shopify.com/s/files/1/0000/0001/0001/files/canvas-tote.jpg?v=1620000001"
  }
] %}

二、访问并输出对象属性 #

创建完成后，你可以通过两种方式访问对象属性：

1. 直接通过.访问属性 #

适合静态属性名的场景，代码简洁直观：

<!-- 输出单对象属性 -->
<h3>{{ productData.name }}</h3>
<p>价格：${{ productData.price }}</p>
<img src="{{ productData.image }}" alt="{{ productData.name }}">

<!-- 输出嵌套属性 -->
<p>续航时长：{{ productData.specs.battery_life }}</p>

2. 通过[]动态访问属性 #

适合属性名需要动态生成的场景（比如循环或变量传参）：

{% assign targetAttr = "price" %}
<p>动态获取价格：${{ productData[targetAttr] }}</p>

3. 遍历数组中的多对象 #

如果是数组形式的多对象，用for循环遍历输出每个对象的属性：

{% for product in productList %}
  <div class="product-card">
    <h4>{{ product.name }}</h4>
    <p>${{ product.price }}</p>
    <img src="{{ product.image }}" alt="{{ product.name }}">
  </div>
{% endfor %}

注意事项 #

• Liquid哈希是不可变的，创建后无法直接修改属性值，若需更新数据，需重新assign一个新的哈希对象。
• 属性值支持Liquid的所有数据类型，包括布尔值、日期、甚至其他Liquid对象（如product、collection）。

内容的提问来源于stack exchange，提问作者Milan Pithadiya