shopify theme (六)

(61)block

官网地址

① 当前组件添加的所有动态子块 转成 HTML 代码 后， 传递 给 group.liquid

通过 capture 捕获动态子块内容，再传递给 group.liquid 片段统一渲染

② block.settings

• block.settings：是「商家在编辑器中对当前子块的配置数据」（比如选择的 “水平排列”“两端对齐” 等，是个 JSON 对象）；
• block.shopify_attributes：是「Shopify 自动生成的内置属性」（比如子块 ID、数据属性，用于编辑器识别子块，是段 HTML 属性字符串）。

③ block.shopify_attributes

④ block.id

(62) md5

  #核心目的：给每个产品卡片生成一个唯一的 HTML ID，后续给卡片内的元素（比如链接、按钮）用，避免多个产品卡片的 ID 重复（导致 JS 交互冲突）。
  #生成逻辑：拼接 3 个部分组成唯一 ID：
  #固定前缀：product-card-link-；
  #区块 ID（block.id）：当前产品卡片所在区块的唯一标识（比如 block-123）；
  #产品 ID（product.id）：产品本身的唯一标识（比如 123456）。
  #实际输出示例：product-card-link-block-123-123456。
  
assign product_card_id = 'product-card-link-' | append: block.id | append: '-' | append: product.id
  <a
    id="{{ product_card_id | md5 }}"
    
    class="product-card__link"
    ref="productCardLink"
  >
   
  </a>

(64) (65) (66) (67) (68) (69) (70) (71)