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
こちらお礼が遅れてしまい申し訳ございません。
おかげさまで解決することができました。
ありがとうございます!
上記を組み合わせることで実装できるというのも大変勉強になりました!
重ねて御礼申し上げます。
こちらのメニューの横に画像を出すテーマのカスタムを依頼したいのですが、どのようにすればよいかご教授ください。よろしくお願い致します。
ユーザー | ランク |
---|---|
36 | |
11 | |
7 | |
6 | |
6 |
すべてのShopifyアカウントはデフォルトではmyshopify.comのURLと関連付けられており、これはアカウント設定時に使用したビジネス名に基づいて作成されます。しかし、オ...
By Nina_13 Nov 26, 2023このトピックは英語版コミュニティの投稿:Shopify Web Pixel Manager Sandbox FAQの日本翻訳です。
By Mirai Nov 19, 2023Shopifyの管理画面では、商品ごとや配送元のロケーション(倉庫)ごとにカスタム配送料を設定することができます。特に購入金額による送料無料設定は、顧客の購買意欲を高める効果的な手...
By Alex06 Nov 5, 2023