Shopify Online Store 2.0自定义区块无法在首页显示求助

问题核心错误点及修复方案 #

1. Block类型匹配不对应 #

模板中使用{% when 'trustBadgesImage' %}判断区块类型，但在schema定义里，区块的type是"trustBadges"，两者不匹配导致区块无法渲染。

2. 标题变量调用错误 #

模板中写的{{ section.settings.title }}，但schema里标题设置项的id是"trustBadgesTitle"，变量名不匹配导致标题无法显示。

3. 冗余嵌套循环导致逻辑混乱 #

外层已经遍历section.blocks，内部又重复遍历一次，不仅冗余还会引发渲染逻辑错误。

4. index.json中block_order配置错误 #

block_order里混入了section的设置项trustBadgesTitle，这不是区块ID，会导致区块加载失败。

修正后的代码 #

Section文件（trust-badges.liquid） #

<div>
  <h2>{{ section.settings.trustBadgesTitle | escape }}</h2>

  {% if section.blocks.size > 0 %}
    <ul>
      {% for block in section.blocks %}
        {% case block.type %}
          {% when 'trustBadges' %}
            <li class="trust-badge-section" {{ block.shopify_attributes }}>
              {% if block.settings.trustBadgeslink != blank %}
                <a href="{{ block.settings.trustBadgeslink }}">
              {% endif %}
              {% if block.settings.trustBadgesImage != blank %}
                {{ block.settings.trustBadgesImage | img_url: '150x150', scale: 2 | img_tag: block.settings.trustBadgesImage.alt, 'trust-badge__image' }}
              {% else %}
                {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
              {% endif %}
              {% if block.settings.trustBadgeslink != blank %}
                </a>
              {% endif %}
            </li>
        {% endcase %}
      {% endfor %}
    </ul>
  {% endif %}
</div>

{% schema %}
  {
    "name": "Trust Badge",
    "tag": "section",
    "class": "trust-badges",
    "max_blocks": 8,
    "settings": [
      {
        "type": "text",
        "id": "trustBadgesTitle",
        "label": "Heading"
      }, {
        "type": "select",
        "id": "trustBadgeslogo_width",
        "label": "Logo width",
        "default": "150px",
        "options": [
          {
            "label": "Extra Small",
            "value": "100px"
          },
          {
            "label": "Small",
            "value": "125px"
          },
          {
            "label": "Medium",
            "value": "150px"
          },
          {
            "label": "Large",
            "value": "175px"
          }, {
            "label": "Extra Large",
            "value": "200px"
          }
        ]
      }
    ],
    "blocks": [
      {
        "name": "Trust Badge Image",
        "type": "trustBadges",
        "settings": [
          {
            "type": "image_picker",
            "id": "trustBadgesImage",
            "label": "Image"
          }, {
            "type": "url",
            "id": "trustBadgeslink",
            "label": "Link",
            "info": "Optional"
          }
        ]
      }
    ]
  }
{% endschema %}

index.json文件 #

"trust-badges": {
  "type": "trust-badges",
  "settings": {
    "trustBadgesTitle": "Trust Badge Heading"
  },
  "blocks": {
    "trustBadges-1": {
      "type": "trustBadges",
      "settings": {
        // 可在此填写后台配置的图片/URL，或留空通过主题编辑器设置
      } 
    }
  },
  "block_order": [
    "trustBadges-1"
  ]
},
"order": [
  "image_banner",
  "trust-badges",
  "rich_text",
  "featured_collection",
  "collage",
  "video",
  "multicolumn"
]

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