FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

解決済

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

hana5
Shopify Partner
6 0 0

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

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

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

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

 

side-bar.jpg

 

 

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

 

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

1 件の受理された解決策

Jizo_Inagaki
Shopify Partner
1100 410 716

成功

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や指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

3件の返信3

Jizo_Inagaki
Shopify Partner
1100 410 716

成功

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
6 0 0

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

 

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

ありがとうございます!

 

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

 

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

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

plustech
訪問者
1 0 0

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