多层 Shopify 部分

Question

我正在尝试构建产品页面的一个部分管理部分，商家可以在其中输入一堆基于产品类型的常见问题 question/answer 项目。该模型有 3 个不同的类别，每个类别都有自己的常见问题解答列表。

我对如何动态添加每个部分下的常见问题解答数量有些困惑（例如，公式可能有 9 个常见问题解答，但粥可能有 2 个）。

目前，下面的代码只是添加了一堆按钮，returns一个“无效的JSON标签在'schema'。

根据我的经验，部分块似乎只深入 1 级。有没有办法创建一个部分，并在该部分中输入多个项目并将它们 link 放在一起？

[shopify 部分的屏幕截图][https://imgur.com/a/LcWEXZ6]

为简洁起见，我删除了手风琴常见问题解答的代码。


<div class="faqs">
    {% for block in section.blocks %}
    {%- assign titleIndex = 0 -%}   

        {% if block.type == "faqHeading" %}
          <h2 class="title faq--heading">{{ block.settings.faqHeading }}</h2>
        {% endif %}

        <div data-tab-component>
          <div role="tablist" aria-label="Tabbed content">
            {% if block.type == "faqSection" %}
                <button role="tab" 
                        aria-selected="true" 
                        aria-controls="tab1-content" 
                        id="tab1"
                        class="tab__button">
                  {{ block.settings.faqSection }}
                </button>
            {% endif %}
        </div>

      {%- assign contentIndex = 0 -%}

            {% if block.type == "faqSection" %}     
                {%- assign contentIndex = 0 | plus: 1 -%}   
                <section id="faq__tab-content tab{{ contentIndex }}-content" 
                        role="tabpanel" 
                        aria-labelledby="tab{{ contentIndex }}" 
                        tabindex="0"
                        aria-hidden="true">

                        {%- assign faqIndex = 0 -%}
                        {% for block in section.blocks %}
                            {% if block.type == "FAQQandA" %}
                                <dl class="faqAccordion">
                                    {% for block in section.blocks %}
                                        {%- assign faqIndex = 0 | plus: 1 -%}
                                        <dt><button type="button" aria-controls="panel-01" aria-expanded="true">{{ block.settings.faqQuestion }}</button></dt>

                                        <dd id="panel-0{{ faqIndex }}" aria-hidden="false">
                                          {{ block.settings.faqAnswer }}
                                        </dd>
                                    {% endfor %}
                                </dl>
                            {% endif %}
                        {% endfor %}
                </section>
            {% endif %}
    {% endfor %}
</div>

{% schema %}
{
    "blocks": [
        {
            "name": "FAQ Heading",
            "type": "FAQHeading",
            "limit": 1,
            "settings": [
                {
                    "type": "text",
                    "id": "faqHeading",
                    "label": "FAQ Title",
                    "default": "FAQs"
                }
            ]
        },
        {
          "name": "FAQ Section ",
          "type": "faqSection",
          "settings" : [
                {
                    "type": "text",
                    "id": "faqSection",
                    "label": "FAQ Product Type"
                }
            ],
            "blocks": [
                {
                    "type": "text",
                    "name": "Question"
                    "settings" [
                        {
                            "type": "text",
                            "label": "Enter Question",
                            "id": "faqQuestion",
                            "default": "FAQ question content goes here"
                        },
                        {
                            "type": "textarea",
                            "label": "Enter Answer",
                            "id": "faqAnswer",
                            "default": "Lorem ipsum dolor amit icit"
                        }
                    ]
                } 
            ]
        }
    ]
}

Answer 1

简短的回答是 - 否。

部分只允许一个级别的块。

但是您可以通过一些额外的代码来克服这个限制。

您为每个块创建一个额外的文本字段，您将在其中输入产品类型，当您循环块时，您将必须检查文本字段是否等于产品类型。

示例：

"blocks": [
    {
        "type": "text",
        "name": "Question"
        "settings" [
            {
                "type": "text",
                "label": "Type",
                "id": "type"
            },
            {
                "type": "text",
                "label": "Enter Question",
                "id": "faqQuestion",
                "default": "FAQ question content goes here"
            },
            {
                "type": "textarea",
                "label": "Enter Answer",
                "id": "faqAnswer",
                "default": "Lorem ipsum dolor amit icit"
            }
        ]
    } 
]

以及有问题的循环。

{%- for block in section.blocks -%}
  {%- assign type = block.settings.type -%}
  {%- if type == product.type -%}
    ... Do your QA logic here
  {%- endif -%}
{%- endfor -%}

请记住，这种方法对管理员不友好，因为您拥有的产品越多，您的 QA 块就越多，并且在某些时候管理它们会很困难。最好使用具有可重复字段的元字段应用程序。

多层 Shopify 部分

Multi Level Shopify Section

javascript

ruby-on-rails

liquid

shopify

shopify-template