オプション（商品）ごとに、ギフトカードの画像を変更する

[ckjets]

お世話になっております。

ギフトカード の画像について、オプションごとに変更したいのですが方法はありますか？

商品の値段で判定する方法をみつけましたが(以下コードです)、それだと値段が同じ場合に正しく動作しません。

・gift_card.liquid

<div class="giftcard-wrapper">
<main class="giftcard" role="main">
<div class="giftcard__wrap">
{% for variant in gift_card.product.variants %}
{% if variant.price == gift_card.product.price %}
<img class="giftcard-image" src="{{ gift_card.product.images[forloop.index0] | img_url:'1024x' }}">

{% endif %}
{% endfor %}

idみたいな識別子で判断したいのですが、gift_card.productのオブジェクトはそのようなプロパティがないように思えます。

よろしくお願いします。

[Jizo_Inagaki]

実際に試していないのであっているかわかりませんが、variant objectまで取れているのであれば以下のヘルプにあるidやskuの値も取れると思います。

https://shopify.dev/docs/themes/liquid/reference/objects/variant/

[ckjets]

コメントありがとうございます。

{% if variant.price == gift_card.product.price %}

説明不足で申し訳ないのですが、

おっしゃるとおり、`variant`オブジェクトには、idがあり識別できそうです。

しかし`gift_card.product` のオブジェクトの中に、今開いているギフトカードのidがなく、判断ができなそうで困っているという状況です。

gift_card.productについて、何かギフトカード の商品を特定できるプロパティが含まれていますでしょうか？

そのほか、他のやり方で何か方法があればご教示いただけますと幸いです。

[Jizo_Inagaki · Accepted solution]

調べましたら確かに該当する情報は取れなそうですね...。ギフトカードのことをあまり把握しておらず申し訳ありません。

もしかしましたら取れる方法があるかもしれませんが、興味がありましたのでJSでどうにかする方法を考えてみました。

概要は以下のようなものです。

• 商品ページにproperties[]をつけたinputタグを用意し、ページ表示時のオプションの値を設定する
• オプションを選択した場合に、properties[]をつけたinputタグのvalueを選択したオプションの値に書き換える
• gift_card.liquidで、このproperties[]の値を用いて分岐条件に用いる

以下がDebutテーマで動作を確認したサンプルコードですが、テーマごとに違いがあるかもしれませんので、ID名などは適宜差し替える必要があるかもしれません。

product_template.liquidに{% form 'product' %}(実際にはもう少し長い記述ですが)がありますので、この中に以下のようにinputタグを書きます。
JSをここに書く必要はありませんが説明の都合上ここに入れていてます。

{% form 'product' %}
{{ comment }}いろいろ省略{{ endcomment }}
<input id="SelectOptionValue" type="hidden" name="properties[_selectOptionValue]" value="{{product.selected_or_first_available_variant.option1}}" />
<script>
  window.addEventListener('DOMContentLoaded', () => {
    const selecter = document.getElementById('SingleOptionSelector-0');
    const selectOptionValue = document.getElementById('SelectOptionValue');
    selectOptionValue.value = selecter.value;
    selecter.addEventListener('change',function(){
      selectOptionValue.value = event.target.value;
    },false);
  })
</script>
{{ comment }}いろいろ省略{{ endcomment }}
{% endform %}

あとはgift_card.liquidで以下を書けばproperties[]の値が取れるので、それを用いて分岐を作れるかと思います。
こちらまでは試作していませんのでうまくいくかわかりませんが、properties[]に入れる値を変えて試されるなど応用は効くかなと思います。

{{ gift_card.properties['_selectOptionValue']}}

以上ですがこのコードが必要な商品は全体の一部だと思いますので、タグなりなんなりで商品ページでの出力対象を制限するのもよいかと思います。
冒頭に少し書きましたが、こんなことをせずとも用意された値のみで実現できる方法があるかもしれませんので、その場合は無駄なコードとなり申し訳ありません。