Использование For L oop в Liquid для создания аккордеона FAQ - PullRequest
Новая
       87

Использование For L oop в Liquid для создания аккордеона FAQ

0 голосов
/ 16 июня 2020

Я новичок в 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%}

Я знаю, что это из-за того, что forl oop используется для идентификатора вкладки, я просто не знаю, как его переписать, чтобы он работал конкретно с экземпляром раздела, который мне нужен.

Вот и остальная часть схемы: 

    {% 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 %}

Вот изображение, помогающее визуализировать проблему:

1 Ответ

0 голосов
/ 18 июня 2020

Я рекомендую следовать этому руководству: https://easycodeguide.com/build-customizable-faqs-page-using-section-shopify.html

Он позволяет использовать разделители внутри него, а затем имеет отдельные случаи для либо цикла через разделитель, либо Q / A.

...