我的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/

我是全新的堆栈溢出，不是全新的Shopify或主题代码，但我很绿。所以，请把它容易对我......到目前为止，很多痛苦的研究，我已经确定（猜测），以下步骤是最有可能的途径，这将导致成功：

1. making a new alternate page template, mine: page.portfolio.liquid
2. creating a snippet of the original section's code, just the top part (sans schema), mine: snippet-collection-callout.liquid
3. 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)
4. defining the schema (copy and paste) from the original section collection-callout.liquid to the new section (BELOW, called section-portfolio-page.liquid)
5. calling the section into the new page template page.portfolio.liquid with {% section 'section-portfolio-page' %}
6. creating a new page in Shopify admin, "Portfolio Page"
7. assigning the new alternate page template to page.portfolio and ensuring navigation is there
8. navigate to the new page through theme editor, which should show a static section that I can enter and customize via blocks.

但我m卡在步骤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来将挡，因为没有类型。