1

我对 Liquid 和一般的编码都很陌生。我找到了一个教程，帮助我为我的 Shopify 页面构建了一个自定义部分，该部分允许我将问题和答案添加到常见问题解答页面。

我的目标是有不同类别的问题。使用以下代码，当单击非原始实例中的问题（选项卡）时，它会打开原始部分中的选项卡，而不是我正在编辑的特定部分。

<div class="grid-item-100">
<div class="faq">
{%for block in section.blocks%}
  <div class="tab">
        <input type="checkbox" id="tab{{forloop.index}}" class="tab-toggle">
    <label for="tab{{forloop.index}}" class="tab-label">{{block.settings.question}}</label>
        <div class="tab-content">{{block.settings.answer}}</div>
  </div>
  {%endfor%}

我知道这是因为 forloop 被用于选项卡 ID，我只是不知道如何重写它以使其专门用于我想要的部分的实例。

这里也是架构的其余部分：

    {% schema %}
  {
    "name": "FAQ-SECTION-2",
    "settings": [],
    "blocks" : [
        {
            "type":"text",
            "name":"Question/Answer",
            "settings":[
                {
                    "id":"question",
                    "type":"text",
                    "label":"the question"
                },
                {
                    "id":"answer",
                    "type":"richtext",
                    "label":"answer"
                }
            ]
        }
    ]
  }
{% endschema %}

这是帮助可视化问题的图像：

4

1 回答 1

1

我建议遵循本教程：https ://easycodeguide.com/build-customizable-faqs-page-using-section-shopify.html

它允许在其中使用分隔符，然后有单独的案例，用于循环通过分隔符或 Q/A。

于 2020-06-18T17:27:38.823 回答