FROM CACHE - jp_header

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

解決済
hana5
Shopify Partner
5 0 0

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

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

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

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

 

side-bar.jpg

 

 

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

 

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

1 件の受理された解決策

ベストソリューション
Jizo_Inagaki
Shopify Partner
577 236 551

成功

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

 

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

2件の返信2
Jizo_Inagaki
Shopify Partner
577 236 551

成功

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

 

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
hana5
Shopify Partner
5 0 0

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

 

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

ありがとうございます!

 

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

 

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

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