Shopifyのカート画面にて下記のような仕様を実装したいのですがどうしたらいいでしょうか？
近しい仕様のものはあったのですが
チェックボックス1個だったので
そこだけ改修できればと思ったのですがうまく行かず。
わかる方教えていただきたいです。
#希望する仕様
商品を追加後、
カートにあるcart attributesのセレクトタグからプランを選択。
（例：1ヵ月プラン、2ヵ月プラン）
選んだプランに応じて、料金が異なる商品明細が追加される感じにしたい。
例：1ヵ月プランを選択したら事前に用意した1ヵ月プラン用商品を自動で明細追加。
2ヵ月プランを選択した場合、事前に用意した2ヵ月プラン用商品を自動で明細追加。
また、カートに入った商品数に応じてこの追加される明細の数量も変えたいと思っております。
例：カートに2つの商品が入って、1ヵ月プランを選択した場合
1ヵ月プラン用商品が数量2で入る。
（テーマはDawn使用の予定）
#近い仕様のコード（他サイト参考）
プランの商品をadditemのメニューに入れ、スニペットに下記を記載して利用。
{% if linklists.additem.links.size > 0 and linklists.additem.links.first.type == 'product_link' %}
<div id="is-a-gift" style="clear: left; margin: 30px 0" class="clearfix rte">
<p>
<input id="additem" type="checkbox" name="attributes[additem]" value="yes" {% if cart.attributes.additem %} checked="checked"{% endif %} style="float: none" />
<label for="additem" style="display:inline; padding-left: 5px; float: none;">
For {{ linklists.additem.links.first.object.price | money }} per item,
please wrap the products in this order.
</label>
</p>
</div>
{% assign id = linklists.additem.links.first.object.variants.first.id %}
{% assign gift_wraps_in_cart = 0 %}
{% for item in cart.items %}
{% if item.id == id %}
{% assign gift_wraps_in_cart = item.quantity %}
{% endif %}
{% endfor %}
{% assign items_in_cart = cart.item_count | minus: gift_wraps_in_cart %}
<style>
#updates_{{ id }} { display: none; }
</style>
<script>
Shopify.Cart = Shopify.Cart || {};
Shopify.Cart.GiftWrap = {};
Shopify.Cart.GiftWrap.set = function() {
var headers = new Headers({ 'Content-Type': 'application/json' });
var request = {
method: 'POST',
headers: headers,
body: JSON.stringify({ updates: { {{ id }}: {{ items_in_cart }} }, attributes: { 'additem': true } })
};
fetch('/cart/update.js', request)
.then(function() {
location.href = '/cart';
});
}
Shopify.Cart.GiftWrap.remove = function() {
var headers = new Headers({ 'Content-Type': 'application/json' });
var request = {
method: 'POST',
headers: headers,
body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'additem': '', 'gift-note': '' } })
};
fetch('/cart/update.js', request)
.then(function() {
location.href = '/cart';
});
}
// If we have nothing but gift-wrap items in the cart.
{% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.remove();
});
// If we don't have the right amount of gift-wrap items in the cart.
{% elsif gift_wraps_in_cart > 0 and gift_wraps_in_cart != items_in_cart %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.set();
});
// If we have a gift-wrap item in the cart but our additem cart attribute has not been set.
{% elsif gift_wraps_in_cart > 0 and cart.attributes.additem == blank %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.set();
});
// If we have no gift-wrap item in the cart but our additem cart attribute has been set.
{% elsif gift_wraps_in_cart == 0 and cart.attributes.additem != blank %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.set();
});
{% endif %}
// When the additem checkbox is checked or unchecked.
document.addEventListener("DOMContentLoaded", function(){
document.querySelector('[name="attributes\[additem\]"]').addEventListener("change", function(event) {
if (event.target.checked) {
Shopify.Cart.GiftWrap.set();
} else {
Shopify.Cart.GiftWrap.remove();
}
});
document.querySelector('#gift-note').addEventListener("change", function(evt) {
var note = evt.target.value;
var headers = new Headers({ 'Content-Type': 'application/json' });
var request = {
method: 'POST',
headers: headers,
body: JSON.stringify({ attributes: { 'gift-note': note } })
};
fetch('/cart/update.js', request);
});
});
</script>
{% else %}
{% endif %}
