shopify theme (三)

（37）newline_to_br

a. newline_to_br 是一个过滤器，表示将字符串中的换行符 (\n) 替换成 <br /> 标签。

assign swatch_config = settings.color_swatch_style | newline_to_br | split: '<br />'

例如，如果 settings.color_swatch_style 是

Red
Blue
Green

使用 newline_to_br 过滤器后，结果将变成：

Red<br />Blue<br />Green

b. | split: '<br />'

• 这个过滤器将字符串按 <br /> 标签进行拆分，返回一个数组（列表）。因此，字符串中的每个 <br /> 被作为分隔符，将原始字符串分割成多个部分。
• 在上面的例子中，Red<br />Blue<br />Green 会被分割为一个包含 Red、Blue 和 Green 的数组:

['Red', 'Blue', 'Green']

（38）request

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

① page_type

• 该条件判断 request.page_type 是否等于 'product'。request.page_type 是一个请求的页面类型变量，它可以是不同类型页面的标识（例如，'product'、'collection' 等）。在这里，它用于检查当前页面是否是产品页面。

• 如果当前页面是产品页面（request.page_type == 'product'），标题会使用 <h1> 标签显示，直接显示商品的标题。

{%- if request.page_type == 'product' -%}
    <h1 class="product-info__title">
      {{- product.title -}}
    </h1>
{%- else -%}

（39）cart

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

① cart.taxes_included

（40）schema ——> blocks

① "type": "separator"

（41）| t  过滤器

① t: count

（42）where

（43）templates

页面地址：商店名称/?view=cart

（44）模块组合

（45）实例，for循环，数组

数据：

    <script>
      const b = [
        {
          id: 1,
          title: 'opghj - Purple',
          properties: {
            _grade: 'classA',
            _bind: '46325605499054_mcvqboyqzz7t',
          },
        },
        {
          id: 2,
          title: 'MW50+ (Silver Metal / Black Leather) - Black',
          properties: {
            _bind: '46325605499054_mcvqboyqzz7t',
          },
        },
        {
          id: 5,
          title: 'opghj - Purple',
          properties: {},
        },
        {
          id: 6,
          title: 'ab - Red / Middle',
          properties: {
            _grade: 'classA',
            _bind: '46329158926510_mcvpu0j8ltm9',
          },
        },
        {
          id: 7,
          title: 'tyipo969',
          properties: {
            _bind: '46329158926510_mcvpu0j8ltm9',
          },
        },
        {
          id: 8,
          title: 'test-free',
          properties: {
            _bind: '46329158926510_mcvpu0j8ltm9',
          },
        },
        {
          id: 9,
          title: 'MW50+ (Silver Metal / Black Leather) - Black',
          properties: {
            _bind: '46329158926510_mcvpu0j8ltm9',
          },
        },
      ];
    </script>

目标 渲染数据：

但shopify 没有这种js处理，如果用js处理数据，在js里渲染html，这种不太优化。

（46） （47）