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
こちらお礼が遅れてしまい申し訳ございません。
おかげさまで解決することができました。
ありがとうございます!
上記を組み合わせることで実装できるというのも大変勉強になりました!
重ねて御礼申し上げます。
こちらのメニューの横に画像を出すテーマのカスタムを依頼したいのですが、どのようにすればよいかご教授ください。よろしくお願い致します。
Shopifyのチェックアウトは世界一コンバージョン率が高いチェックアウトです。2023年4月に実施された世界3大手マネジメントコンサルティング会社の共同調査によると、Sho...
By Minami_ Apr 11, 2024Shopifyのルーツ Shopifyは、スノーボードをオンラインで販売したいという夢を叶えるために2004年に誕生しました。当時は大企業だけがインターネットで販売す...
By JapanGuru Apr 7, 2024リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024