Shopify Liquid アコーディオンメニュー

Liquid でのコレクションメニューからアコーディオンメニュー の作り方覚書。

link.links サブメニューが Blank でないなら Childlinkからサブメニュー表示

Link.links サブメニューがない場合 else で親メニューだけ表示。collapse のアイコンなしでそのままリンク herf=”{{link.url}}”

アコーディオンヘッダーの開き。forloop.index !=1 でない場合 collapsedで閉じる。

アコーディオンヘッダーが最初の場合 forloop.firstの場合 class =”collapse show”になる。

使用Liquid Object link.links Childlink link.title link.url


        <div id="accordion">
          {% for link in linklists[section.settings.category].links %}

          {%- comment -%}
          link.links (サブメニュー)が空でないなら Childlink からサブメニュー
          link.links (サブメニュー)がない場合は else で親メニューだけ。表示
          {%- endcomment -%}

          {% if link.links != blank %}
          <div class="card">
            <div class="card-header" id="heading-{{link.title}}">
              <h5>
                <a href=""
                  class="{% if forloop.index !=1 %} collapsed {% endif %}"
                  data-toggle="collapse" data-target="#collapse-{{link.title}}"
                  aria-expanded="true" aria-controls="collapse-{{link.title}}">
                  {{link.title}}
                </a>
              </h5>
            </div>

            <div id="collapse-{{link.title}}" class="collapse {% if forloop.first  %} show {% endif %}" aria-labelledby="heading-{{link.title}}"
              data-parent="#accordion">
              <div class="card-body">
                <ul class="list-unstyled">
                  {% for childlink in link.links %}
                  <li><a href="{{childlink.url}}">{{childlink.title}}</a>
                  </li>
                  {% endfor %}
                </ul>
              </div>
            </div>
          </div>

          {% else %}

          <div class="card">
            <div class="card-header" id="heading-{{link.title}}">
              <h5>
                <a href="{{link.url}}" class="no-icon">
                  {{link.title}}
                </a>
              </h5>
            </div>

          </div>

          {% endif %}

          {% endfor %}

        </div>

JSON はこんな感じ。 Type: “link_list “で作ったメニューが選べる。

{% schema %}
{
"name": "コレクションページ",
"settings": [
{
"type": "link_list",
"id": "category",
"label": "Collection Dropdown"
}
]
}
{% endschema %}

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top