ナビゲーションメニュー、コレクションを設定。linklist.titleで表示させたコレクション名の横に、そのコレクションの画像を表示させたい。

日本語 ディスカッション 技術的なQ＆A
1

表題に記載した通りですが、

現在PCではサイドバーにグロナビを表示させて、設定したコレクションを表示させています。

そのコレクションの横に、コレクションに設定した画像を表示させたいです。

※linklist.titleにあわせて、collection.imageを表示させたいといった方がよいでしょうか。

side-bar.jpg
side-bar.jpg267×343 6.68 KB

動的に上記のような対応は可能なものでしょうか、それとも１つ１つliタグでimgとテキストリンクを囲っていくしかないでしょうか。

恐れ入りますが、こちらご回答いただけますと幸甚です。

2

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

3

こちらお礼が遅れてしまい申し訳ございません。

おかげさまで解決することができました。

ありがとうございます！

  • link.typeで対象がコレクションオブジェクトか否か
  • 対象コレクションに画像が設定されているか否か

上記を組み合わせることで実装できるというのも大変勉強になりました！

重ねて御礼申し上げます。

4

こちらのメニューの横に画像を出すテーマのカスタムを依頼したいのですが、どのようにすればよいかご教授ください。よろしくお願い致します。