商品タグ一覧をセクションに追加したが、さらに表示数をコントロールしたい

[nishi-ec]

Dawnを利用しています。

すべての商品タグをセクションに一覧表示するところまでは実装できましたが、商品タグの数が１００個ほどあって多いので、出力数を30までなどに絞って、「さらに表示」のボタンを押すと全ての商品タグが表示されるような仕組みに改善したいと思っています。

商品タグの出力数をコントロールする方法が調べてもたどり着けなかったのでアドバイス頂けると助かります。

現状のSectionsフォルダに作成済みのliquidファイルの中身を最下に記載します。

<ul>内の「tag_array」の配列の数を　＞30　などで指定して、条件分岐する方法で検討しましたが、配列の数を取得して条件設定する方法がわかりませんでした。

そもそもこの方法でできるのかも不明なので、もし他の方法があればご教示頂けると幸いです。

よろしくお願いいたします。

<div class="perfume-tags-wrapper page-width{% if section.settings.swipe_on_mobile == true %} page-width-desktop{% endif %}{% if section.settings.title == blank %} no-heading{% endif %}{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} no-mobile-link{% endif %}">
  <div class="title-wrapper-with-link{% if section.settings.swipe_on_mobile == true %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %}{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}">
    <h2 class="collection-list-title">{{ section.settings.title | escape }}</h2>
  </div>
{% assign tag_list = "" %}

{% for product in collections.all.products %}
	{% for tag in product.tags %}
		{% assign tag_list = tag_list |  append: "," | append: tag %}
	{% endfor %}
{% endfor %}

{% assign tag_list = tag_list | remove_first: "," %}
{% assign tag_array = tag_list | split: "," | uniq %}

  <div>
    <ul>
        {% for tag in tag_array %}
            <li style="background-color: {{ section.settings.background-tag }}; border-radius: 0.5rem"><a href="/collections/all/{{ tag }}">#{{ tag }}</a></li>
        {% endfor %}
    </ul>
  </div>
</div>
{% schema %}
  {
    "name": "タグ表示",
    "tag": "section",
    "settings": [
    {
      "type": "text",
      "id": "title",
      "default": "香りから選ぶ",
      "label": "見出し"
    },
    {
      "type": "color",
      "id": "background-tag",
      "label": "タグの背景色",
      "default": "#eeeeee"
    }
],
  "presets": [
    {
      "name": "タグ表示",
      "category": "リスト"
    }
  ]
  }
{% endschema %}

{% stylesheet %}
.perfume-tags-wrapper{
    font-size: 1.4rem;
}

.perfume-tags-wrapper ul{
    list-style: none;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.perfume-tags-wrapper li{
    margin: 0.4rem 0.8rem;
    padding: 0.2rem 0.4rem;
}
.perfume-tags-wrapper li a{
	text-decoration: none;
	color:inherit;
}

{% endstylesheet %}

{% javascript %}
{% endjavascript %}

[Sota_yohaku · Accepted solution]

『さらに表示』ボタンで非同期にタグを取得などをするとめんどくさいですが、30個以外非表示にしてjQueryかなにかでボタンが押されたら表示にすればできると思います。

 <div>
    <ul>
    {% assign tag_cnt = 1 %}
        {% for tag in tag_array %}
            {% if tag_cnt < 31 %}
            <li style="background-color: {{ section.settings.background-tag }}; border-radius: 0.5rem"><a href="/collections/all/{{ tag }}">#{{ tag }}</a></li>
            {% else %}
            <li style="background-color: {{ section.settings.background-tag }}; border-radius: 0.5rem; display: none"><a href="/collections/all/{{ tag }}">#{{ tag }}</a></li>
            {% endif %}
            {% assign tag_cnt = tag_cnt | plus: 1 %}
        {% endfor %}
    </ul>
  </div>

  <button id="more">さらに表示</button>

  <script>
  $(function(){
    $('#more').click(function(){
      $('ul li').css('display','inline-block');
    })
  });
  </script>

一切テストしていないので動作するか分からないですが、『tag_array』のループ中にカウンターをつけて、30以下であれば表示、31以上であればdisplayで非表示にします。

あとはjQueryで表示すればそれっぽくなると思います。

最初に指定した30個を取得・表示し、さらに表示ボタンで非同期にタグを取得し追加するみたいなのをするのは大変だと思いますが以下の記事が参考になると思います。

https://stackoverflow.com/questions/60920840/get-all-tags-used-by-a-shopify-shop-in-one-request

[nishi-ec]

ありがとうございます！

カウンターを作成すればよかったんですね。「さらに表示」ボタンが動作しなかったので調べてみます。

すぐご回答いただけて大変助かりました。

[Sota_yohaku]

jQueryを使用しなくてもプレーンなjavascriptで書けばモダいないですが、jQueryを使用しする場合、scriptの使用箇所でjQueryが読み込まれているか確認してください。

表示するセレクタの指定もul li と他の物まで適用されてしますのでクラス名などをつけて使用してください。

[nishi-ec]

補足情報ありがとうございます。

自分の理解が足らずうまくできなかったので一旦他の方法で対応しました。また時間が取れた時にご教示頂いた方法で試してみます。