【发布时间】：2018-05-31 10:24:15
【问题描述】：
我需要向页面添加部分。听我说。我知道这个话题已经被打死了，但我觉得我有答案，我只是不知道如何理解它。
我一直在努力理解并在我客户的商店中实施以下教程......https://oak.works/blog/technical/2017/03/23/shopify-sections-editor/
我是 Stack Overflow 的新手，不是 Shopify 或主题代码的新手，但我很年轻。所以请放轻松...到目前为止，经过大量痛苦的研究，我已经确定（猜测）以下步骤是最有可能取得成功的途径：
- 制作一个新的备用页面模板，我的：
page.portfolio.liquid- 创建原始部分代码的 sn-p，只是顶部（无模式），我的：
snippet-collection-callout.liquid- 创建一个新部分，使用代码（来自文章）将块渲染到部分中并调用 sn-p 进行设置，如教程中所示？ （以下，称为
section-portfolio-page.liquid）- 定义架构（复制和粘贴）从原始部分
collection-callout.liquid到新部分（下面，称为section-portfolio-page.liquid）- 将部分调用到新页面模板
page.portfolio.liquid和{% section 'section-portfolio-page' %}- 在 Shopify 后台创建一个新页面“产品组合页面”
- 将新的备用页面模板分配给
page.portfolio并确保导航存在- 通过主题编辑器导航到新页面，该页面应显示一个静态部分，我可以通过块输入和自定义。
但我被困在第 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 %}
【问题讨论】：
标签： ruby-on-rails json shopify liquid