Liquid, JavaScript, themes, sales channels
Hello everyone,
Recently I have been trying to built an accordian FAQ page for my client. I have read so many articles and made so many experiments but I have been constantly failing to build the section. I would appreciate if you could help me how to get started with sections in order to satisfy my client's expectations. I have a decent knowledge with liquid sections but I am feeling there is something missing so maybe one of you could help me.
Here is what the section I want to create llok like. The styling won't be the same, just the structure matters for me.
Any response would be appreciated.
Thanks in advance!!!
I usually make one 'faq' section with 2 block types. One block type for the category and one block type for the FAQ. Maybe something like this:
"blocks: [
{
"type": "category",
"name": "Category",
"settings": [
{
"type": "text",
"id": "title",
"label": "Category Name"
}
]
},
{
"type": "faq",
"name": "FAQ",
"settings": [
{
"type": "text",
"id": "title",
"label": "Question"
},
{
"type": "richtext",
"id": "answer",
"label": "Answer"
},
{
"type": "text",
"id": "category",
"label": "Category"
}
]
}
]
Use javascript to show/hide the right FAQs based on the data-category value.
{%- liquid for block in section.blocks
if block.type == 'category'
assign categoryHandle = block.settings.title | handle
capture categories
echo categories
echo '<div class="category" data-category="' | append: categoryHandle | append: '">'
echo block.settings.title
echo '</div>
endcapture
endif
if block.type == 'faq'
assign faqCategoryHandle = block.settings.category | handle
capture faqs
echo faqs
echo '<div class="faq" data-category="' | append: faqCategoryHandle | append: '"><div class="faq__question">'
echo block.settings.title
echo '</div><div class="faq__answer">'
echo block.settings.answer
echo '</div></div>'
endcapture
endif
endfor -%}
<div class="faq-categories">
{{- categories -}}
</div>
<div class="faq-content">
{{- faqs -}}
</div>
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024