Liquid、JavaScriptなどに関する質問
Dawnを利用しています。
すべての商品タグをセクションに一覧表示するところまでは実装できましたが、商品タグの数が100個ほどあって多いので、出力数を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 %}
解決済! ベストソリューションを見る。
成功
『さらに表示』ボタンで非同期にタグを取得などをするとめんどくさいですが、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
成功
『さらに表示』ボタンで非同期にタグを取得などをするとめんどくさいですが、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
ありがとうございます!
カウンターを作成すればよかったんですね。「さらに表示」ボタンが動作しなかったので調べてみます。
すぐご回答いただけて大変助かりました。
jQueryを使用しなくてもプレーンなjavascriptで書けばモダいないですが、jQueryを使用しする場合、scriptの使用箇所でjQueryが読み込まれているか確認してください。
表示するセレクタの指定もul li と他の物まで適用されてしますのでクラス名などをつけて使用してください。
補足情報ありがとうございます。
自分の理解が足らずうまくできなかったので一旦他の方法で対応しました。また時間が取れた時にご教示頂いた方法で試してみます。
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024