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

**URL:** <https://community.shopify.com/t/topic/74920>\
**Category:** 技術的なQ＆A\
**Created:** [October 29, 2021, 1:53am UTC](https://community.shopify.com/t/topic/74920 "2021-10-29T01:53:29Z")\
**Posts on this page:** 5\
**Page:** 1

## AI-generated summary

Shopify（Dawn）で商品タグが約100件あり、初期表示を30件に制限し「さらに表示」で全件を見せたいという要望。Liquidだけで件数制御できるか不明として相談。

提案された解決策:
- Liquidのループにカウンター（例: tag_cnt）を設け、30件までは通常表示、31件以降には非表示用のクラス/inline style（display:none）を付与。
- 「さらに表示」ボタンで、jQueryまたはプレーンJavaScriptにより非表示要素を表示する実装を推奨。
- 非同期でタグを追加取得する方式は煩雑だが、全タグを1リクエストで取得する参考資料リンクが提示。

実装上の注意:
- jQueryを使う場合は当該セクションでの読み込み有無を確認。プレーンJavaScriptでも代替可。
- セレクタは ul li のような広範囲指定ではなく、専用クラスでスコープする。

進捗・結論:
- 質問者はカウンター方式の方向性を理解したが、「さらに表示」動作でつまずき、一旦は別方法で対応。
- 後日あらためて提案手法を試す予定。最終解決には未達で継続中。

<div class="post-metadata">

**Author:** ![nishi-ec](https://avatars.discourse-cdn.com/v4/letter/n/f6c823/32.png) [@nishi-ec](https://community.shopify.com/u/nishi-ec)\
**Post date:** [October 29, 2021, 1:53am UTC](https://community.shopify.com/t/topic/74920/1 "2021-10-29T01:53:29Z")

</div>

Dawnを利用しています。

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

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

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

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

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

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

```markup

  

    ## {{ section.settings.title | escape }}
  

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

  
    

        {% for tag in tag_array %}
            - #{{ tag }}
        {% endfor %}
    

  

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

```

---

<div class="post-metadata">

**Author:** ![Sota\_yohaku](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Sota\_yohaku](https://community.shopify.com/u/Sota_yohaku)\
**Post date:** [October 29, 2021, 8:35am UTC](https://community.shopify.com/t/topic/74920/2 "2021-10-29T08:35:22Z")

</div>

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

```ruby

    

    {% assign tag_cnt = 1 %}
        {% for tag in tag_array %}
            {% if tag_cnt < 31 %}
            - #{{ tag }}

            {% else %}
            - #{{ tag }}
            {% endif %}
            {% assign tag_cnt = tag_cnt | plus: 1 %}
        {% endfor %}
    

  

  

  

```

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

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

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

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

---

<div class="post-metadata">

**Author:** ![nishi-ec](https://avatars.discourse-cdn.com/v4/letter/n/f6c823/32.png) [@nishi-ec](https://community.shopify.com/u/nishi-ec)\
**Post date:** [October 29, 2021, 9:50am UTC](https://community.shopify.com/t/topic/74920/3 "2021-10-29T09:50:34Z")

</div>

ありがとうございます！

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

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

---

<div class="post-metadata">

**Author:** ![Sota\_yohaku](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Sota\_yohaku](https://community.shopify.com/u/Sota_yohaku)\
**Post date:** [October 30, 2021, 8:36am UTC](https://community.shopify.com/t/topic/74920/4 "2021-10-30T08:36:03Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![nishi-ec](https://avatars.discourse-cdn.com/v4/letter/n/f6c823/32.png) [@nishi-ec](https://community.shopify.com/u/nishi-ec)\
**Post date:** [November 1, 2021, 12:33pm UTC](https://community.shopify.com/t/topic/74920/5 "2021-11-01T12:33:21Z")

</div>

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

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