フォーラムでのやりとりで試作したのでメモとして。
実現したいこと
- Re: オプション（商品）ごとに、ギフトカードの画像を変更する – Shopify Community
発端のフォーラムの投稿 - gift_card.liquidで購入したバリエーションの情報を使いたい
gift_cardオブジェクトでは購入した商品の値は取れても、選ばれたバリエーションの情報が取れないようで今回はそこが問題でした。{{ gift_card.product.variant }}で取れる値は商品に紐ずくバリエーション全てで、どれが選ばれているのかの情報がほぼありませんでした(価格自体はバリエーションの値を反映しているので、価格からの推測は可能ですが)。
ギフトカードの補足
あくまで一時的な措置として、本来は使えないプランでもギフトカードの機能が開放されています。
今回の対象となるgift_card.liquidを用いて表示されるページにたどり着くには以下のような手順が必要でした。
- 管理画面でギフトカードを作る
- ギフトカード商品を追加する
- ストアでギフトカードの商品を普通に購入する
- メールでギフトカードのディスカウントコードを確認するためのボタンが記載されたメールが届く
- ボタンを押すとギフトカードのディスカウントコードやQRコードが表示されたページが開く
- このページがgift_card.liquidを用いて表示されている
上記4のメールであれば、管理画面内の「設定 > 通知 > ギフトカードを作成する > プレビュー」で確認可能ですが、その先のページは確認できませんでした。
実際に購入して試すしかないのか、他の方法があるのか…。
サンプルコード
- Debutテーマ使用
- 商品ページ用のproduct_template.liquidにproperties[]をつけたinputタグを用意し、ページ表示時のオプションの値を設定する
- オプションを選択した場合に、properties[]をつけたinputタグのvalueを選択したオプションの値に書き換える
- gift_card.liquidで、このproperties[]の値を出力する
上記が概要と前提で、以下がサンプルコードです。最初のオプションの値を習得して用いていますが、IDを変更すれば別のオプションの値も取れます。
{% 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');
if(selecter){
const selectOptionValue = document.getElementById('SelectOptionValue');
selectOptionValue.value = selecter.value;
selecter.addEventListener('change',function(){
selectOptionValue.value = event.target.value;
},false);
}
})
</script>
{{ comment }}いろいろ省略{{ endcomment }}
{% endform %}
{{ comment }}gift_card.liquidに以下を記載すれば値が取れる{{ endcomment }}
{{ gift_card.properties['_selectOptionValue']}}
関連する参考ヘルプなどは以下の通り。
- The line_item object
- Solved: Using hidden line item property field – Shopify Community
_(アンダーバー)をつけることで該当のpropertiesのキーや値をチェックアウト画面などに出力させないことできる
結び
結構無理やりですが、properties[]を介すれば応用は効きそうです。
このコードが不要な商品に出力しないようにする必要がありますが、ギフトカード用の商品の判別方法はまだ把握できていません。簡単に取れそうですが、取れない場合はタグかコレクションでどうにかするしかないかもしれません。
0人がこの記事を評価
役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。
連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。
