shopify theme (二)（31）section 文档地址：https://shopify.dev/docs/a

（31）`section`

    {%- liquid
      assign main_media_loading_strategy = nil

      if section.index > 3 or position > 3
        assign main_media_loading_strategy = 'lazy'
      endif
    -%}

（32）`product`

文档地址：shopify.dev/docs/api/li…

① product.featured_media

② `product.media[product.featured_media.position]`

③ `product.available`

④ `product.variants`

案例1：

{%- if product.variants.size == 1 -%}

product.variants 是一个数组，包含当前产品的所有变体（如不同的颜色、尺寸等）。variants.size 返回该数组的大小，也就是产品变体的数量。此条件判断的是：当前产品是否只有 1 个变体。
举个例子：如果该产品只有一种尺寸或颜色（即只有一个变体），则该条件为 true。

案例2：

[      {        "id": 1,        "title": "Red - Small",        "price": 19.99,        "option1": "Red",        "option2": "Small"      },      {        "id": 2,        "title": "Red - Medium",        "price": 19.99,        "option1": "Red",        "option2": "Medium"      },      {        "id": 3,        "title": "Red - Large",        "price": 19.99,        "option1": "Red",        "option2": "Large"      },      {        "id": 4,        "title": "Blue - Small",        "price": 19.99,        "option1": "Blue",        "option2": "Small"      },      {        "id": 5,        "title": "Blue - Medium",        "price": 19.99,        "option1": "Blue",        "option2": "Medium"      },      {        "id": 6,        "title": "Blue - Large",        "price": 19.99,        "option1": "Blue",        "option2": "Large"      }    ]

案例3：

案例4：

⑤ `product.selling_plan_groups`

⑥ `product.selected_or_first_available_variant`

如果用户没有明确选择变体，或者没有选择的情况下，selected_or_first_available_variant 会返回商品的第一个可用变体。这个变体通常是系统自动选择的第一个可用选项，比如商品列表中的第一个尺码或颜色。

第一个：`variant.compare_at_price` 与 `variant.price`

{%- assign variant = variant | default: product.selected_or_first_available_variant -%}

第二个：`product.selected_or_first_available_variant` 与 `product.featured_media` 的区别

第三个：`product.selected_or_first_available_variant.sku`

⑦`vendor`

文档地址：shopify.dev/docs/api/st…

过滤器 url_for_vendor：

⑧ product.compare_at_price ，product.price 和 variant.compare_at_price，variant.price 这4个的区别是什么

1. product.price

定义：这是整个产品的 标准售价，即产品的正常销售价格（不考虑任何折扣或促销）。
适用场景：product.price 用于表示产品本身的价格。如果你有一个多变体的产品，这个价格是产品的默认价格（通常是第一个变体的价格）。
注意：如果你直接使用 product.price，它不会考虑变体的价格差异。即使产品有多个变体，每个变体的价格可能不同，但 product.price 始终是默认变体（通常是第一个变体）的价格。

2. product.compare_at_price

定义：这是整个产品的原价（也叫“划线价”或“建议零售价”），通常用于显示一个较高的参考价格，以便让顾客看到当前的价格折扣。
适用场景：product.compare_at_price 用于显示折扣后的价格对比。当产品的 compare_at_price 大于 price 时，Shopify 会显示一个价格折扣，并展示原价（compare_at_price）和现价（price）。
注意：如果所有变体的 compare_at_price 都设置了，那么该属性显示的值通常是第一个变体的 compare_at_price。

3. variant.price

定义：这是每个变体的售价，即特定变体的实际销售价格。
适用场景：如果产品有多个变体，variant.price 显示的是当前选择变体的实际售价。例如，如果有不同颜色或尺寸的变体，它们的价格可能会有所不同。
注意：variant.price 是针对单个变体的，不是整个产品的价格。

4. variant.compare_at_price

定义：这是每个变体的原价（划线价），通常用于与 variant.price 进行比较，显示折扣信息。
适用场景：与 variant.price 类似，variant.compare_at_price 用于展示原价，帮助顾客了解当前价格的折扣幅度。如果变体的 compare_at_price 大于其 price，Shopify 会展示该变体的折扣信息。
注意：variant.compare_at_price 是特定于变体的，而不是产品的。

