お世話になっております。
ギフトカード の画像について、オプションごとに変更したいのですが方法はありますか？
商品の値段で判定する方法をみつけましたが(以下コードです)、それだと値段が同じ場合に正しく動作しません。
・gift_card.liquid
idみたいな識別子で判断したいのですが、gift_card.productのオブジェクトはそのようなプロパティがないように思えます。
よろしくお願いします。実際に試していないのであっているかわかりませんが、variant objectまで取れているのであれば以下のヘルプにあるidやskuの値も取れると思います。
https://shopify.dev/docs/themes/liquid/reference/objects/variant/
1 Like
コメントありがとうございます。
{% if variant.price == gift_card.product.price %}
説明不足で申し訳ないのですが、
おっしゃるとおり、variantオブジェクトには、idがあり識別できそうです。
しかしgift_card.product のオブジェクトの中に、今開いているギフトカードのidがなく、判断ができなそうで困っているという状況です。
gift_card.productについて、何かギフトカード の商品を特定できるプロパティが含まれていますでしょうか？
そのほか、他のやり方で何か方法があればご教示いただけますと幸いです。
調べましたら確かに該当する情報は取れなそうですね…。ギフトカードのことをあまり把握しておらず申し訳ありません。
もしかしましたら取れる方法があるかもしれませんが、興味がありましたのでJSでどうにかする方法を考えてみました。
概要は以下のようなものです。
- 商品ページにpropertiesをつけたinputタグを用意し、ページ表示時のオプションの値を設定する
- オプションを選択した場合に、propertiesをつけたinputタグのvalueを選択したオプションの値に書き換える
- gift_card.liquidで、このpropertiesの値を用いて分岐条件に用いる
以下がDebutテーマで動作を確認したサンプルコードですが、テーマごとに違いがあるかもしれませんので、ID名などは適宜差し替える必要があるかもしれません。
product_template.liquidに{% form ‘product’ %}(実際にはもう少し長い記述ですが)がありますので、この中に以下のようにinputタグを書きます。
JSをここに書く必要はありませんが説明の都合上ここに入れていてます。
{% form 'product' %}
{{ comment }}いろいろ省略{{ endcomment }}
{{ comment }}いろいろ省略{{ endcomment }}
{% endform %}
あとはgift_card.liquidで以下を書けばpropertiesの値が取れるので、それを用いて分岐を作れるかと思います。
こちらまでは試作していませんのでうまくいくかわかりませんが、propertiesに入れる値を変えて試されるなど応用は効くかなと思います。
{{ gift_card.properties['_selectOptionValue']}}
以上ですがこのコードが必要な商品は全体の一部だと思いますので、タグなりなんなりで商品ページでの出力対象を制限するのもよいかと思います。
冒頭に少し書きましたが、こんなことをせずとも用意された値のみで実現できる方法があるかもしれませんので、その場合は無駄なコードとなり申し訳ありません。
2 Likes