我的Shopify部分中出现随机JSON错误？

Question

我需要在页面上添加部分。 听我说。 我知道这个话题已经被打死了，但是我觉得自己有答案，我只是不完全了解它。

我一直在努力理解并在客户的商店中实施以下教程... https://oak.works/blog/technical/2017/03/23/shopify-sections-editor/

我是Stack Overflow的新手，不是Shopify或主题代码的新手，但是我很环保。 因此，请对我放轻松...到目前为止，经过大量艰苦的研究，我已经确定（猜测）以下步骤是最可能成功的途径：

1. 制作一个新的备用页面模板，我的： page.portfolio.liquid
2. 创建原始部分代码的代码段，只是顶部（无模式），我的snippet-collection-callout.liquid ： snippet-collection-callout.liquid
3. 创建一个新的部分，使用代码（来自本文）将块渲染到该部分中，并调用代码段进行设置，如我认为的教程所示？ （以下称为section-portfolio-page.liquid ）
4. 定义从原始部分collection-callout.liquid到新部分（以下称为section-portfolio-page.liquid ）的架构（复制和粘贴）
5. 使用{% section 'section-portfolio-page' %} page.portfolio.liquid {% section 'section-portfolio-page' %}调用该部分进入新页面模板page.portfolio.liquid
6. 在Shopify管理员中创建一个新页面，“投资组合页面”
7. 将新的备用页面模板分配给page.portfolio并确保导航在那里
8. 通过主题编辑器导航到新页面，该页面应显示一个静态部分，我可以通过块输入和自定义该部分。

但我坚持执行第4步，因为它可以消除此错误：

Error: Invalid JSON in tag 'schema'

我知道页面上的某些部分是可能的。 但是我想哭。 有人可以看看本文，我的步骤以及下面的代码，然后按正确的方向推我吗？ 读完本文后让我知道，如果我的步骤之一不正确，或者只是解释JSON错误在哪里？

我花了大约173个小时的时间才弄清楚这一点，而我的孩子们也没有被逗乐。 不开玩笑。 任何帮助将不胜感激...

这是我尝试重新创建并组合在一起的原始部分，供在页面上使用：

{%- assign collection = collections[section.settings.collection] -%}
{%- assign isEmpty = false -%}

{% if section.settings.collection == blank %}
  {%- assign isEmpty = true -%}
{% endif %}

{% if section.settings.divider %}<div class="section--divider">{% endif %}

<div class="page-width">
  <div class="feature-row feature-row--small-none">

    <div class="feature-row__item feature-row__callout-image">
      <div class="callout-images {% if isEmpty %}blank-state{% endif %}" data-aos="collection-callout">
        {% if isEmpty %}
          {% for i in (1..5) %}
            {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
            <div class="callout-image">{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}</div>
          {% endfor %}
        {% else %}
          {% for product in collection.products limit: 5 %}
            <img src="{{ product | img_url: '300x' }}" alt="{{ product.title }}" class="callout-image">
          {% endfor %}
        {% endif %}
      </div>
    </div>

    <div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }} feature-row__callout-text larger-text">
      {% if section.settings.subtitle %}
        <p class="subtitle">{{ section.settings.subtitle }}</p>
      {% endif %}
      {% if section.settings.title != blank %}
        <h2 class="h3">{{ section.settings.title }}</h3>
      {% endif %}
      <div class="rte">
        {% if section.settings.text != blank %}
          <p>{{ section.settings.text }}</p>
        {% endif %}
      </div>
      {% if section.settings.cta_text1 != blank %}
        <a href="{{ section.settings.cta_link1 }}" class="btn">
          {{ section.settings.cta_text1 }}
        </a>
      {% endif %}
      {% if section.settings.cta_text2 != blank %}
        <a href="{{ section.settings.cta_link2 }}" class="btn">
          {{ section.settings.cta_text2 }}
        </a>
      {% endif %}
    </div>

  </div>
</div>

{% if section.settings.divider %}</div>{% endif %}


