Liquid、JavaScriptなどに関する質問
表題に記載した通りですが、
現在PCではサイドバーにグロナビを表示させて、設定したコレクションを表示させています。
そのコレクションの横に、コレクションに設定した画像を表示させたいです。
※linklist.titleにあわせて、collection.imageを表示させたいといった方がよいでしょうか。
動的に上記のような対応は可能なものでしょうか、それとも1つ1つliタグでimgとテキストリンクを囲っていくしかないでしょうか。
恐れ入りますが、こちらご回答いただけますと幸甚です。
解決済! ベストソリューションを見る。
成功
linklistのfor文の中で以下のようにすれば表示されるかなと思います。
{% if link.type == 'collection_link' and link.object.image %}
{{ link.object.image| image_url: width: 150 | image_tag }}
{% endif %}
linklisitから個別のlinkオブジェクトを取り出して扱う際に、以下両方が真であれば画像を出力するという流れとなります。
各部の詳細はドキュメントの以下などで確認ください。
参考:
https://shopify.dev/api/liquid/objects/linklist#linklist-links
https://shopify.dev/api/liquid/objects/link#link-type
https://shopify.dev/api/liquid/objects/link#link-object
https://shopify.dev/api/liquid/objects/collection#collection-image
https://shopify.dev/api/liquid/filters/html-filters#image_tag
成功
linklistのfor文の中で以下のようにすれば表示されるかなと思います。
{% if link.type == 'collection_link' and link.object.image %}
{{ link.object.image| image_url: width: 150 | image_tag }}
{% endif %}
linklisitから個別のlinkオブジェクトを取り出して扱う際に、以下両方が真であれば画像を出力するという流れとなります。
各部の詳細はドキュメントの以下などで確認ください。
参考:
https://shopify.dev/api/liquid/objects/linklist#linklist-links
https://shopify.dev/api/liquid/objects/link#link-type
https://shopify.dev/api/liquid/objects/link#link-object
https://shopify.dev/api/liquid/objects/collection#collection-image
https://shopify.dev/api/liquid/filters/html-filters#image_tag
こちらお礼が遅れてしまい申し訳ございません。
おかげさまで解決することができました。
ありがとうございます!
上記を組み合わせることで実装できるというのも大変勉強になりました!
重ねて御礼申し上げます。
こちらのメニューの横に画像を出すテーマのカスタムを依頼したいのですが、どのようにすればよいかご教授ください。よろしくお願い致します。
Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024