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

Question

我需要向页面添加部分。听我说。我知道这个话题被打死了，但我觉得我有答案，我只是完全不知道如何理解它。

I have been working hard to understand and implement the following tutorial in my client's store...... https://oak.works/blog/technical/2017/03/23/shopify-sections-editor/

我是 Stack Overflow 的新手，不是 Shopify 或主题代码的新手，但我很新手。所以请放轻松……到目前为止，经过大量痛苦的研究，我确定（猜测）以下步骤是最有可能取得成功的途径：

making a new alternate page template, mine: page.portfolio.liquid

creating a snippet of the original section's code, just the top part (sans schema), mine: snippet-collection-callout.liquid

creating a new section, using the code (from the article) to render blocks into the section and calling the snippet for settings as shown in the tutorial I think? (BELOW, called section-portfolio-page.liquid)

defining the schema (copy and paste) from the original section collection-callout.liquidto the new section (BELOW, called section-portfolio-page.liquid)

calling the section into the new page template page.portfolio.liquid with {% section 'section-portfolio-page' %}

creating a new page in Shopify admin, "Portfolio Page"

assigning the new alternate page template to page.portfolioand ensuring navigation is there

navigate to the new page through theme editor, which should show a static section that I can enter and customize via blocks.

但是我卡在了第 4 步，因为它正在回滚这个错误：

Error: Invalid JSON in tag 'schema'

我知道页面上的部分是可能的。但是我想哭。任何人都可以看看这篇文章、我的步骤和下面的代码，然后向正确的方向推动我吗？如果我的某个步骤不知何故错误，请在阅读本文后告诉我，或者甚至只是解释 JSON 错误在哪里？

我花了大约 173 个小时来解决这个问题，但我的孩子们并不觉得好笑。不开玩笑。任何帮助将不胜感激...

Here is the original section I am trying to recreate and piece together, for use on a page:

{%- 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 %}

Here is the code for the new section-portfolio-page.liquid I am trying to save, but getting an error for:

<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，因为没有类型。

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

Random JSON error in my Shopify section?

json

ruby-on-rails

liquid

shopify