FROM CACHE - jp_header
解決済

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

ckjets
訪問者
3 0 1

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

 

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

 

スクリーンショット 2021-03-11 17.32.21.png

 

スクリーンショット 2021-03-11 17.18.00.png

 

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

 

・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のオブジェクトはそのようなプロパティがないように思えます。

よろしくお願いします。

1 件の受理された解決策
Jizo_Inagaki
Shopify Partner
990 373 690

成功

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

もしかしましたら取れる方法があるかもしれませんが、興味がありましたので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']}}

 

 


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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

3件の返信3

Jizo_Inagaki
Shopify Partner
990 373 690

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

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
ckjets
訪問者
3 0 1

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

 

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

 

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

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

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

 

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

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

Jizo_Inagaki
Shopify Partner
990 373 690

成功

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

もしかしましたら取れる方法があるかもしれませんが、興味がありましたので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']}}

 

 


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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。