Zufälliger JSON-Fehler in meiner Shopify-Sektion?

Question

Ich muss Abschnitte zu einer Seite hinzufügen. Lass mich ausreden. Ich weiß, dass dieses Thema zu Tode geprügelt wurde, aber ich habe das Gefühl, dass ich die Antwort habe, ich weiß einfach nicht, wie ich es verstehen soll.

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/

Ich bin ganz neu Überlauf Stack, nicht brandneu zu Shopify oder dem Thema Code, aber ich bin sehr grün. Also bitte nehmen Sie es einfach auf mir ... Bis jetzt, nach vielen schmerzhaften Forschung, ich habe bestimmt (vermuteten), dass die folgenden Schritte der wahrscheinlichste Weg sind, die zum Erfolg führen werden:

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.

Aber ich m steckte auf Schritt 4, weil es diesen Fehler zurück zu treten:

Error: Invalid JSON in tag 'schema'

ich weiß, dass Abschnitte auf den Seiten möglich ist. Aber ich möchte weinen. Könnte sich jemand den Artikel, meine Schritte und den Code unten ansehen und mich in die richtige Richtung schubsen? Lassen Sie mich nach dem Lesen wissen, wenn einer meiner Schritte irgendwie falsch ist, oder einfach nur erklären, wo der JSON-Fehler ist?

Ich bin etwa 173 Stunden in dem Versuch, herauszufinden, und meine Kinder sind nicht amüsiert. Kein Scherz. Jede Hilfe wäre sehr dankbar ...

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

Sie fehlten 2 Klammern.

Hier ist die korrekte JSON Schema:

{ 
    "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" 
     } 
    ] 
} 

Zusätzlich habe ich eine Art collection auf den Block, da kein Typ war.