【Shopify】どのバリエーションを購入しても商品個数を減らす方法
【Shopify】どのバリエーションを購入しても商品個数を減らす方法
お客様からこんなご依頼を受けたことはありませんか？
「商品を販売する時に、加工方法がいくつかある。
材料は１つ。
Shopifyの商品バリエーションだと、バリエーションごとに在庫を持ってしまうが、商品購入時に加工方法を選んでもらい、どの加工方法を選んでも商品数は減るようにしたい。」
例）
商品は素材としての「りんご」
お客様に届けるものは、そのりんごを加工した「パイ」「ケーキ」「コンポート」
「りんご」を購入してもらい、商品バリエーションで「パイ」「ケーキ」「コンポート」を選択してもらう。
「パイ」「ケーキ」「コンポート」どれが売れても、商品数は減らしたい。
そんな時は、Line Item Property を使って加工方法を選べるバリエーションボタンを作りましょう！
おおよその流れ
出来上がりイメージ
ログインすると記事の全文をご覧いただけます。
ログインまたはアカウント作成をしてください。
おおよその流れ
出来上がりイメージ
１，商品テンプレートを新たに作る
２，商品情報セクションにラジオボタンを作成
３，JavaScriptでラジオボタンと商品画像を連動
４，確認
商品テンプレートを新たに作る
まずは、すべての商品にこのラジオボタンが表示してしまわないように、商品追加の際に右下のテーマテンプレートで当該テンプレートを選択した時のみ表示されるようにします。
商品のテーマを新たに作るには、
templatesフォルダ内の「product.json」ファイルを複製し、任意の名前をつける。ここでは「product.material-variations.json」とする。
sectionsフォルダ内の「main-product.liquid」ファイルを複製し、任意の名前をつける。ここでは「c_main-product-material-variations.liquid」とする。
templatesフォルダ内の「product.material-variations.json」ファイルの上から4行目の"type"コードを以下のように置き換える。
"type": "c_main-product-material-variations",商品情報セクションにラジオボタンを作成
Line Item Property
どのバリエーションを購入しても商品個数を減らす方法は、Line Item Propertyのラジオボタンを使用します。
下記のリンクより画像のように設定し、ページ下に出てくるコードをコピーします。
https://ui-elements-generator.myshopify.com/pages/line-item-property
コードの貼り付け（Schema）
sectionsフォルダ内の「c_main-product-material-variations.liquid」ファイルのブロックに以下を記載。
{% schema %}
{
"name": "t:sections.main-product.name",
"tag": "section",
"class": "section",
"blocks": [
{
"type": "@app"
},
{
"type": "line-item-property-radio",
"name": "加工選択"
},コードの貼り付け（Liquid）
Liquidは{%- for block in section.blocks -%}の中にwhen文で追加する。（「section.blocks」で検索するとすぐ見つかる）
{%- when 'line-item-property-file' -%}の下は、Line Item Propertyで生成されたコードを記載。
「form」で検索をかけ、formのオブジェクトを探しinputタグに入れる。ここでは「form="{{ product_form_id }}"」だが、テーマやテーマのバージョンにより変わるので必ず検索し確認。
※Line Item Propertyなどは、formタグの中に記載するかinputタグにフォームオブジェクトを入れるかしないと、情報を取ることが出来ないので注意！！
Requiredにしても、ラジオボタンチェックなしにカートに入れることがあるので、どれか一つに「checked」も入れておきましょう。
{%- when 'line-item-property-radio' -%}
<p class="line-item-property__field"></p>
<label>加工方法</label><br>
<input required class="required" form="{{ product_form_id }}" type="radio" name="properties[加工方法]" value="パイ" checked> <span>パイ</span><br>
<input required class="required" form="{{ product_form_id }}" type="radio" name="properties[加工方法]" value="ケーキ"> <span>ケーキ>/span><br>
<input required class="required" form="{{ product_form_id }}" type="radio" name="properties[加工方法]" value="コンポート"> <span>コンポート</span><br>これでカスタマイズ画面の「商品情報」のブロックに「加工選択」が表示される。必要であれば、cssでラジをボタンをバリエーション選択のピル型ボタンなどに調整。
JavaScriptでラジオボタンと商品画像を連動
バリエーションクリックで画像が変わるようにJavaScriptを記載
今回の場合、商品画像の１枚目に素材としての「りんご」の画像、２枚目に加工後の「パイ」の画像、３枚目に加工後の「ケーキ」の画像、４枚目に加工後の「コンポートの画像」の画像を入れ、それぞれの画像ボタンをクリックした際にその画像が表示されるようにJavaScriptを記載。
JavaScriptを「product.material-variations.json」ファイルのSchemaの上に記載。
<script>
const imageUrls = [
{% for image in product_images %}
"{{ image | img_url: '1024x1024' }}",
{% endfor %}
];
document.addEventListener('DOMContentLoaded', function() {
const radioButtons = document.querySelectorAll('input[data-image-selector]');
const productImage = document.querySelector('.product__media img');
radioButtons.forEach(radio => {
radio.addEventListener('change', function() {
const imageIndex = parseInt(this.dataset.imageIndex);
if (imageUrls[imageIndex]) {
productImage.src = imageUrls[imageIndex];
productImage.srcset = '';
}
});
});
});
</script>{%- when 'line-item-property-radio' -%}部分、JS用に data-image-selector data-image-index=" " を追記
{%- when 'line-item-property-radio' -%}
<p class="line-item-property__field"></p>
<label>加工方法</label><br>
<input required class="required" form="{{ product_form_id }}" type="radio" name="properties[加工方法]" value="パイ" checked data-image-selector data-image-index="1"> <span>パイ</span><br>
<input required class="required" form="{{ product_form_id }}" type="radio" name="properties[加工方法]" value="ケーキ" data-image-selector data-image-index="2"> <span>ケーキ</span><br>
<input required class="required" form="{{ product_form_id }}" type="radio" name="properties[加工方法]" value="コンポート" data-image-selector data-image-index="3"> <span>コンポート&;t;/span><br>確認
テスト購入し、カートに記載されるか、注文管理ページに表示されるかを確認し、終了。
最後に
ここでは説明を省きましたが、クライアントさんによっては、タイトル部分やバリエーション部分も動的にするとより使いやすくなると思います。
今回の記事、Shopifyサイト作成の参考になりましたでしょうか？もしよろしければ、Xでのシェアよろしくお願いいたします。
また、お仕事のご依頼もお待ちしております❗