![](/img/trans.png)
[英]Multi-level jQuery tabs: secondary level links not opening associated tab section
[英]Multi Level Shopify Section
我正在尝试建立一个产品页面的部分管理部分,商家可以在其中输入一堆基于产品类型的常见问题解答问题/答案项目。 该模型有 3 个不同的类别,每个类别都有自己的常见问题解答列表。
我对如何动态添加每个部分下的常见问题解答数量有些困惑(例如,公式可能有 9 个常见问题解答,但粥可能有 2 个)。
目前,下面的代码只是添加了一堆按钮,并在 'schema' 中返回了一个“无效的 JSON 标签”。
根据我的经验,似乎部分块只有 1 级深。 有没有办法创建一个部分,并在该部分中输入多个项目并将它们链接在一起?
[shopify 部分截图][ https://imgur.com/a/LcWEXZ6]
[模型][ https://imgur.com/a/BABFRwK]
为简洁起见,我删除了常见问题手风琴的代码。
<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"
}
]
}
]
}
]
}
简短的回答是 -不。
部分只允许块的单一级别。
但是您可以通过一些额外的代码来克服这个限制。
您为每个块创建一个额外的文本字段,您将在其中输入产品类型,当您循环这些块时,您必须检查文本字段是否与产品类型相同。
例子:
"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 块就越多,并且在某些时候管理它们将是地狱。 为此,最好使用具有可重复字段的元字段 APP。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.