チェックアウトボタンの下にチェックボックスを追加し、購入者がチェックを入れるまで先に進めないようにします。規約への同意、年齢確認、受注生産の確認などに便利です。
checkout イベントではチェックアウトをキャンセルできません。 このイベントはブラウザが遷移する直前の通知として発火するため、false を返しても preventDefault を呼んでも何も起きません。チェックアウトをゲートする唯一の方法は、ボタンが押される前にクリックへの反応を止めることであり、このページではその方法を説明します。これは UI 上の抑止策であり、法的な保証ではありません。意図を持った購入者は、依然として直接チェックアウトに到達できます。
構成要素は 3 つです。
- チェックアウトボタンの下のカスタムコードブロックがチェックボックスをレンダリングします。
- チェックが外れている間、ブロックは shadow root を通じてカートのチェックアウトボタンとエクスプレス決済ボタンにクラスを追加します。
- カスタム CSS がそのクラスでクリックを無効化します。
ステップ 1: チェックボックスブロックを追加する
Checkout button ブロックの下にカスタムコードブロックを追加し、React component モードに切り替えて、次を貼り付けます。
Compile をクリックし、**「Use custom template」**をオンにします。オンにするまでブロックは何もレンダリングしません。
props.cart の依存関係が重要です。カートの再レンダリング後にクラスを再適用します。これがないと再レンダリングでクラスが消えてしまいます。
Cart settings → Custom CSS に次を追加します。
実際にクリックをブロックするのは pointer-events: none です。opacity は購入者に理由を示すためのものです。
プレビューで以下を確認します。
- 読み込み時にチェックアウトボタンが薄く表示され、クリックに反応しない。
- チェックを入れると有効になり、外すと再び無効になる。
- エクスプレス決済ボタンもゲートされている。
- チェックが外れている間に商品を追加・削除してもボタンが再有効化されない。
最後の項目がよくある失敗ポイントです。カートの変更後にボタンが勝手に再有効化される場合は、effect が再実行されていません。依存配列に props.cart が含まれているか確認してください。
チェックボックスはブラウザ内だけの状態であり、注文には届きません。同意を記録するには、カート追加時にすべてのラインへプロパティとして刻印します。
これをテーマの商品フォームに追加してください。Shopify は properties[...] をフォームから直接読み取るため、追加を実行するのが Aftersell であれ、テーマであれ、別のアプリであれ、値は注文に届きます。
_ で始まるプロパティは購入者向けの表示には現れませんが、Shopify には届くため、注文に表示されます。これが記録するのはどの規約バージョンが有効だったかであり、購入者がチェックを入れた事実ではありません。
cart-external-* クラスだけを対象にする。 対になる cart-internal-* はカート自身の内部機構であり、コードから触れるためのハンドルではありません。カスタム CSS を参照してください。
shadowRoot の存在を確認してから使用する。カートが起動するまでは undefined です。
- ブロックはカートが読み込まれるまで何もレンダリングしないため、ゲートが適用される前にチェックアウトボタンが一瞬有効になることはありません。
- 例外をスローした React ブロックは何もレンダリングせず、カートの残りはそのまま動き続けます。ここではそれがガードされていないチェックアウトボタンを意味します。公開前にプレビューでテストしてください。