{"product_id":"2026-08-28","title":"【Horizon】バリアントを選択するまでカート追加ボタンを無効化する「未選択スタート」ピッカー","description":"\u003cp\u003e\u003cspan\u003eHorizonの標準バリアントピッカーを、Allbirdsやゴールドウインのような「未選択スタート・選択必須」の挙動に変えるプライベートブロックです。色・サイズなどのオプションを一つも選ばない状態から商品ページが始まり、全て選び終えるまで「カートに追加する」ボタンと「今すぐ購入」ボタンが押せません。\u003c\/span\u003e\u003c\/p\u003e\n\n\u003cp\u003e\u003cstrong style=\"color:#e0301e;\"\u003e【必須前提条件】このブロックは Horizon v4.1.4 以降でのみ正しく動作します。\u003c\/strong\u003eそれより前のバージョン（v3.2.1〜v4.1.1）では、コレクション一覧の商品カードが \u003ccode\u003evariant.url\u003c\/code\u003e（バリアント自体のURL）を参照しているため、通常の一覧遷移でも常にバリアント選択済みの状態で商品ページが開いてしまい、「未選択スタート」の前提が根本から崩れます。v4.1.4でHorizon公式がこれを \u003ccode\u003eproduct.url\u003c\/code\u003e に差し戻したことで解消されました。導入前に必ずテーマのバージョンを確認してください。\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"必須前提条件：v4.1.1以前と v4.1.4以降での商品カードURLの違い\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-08-28_3.png?v=1787883562\" class=\"zoomable-image\" style=\"max-width:100%;height:auto;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003e👉 実際の表示は、以下のデモストアで確認できます（バリアントが未選択の状態からスタートし、全て選ぶまでカート追加ボタンが無効化されている状態）。\u003cbr\u003e\u003ca href=\"https:\/\/horizon-store-q9zl2koe.myshopify.com\/products\/specialty-coffee-beans?preview_theme_id=138373464272\" target=\"_blank\" rel=\"noopener\"\u003ehorizon-store-q9zl2koe.myshopify.com\/products\/specialty-coffee-beans\u003c\/a\u003e\u003cbr\u003eストアパスワード：store-dojo\u003c\/p\u003e\n\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\n\u003ch3\u003e完成イメージ\u003c\/h3\u003e\n\u003cp\u003e色・サイズどちらも塗り（選択中の表示）が無い状態からスタートします。カート追加ボタンはグレーアウトし、文言も「色を選択してください」のように未選択の項目を案内する内容に変わります。\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"完成イメージ：全オプション未選択の状態からスタートし、カート追加ボタンが無効化される\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-08-28_1.png?v=1787884275\" class=\"zoomable-image\" style=\"max-width:100%;height:auto;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003ch3\u003e無効なボタンを押すと、未選択のオプションが枠線で示される\u003c\/h3\u003e\n\u003cp\u003eボタンを押しても何も起きないだけでは、なぜ押せないのか伝わりません。無効化されたボタンの上に見た目にはほぼ見えない透明な板を重ねてクリックを検知し、押された瞬間に未選択のままのオプショングループへ赤枠と案内メッセージを表示します。\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"完成イメージ：押すと未選択のオプションが赤枠と案内メッセージで強調される\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-08-28_2.png?v=1787884276\" class=\"zoomable-image\" style=\"max-width:100%;height:auto;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\n\u003ch3\u003e実装の仕組み\u003c\/h3\u003e\n\u003cp\u003e◆各オプショングループ（色・サイズ等）が未確定の間は、本物の要素を隠し、見た目だけを複製したコピーをその場に表示します。複製はHorizon自身の状態管理から完全に独立しているため、複製側の選択状態は自由に操作できます。お客様が複製で選んだ瞬間だけ、対応する本物の要素に対して本物のclick\/change操作を代理実行し、複製を消して本物を表示し直します。本物の要素の選択状態を直接書き換えることはしないため、Horizon自身の部分再描画（morph）や再解決ロジックと競合しません。\u003c\/p\u003e\n\u003cp\u003e◆カート追加ボタンは複製せず、本物の \u003ccode\u003edisabled\u003c\/code\u003e 属性とラベル文言を直接書き換えます。\u003ccode\u003edisabled\u003c\/code\u003e な要素はHorizon側の実装（ボタンのclickで直接カートに追加している可能性）に関わらず確実に送信をブロックできます。見た目だけを薄くする方式では、ボタンのclickイベントが迂回されて実際にカートへ追加されてしまう不具合が起こり得ます。\u003c\/p\u003e\n\u003cp\u003e◆ただし \u003ccode\u003edisabled\u003c\/code\u003e な要素はclickイベント自体を発生させず、祖先へもbubbleしません。そこで本物のボタン（disabledのまま）の上に見た目にはほぼ見えない透明な板を1枚だけ重ね、そちらでクリックを検知して未選択グループの枠線表示を行います。「今すぐ購入」等の即時決済ボタンは、Shopify標準のWebコンポーネントで内部構造を触れないため、\u003ccode\u003epointer-events: none\u003c\/code\u003e でクリックそのものを無効化しています。\u003c\/p\u003e\n\n\u003ch3\u003e追加方法\u003c\/h3\u003e\n\u003cp\u003e◆Shopify管理画面 → オンラインストア → テーマ →「…」→ コードを編集\u003c\/p\u003e\n\u003cp\u003e◆\u003ccode\u003eblocks\u003c\/code\u003e フォルダに新規ファイル \u003ccode\u003e_variant-picker-require-selection.liquid\u003c\/code\u003e を作成し、コードを貼り付けます（プライベートブロックとして扱われるため、ファイル名の先頭は必ず半角アンダースコアにしてください）。\u003c\/p\u003e\n\u003cp\u003e◆\u003ccode\u003eblocks\/_product-details.liquid\u003c\/code\u003e の schema 内、\u003ccode\u003evariant-picker\u003c\/code\u003e ブロックの直後に、新しいブロックの登録を1つ追加します。\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"修正箇所：blocks\/_product-details.liquidのschemaにブロック登録を追加\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-08-28_4.png?v=1787883562\" class=\"zoomable-image\" style=\"max-width:100%;height:auto;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003cp\u003e◆テーマエディタの商品ページで、標準の「バリエーションピッカー」ブロックの代わりに、新しく追加された「バリエーションピッカー（選択必須）」ブロックに差し替えれば完成です。\u003c\/p\u003e\n\n\u003ch3\u003eコードの中身（抜粋）\u003c\/h3\u003e\n\u003cp\u003e◆見た目コピーでの選択を、本物の要素へのイベントとして代理実行する部分です。\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"コード抜粋：複製での選択を本物の要素へ代理反映する仕組み\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-08-28_5.png?v=1787883562\" class=\"zoomable-image\" style=\"max-width:100%;height:auto;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003cp\u003e◆カート追加ボタンのdisabled化と、クリック検知用の透明な板の配線部分です。\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"コード抜粋：カート追加ボタンのdisabled化とクリック検知の配線\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-08-28_6.png?v=1787883562\" class=\"zoomable-image\" style=\"max-width:100%;height:auto;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003e\u003cbr\u003e\u003c\/p\u003e\n\n\u003cp\u003e◆ご購入いただくと、この「バリアント選択必須ピッカー」の完成コード（Liquidファイル全文）をご利用いただけます。\u003c\/p\u003e\n\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\n\u003cp\u003e関連TIPS：\u003cbr\u003e\n\u003ca href=\"\/products\/2026-08-08\"\u003e標準のバリアントピッカーを画像付きの新規ブロックに置き換える\u003c\/a\u003e\u003cbr\u003e\n\u003ca href=\"\/products\/2026-08-05\"\u003e標準のバリアントピッカーをカード型UIでラップする\u003c\/a\u003e\u003cbr\u003e\n\u003ca href=\"\/products\/2026-07-27\"\u003eバリアントの選択肢に「+15,000円」「受注生産」などの補足情報を表示する\u003c\/a\u003e\u003c\/p\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":49231577088251,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-08-28.png?v=1787883571","url":"https:\/\/store-dojo.com\/products\/2026-08-28","provider":"STORE DOJO","version":"1.0","type":"link"}