表題に記載した通りですが、
現在PCではサイドバーにグロナビを表示させて、設定したコレクションを表示させています。
そのコレクションの横に、コレクションに設定した画像を表示させたいです。
※linklist.titleにあわせて、collection.imageを表示させたいといった方がよいでしょうか。
動的に上記のような対応は可能なものでしょうか、それとも１つ１つliタグでimgとテキストリンクを囲っていくしかないでしょうか。
恐れ入りますが、こちらご回答いただけますと幸甚です。
Topic summary
Shopifyのナビゲーション（linklist）で、各コレクション名（linklist.title）の横にそのコレクション画像（collection.image）を動的に表示したいという相談。画像例の添付あり。
解法はLiquid（Shopifyのテンプレート言語）で、linklistのfor文内に条件分岐を入れて画像を出力すること。image_urlとimage_tagフィルタを用いてレンダリング。
- link.type が ‘collection_link’ であること
- link.object.image（コレクション画像）が設定されていること
提示されたロジックと関連ドキュメントの参照により、依頼者は問題を解決済みと報告。実装のポイント（条件の組み合わせ）が学びになった旨のフィードバックあり。
最新動向として、別参加者が「メニュー横に画像を出すテーマカスタムの依頼方法」についての案内を求めており、これにはまだ具体的な回答がなく、スレッドは一部継続中。
linklistのfor文の中で以下のようにすれば表示されるかなと思います。
{% if link.type == 'collection_link' and link.object.image %}
{{ link.object.image| image_url: width: 150 | image_tag }}
{% endif %}
linklisitから個別のlinkオブジェクトを取り出して扱う際に、以下両方が真であれば画像を出力するという流れとなります。
- link.typeで対象がコレクションオブジェクトか否か
- 対象コレクションに画像が設定されているか否か
各部の詳細はドキュメントの以下などで確認ください。
参考:
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
1 Like
こちらお礼が遅れてしまい申し訳ございません。
おかげさまで解決することができました。
ありがとうございます！
- link.typeで対象がコレクションオブジェクトか否か
- 対象コレクションに画像が設定されているか否か
上記を組み合わせることで実装できるというのも大変勉強になりました！
重ねて御礼申し上げます。
こちらのメニューの横に画像を出すテーマのカスタムを依頼したいのですが、どのようにすればよいかご教授ください。よろしくお願い致します。