{% schema %}
  {
    "name": "Collection callout",
    "class": "index-section",
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection"
      },
      {
        "type": "text",
        "id": "subtitle",
        "label": "Subtitle",
        "default": "Brand new"
      },
      {
        "type": "text",
        "id": "title",
        "label": "Title",
        "default": "Collection callout"
      },
      {
        "type": "textarea",
        "id": "text",
        "label": "Text",
        "default": "Use this section to easily call attention to one of your collections. We'll show photos of the first 5 products."
      },
      {
        "type": "text",
        "id": "cta_text1",
        "label": "Button #1 text",
        "default": "Shop Jackets"
      },
      {
        "type": "url",
        "id": "cta_link1",
        "label": "Button #1 link"
      },
      {
        "type": "text",
        "id": "cta_text2",
        "label": "Button #2 text",
        "default": "Shop All Mens"
      },
      {
        "type": "url",
        "id": "cta_link2",
        "label": "Button #2 link"
      },
      {
        "type": "select",
        "id": "layout",
        "label": "Layout",
        "default": "right",
        "options": [
          {
            "value": "left",
            "label": "Text on left"
          },
          {
            "value": "right",
            "label": "Text on right"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "divider",
        "label": "Show section divider",
        "default": false
      }
    ],
    "presets": [{
      "name": "Collection callout",
      "category": "Collection"
    }]
  }
{% endschema %}

这是我要保存的新section-portfolio-page.liquid的代码，但出现错误：

<div>
 {% for block in section.blocks %}
 <div class="grid-item" {{ block.shopify_attributes }}>
   {% case block.type %}

     {% when 'callout' %}
     {% include 'snippet-collection-callout' %}

   {% endcase %}
 </div>
 {% endfor %}
</div>

{% schema %}
  {
    "blocks": [
      {
    "name": "Collection callout",
    "class": "index-section",
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection"
      },
      {
        "type": "text",
        "id": "subtitle",
        "label": "Subtitle",
        "default": "Brand new"
      },
      {
        "type": "text",
        "id": "title",
        "label": "Title",
        "default": "Collection callout"
      },
      {
        "type": "textarea",
        "id": "text",
        "label": "Text",
        "default": "Use this section to easily call attention to one of your collections. We'll show photos of the first 5 products."
      },
      {
        "type": "text",
        "id": "cta_text1",
        "label": "Button #1 text",
        "default": "Shop Jackets"
      },
      {
        "type": "url",
        "id": "cta_link1",
        "label": "Button #1 link"
      },
      {
        "type": "text",
        "id": "cta_text2",
        "label": "Button #2 text",
        "default": "Shop All Mens"
      },
      {
        "type": "url",
        "id": "cta_link2",
        "label": "Button #2 link"
      },
      {
        "type": "select",
        "id": "layout",
        "label": "Layout",
        "default": "right",
        "options": [
          {
            "value": "left",
            "label": "Text on left"
          },
          {
            "value": "right",
            "label": "Text on right"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "divider",
        "label": "Show section divider",
        "default": false
      }
    ],
    "presets": [{
      "name": "Collection callout",
      "category": "Collection"
    }]
  }
{% endschema %}

Answer 1

您缺少2个括号。

这是正确的JSON模式：

{
   "blocks":[
      {
         "name":"Collection callout",
         "type":"collection",
         "settings":[
            {
               "type":"collection",
               "id":"collection",
               "label":"Collection"
            },
            {
               "type":"text",
               "id":"subtitle",
               "label":"Subtitle",
               "default":"Brand new"
            },
            {
               "type":"text",
               "id":"title",
               "label":"Title",
               "default":"Collection callout"
            },
            {
               "type":"textarea",
               "id":"text",
               "label":"Text",
               "default":"Use this section to easily call attention to one of your collections. We'll show photos of the first 5 products."
            },
            {
               "type":"text",
               "id":"cta_text1",
               "label":"Button #1 text",
               "default":"Shop Jackets"
            },
            {
               "type":"url",
               "id":"cta_link1",
               "label":"Button #1 link"
            },
            {
               "type":"text",
               "id":"cta_text2",
               "label":"Button #2 text",
               "default":"Shop All Mens"
            },
            {
               "type":"url",
               "id":"cta_link2",
               "label":"Button #2 link"
            },
            {
               "type":"select",
               "id":"layout",
               "label":"Layout",
               "default":"right",
               "options":[
                  {
                     "value":"left",
                     "label":"Text on left"
                  },
                  {
                     "value":"right",
                     "label":"Text on right"
                  }
               ]
            },
            {
               "type":"checkbox",
               "id":"divider",
               "label":"Show section divider",
               "default":false
            }
         ]
      }
   ],
   "presets":[
      {
         "name":"Collection callout",
         "category":"Collection"
      }
   ]
}

另外，由于没有类型，我向该块添加了一个类型collection 。