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.

しかし、私は」：だから私にそれが簡単に取るPLEASE ...これまでのところ、後に多くの痛みを伴う研究は、私は、次の手順が成功につながる可能性が最も高いルートであることを（推測）に決定しましたこのエラーを戻しているので、手順4でスタックされています。

Error: Invalid JSON in tag 'schema'

私はページ上のセクションが可能であることを知っています。しかし、私は泣きたい。誰もが記事、私のステップ、下のコードを見て、正しい方向に私を振り向けることができますか？何とか私のステップの1つが間違っている場合、または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つのブラケットを欠落していました。何種類がなかったので、また

{ 
    "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を追加：

ここ正しいJSONスキーマです。