⑨ `options_by_name`

（A） `product.options_by_name.values`

{%- assign color_label_list = 'general.label.color' | t | replace: ', ', ',' | downcase | split: ',' -%}

assign 是 Liquid 中用来创建和赋值变量的指令。在这一行，color_label_list 被赋值为一系列颜色标签的列表。
'general.label.color' | t：这里，'general.label.color' 是一个翻译键，它会被翻译成当前商店所选语言中的“颜色”这个词。例如，在英语中，它会被翻译为 "color"。t 是 Liquid 中的翻译过滤器，用来获取语言文件中的翻译内容。
replace: ', ', ','：这个过滤器将翻译得到的字符串中的所有 ', ' （逗号和空格）替换成 ','（仅逗号）。这样做是为了去掉多余的空格，确保分隔符只有逗号。
downcase：将整个字符串转换为小写字母。比如“Color”会被转换为“color”。
split: ','：将翻译结果按逗号进行拆分，生成一个数组。假设翻译结果是 "red, green, blue"，经过这一操作之后，color_label_list 将变成 ["red", "green", "blue"]。

{{ product.options_by_name[color_label] }}

product.options_by_name 是一个包含所有产品选项的对象。通过 product.options_by_name[color_label]，你可以访问当前 color_label 对应的产品选项。如果该选项存在，它将返回该选项的值（如颜色选项）。

（B） product.options_by_name.values.size

案例1：

案例2：

//这段代码用于从语言文件中获取与产品可用颜色数量相关的翻译文本，

//并根据实际的颜色数量进行动态插入，确保无论是中文还是英文，都会根据用户的语言环境输出正确的内容。

{{- 'product.general.available_colors_count' | t: count: product_option.values.size -}}

（aa）'product.general.available_colors_count' ：

这是一个 字符串，通常代表一个翻译键。Shopify 支持多语言，翻译键可以在 locales 文件夹中的 .json 文件中定义。这些翻译文件存储了不同语言的翻译内容。
'product.general.available_colors_count' 这个翻译键，通常用来表示“可用颜色数量”的文本，可能会有不同的语言版本。

（bb）| t: count: product_option.values.size：

| t 是一个 Liquid 过滤器，用于对指定的翻译键进行翻译。它将根据当前语言环境的设置从语言文件中获取翻译文本。
count: product_option.values.size 是一个参数，它将 product_option.values.size 的值传递给翻译模板中的 count 变量。
product_option.values.size 获取产品选项（如颜色）的数量。在 Shopify 产品页面中，product_option 可能代表产品的一个选项（如颜色、大小等），values 是该选项的具体值（如红色、蓝色等），size 是该选项的值的数量。

（C）`product.options_by_name[Color].product_option 与 product.options_by_name[Color].values.product_option_value`

product_option：

product_option_value 这是个数组：

product.options_by_name[Color] .values. product_option_value

（D）position：

⑩ `product.description`

⑪ `product.has_only_default_variant`

⑫ `product.handle`

⑬ `product.options_with_values`

（33） `variant`

文档地址：shopify.dev/docs/api/li…

接下来是 impact-inventory.liquid文件内容：

① `variant.available`

② `variant.inventory_management`

③ `variant.inventory_policy`

④ `variant.inventory_quantity`

⑤ `variant.requires_shipping`

⑥ `variant.incoming`

（34） `form`

① `product`

    {% form 'product', product %}
      form_content
    {% endform %}

案例1：

② `payment_terms`

代码功能：

渲染分期付款信息
根据商品的当前价格和支付服务商（如 Shopify Payments、Affirm 等）的规则，动态显示分期付款选项（例如："4 期付款，每期 $25"）。
自动更新
当用户选择不同商品规格（如颜色、尺寸）导致价格变化时，分期付款信息会自动重新计算。

<div class="product-info__payment-terms">
{%- capture product_installment_form_id -%}{{ product_form_id }}-product-installment-form{%- endcapture -%}

