仕組み
- チェックアウトボタンの下のカスタムコードブロックがチェックボックスをレンダリングします。
- チェックが外れている間、ブロックは shadow root を通じてカートのチェックアウトボタンとエクスプレス決済ボタンにクラスを追加します。
- カスタム CSS がそのクラスでクリックを無効化します。
ステップ 1: チェックボックスブロックを追加する
props.cart の依存関係が重要です。カートの再レンダリング後にクラスを再適用します。これがないと再レンダリングでクラスが消えてしまいます。
ステップ 2: CSS を追加する
pointer-events: none です。opacity は購入者に理由を示すためのものです。
ステップ 3: テストする
- 読み込み時にチェックアウトボタンが薄く表示され、クリックに反応しない。
- チェックを入れると有効になり、外すと再び無効になる。
- エクスプレス決済ボタンもゲートされている。
- チェックが外れている間に商品を追加・削除してもボタンが再有効化されない。
props.cart が含まれているか確認してください。
誰が同意したかを記録する
properties[...] をフォームから直接読み取るため、追加を実行するのが Aftersell であれ、テーマであれ、別のアプリであれ、値は注文に届きます。
_ で始まるプロパティは購入者向けの表示には現れませんが、Shopify には届くため、注文に表示されます。これが記録するのはどの規約バージョンが有効だったかであり、購入者がチェックを入れた事実ではありません。
押さえておくべきポイント
cart-external-*クラスだけを対象にする。 対になるcart-internal-*はカート自身の内部機構であり、コードから触れるためのハンドルではありません。カスタム CSS を参照してください。shadowRootの存在を確認してから使用する。カートが起動するまではundefinedです。- ブロックはカートが読み込まれるまで何もレンダリングしないため、ゲートが適用される前にチェックアウトボタンが一瞬有効になることはありません。
- 例外をスローした React ブロックは何もレンダリングせず、カートの残りはそのまま動き続けます。ここではそれがガードされていないチェックアウトボタンを意味します。公開前にプレビューでテストしてください。
次に読むページ
- カスタムコードブロック: React モードとその props。
- カスタム CSS: 公開クラスの命名規則。
- イベント:
checkoutイベントでできること、できないこと。