{%- form 'product', product, id: product_installment_form_id -%}
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
  {{- form | payment_terms -}}
{%- endform -%}
</div>

页面渲染的结果：

<div class="product-info__payment-terms">
    <form method="post" action="/cart/add" id="product-form-8715381538990-template--18134040150190__main-product-installment-form" accept-charset="UTF-8" class="shopify-product-form" enctype="multipart/form-data">
        <input type="hidden" name="form_type" value="product">
        <input type="hidden" name="utf8" value="✓">
        <input type="hidden" name="id" value="46333316661422">
        <input type="hidden" name="product-id" value="8715381538990">
        <input type="hidden" name="section-id" value="template--18134040150190__main">
    </form>
</div>

（36）标签 fieldset ——> legend

    <fieldset> 
        <legend>这是字段集的标题</legend>
        <!-- 其他内容 --> 
    </fieldset>

<legend> 标签是 HTML 中的一种标签，通常用来提供 <fieldset> 元素的标题或描述。它是 <fieldset> 标签的一个子元素，用于向用户说明字段集的目的或者提供更多的上下文信息。

<fieldset> 用来将表单中的相关控件和标签分组，通常用来让表单看起来更有组织。

<legend> 标签用于为 <fieldset> 中的内容提供一个标题或描述。它帮助提高表单的可访问性，特别是对于依赖屏幕阅读器的用户。

 <form>
  <fieldset>
    <legend>个人信息</legend>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name"><br>

    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email"><br>
  </fieldset>

  <fieldset>
    <legend>通讯方式</legend>
    <label for="phone">电话号码:</label>
    <input type="text" id="phone" name="phone"><br>

    <label for="address">地址:</label>
    <input type="text" id="address" name="address"><br>
  </fieldset>

  <input type="submit" value="提交">
</form>

（37）在shopify后台，怎么把公共设置放在单独模块里的 Theme Settings

在模块文件里，使用 {{ settings.product_color_display }}

shopify theme (二)

（31）section

（32）product

① product.featured_media

② product.media[product.featured_media.position]

③ product.available

④ product.variants

⑤ product.selling_plan_groups

⑥ product.selected_or_first_available_variant

第一个：variant.compare_at_price 与 variant.price

第二个：product.selected_or_first_available_variant 与 product.featured_media 的区别

第三个：product.selected_or_first_available_variant.sku

⑦vendor

⑧ product.compare_at_price ，product.price 和 variant.compare_at_price，variant.price 这4个的区别是什么

⑨ options_by_name

（A） product.options_by_name.values

（B） product.options_by_name.values.size

（C）product.options_by_name[Color].product_option 与 product.options_by_name[Color].values.product_option_value

（D）position：

⑩ product.description

⑪ product.has_only_default_variant

⑫ product.handle

⑬ product.options_with_values

（33） variant

① variant.available

② variant.inventory_management

③ variant.inventory_policy

④ variant.inventory_quantity

⑤ variant.requires_shipping

⑥ variant.incoming

（34） form

① product

② payment_terms

（36）标签 fieldset ——> legend

（37）在shopify后台，怎么把公共设置放在单独模块里的 Theme Settings

（31）`section`

（32）`product`

② `product.media[product.featured_media.position]`

③ `product.available`

④ `product.variants`

⑤ `product.selling_plan_groups`

⑥ `product.selected_or_first_available_variant`

第一个：`variant.compare_at_price` 与 `variant.price`

第二个：`product.selected_or_first_available_variant` 与 `product.featured_media` 的区别

第三个：`product.selected_or_first_available_variant.sku`

⑦`vendor`

⑨ `options_by_name`

（A） `product.options_by_name.values`

（C）`product.options_by_name[Color].product_option 与 product.options_by_name[Color].values.product_option_value`

⑩ `product.description`

⑪ `product.has_only_default_variant`

⑫ `product.handle`

⑬ `product.options_with_values`

（33） `variant`

① `variant.available`

② `variant.inventory_management`

③ `variant.inventory_policy`

④ `variant.inventory_quantity`

⑤ `variant.requires_shipping`

⑥ `variant.incoming`

（34） `form`

① `product`

② `payment_terms`