特定のSKUを含む商品がカートにある場合のみ、利用規約チェックボックスを必須にしたいが、required属性が効かず未チェックでも「ご購入手続きへ」に進めてしまう問題。SKUは在庫管理用の商品識別子、requiredはブラウザの入力必須検証を行うHTML属性。
現時点で確定解はなく、提案はいずれも未検証。アクションはJSでボタン制御、マークアップ修正、ブラウザ対応とテーマ仕様の確認。
お世話になります。
現在構築中のサイトにて、特定のSKUを持つ商品をカートに入れているときだけ、カート画面でチェックボックスを設置したいと考えております。
使用テーマはCraftです。
下記のコードを埋め込んでチェックボックスの設置はできたのですが、必須（ required）が作動していないようでチェックしないままでも決済に進めてしまいます。
こちらの原因と解決策をご存知の方がいらっしゃいましたらご教示いただけないでしょうか。
{% for item in cart.items %}
{% if forloop.first and item.variant.sku contains “SKU” %}
レンタルの利用規約をご確認ください。
<input type=“checkbox” id=“optin” name=“利用規約” value=“同意する” required">利用規約に同意する
{% endif %}
カートの「ご購入手続きへ」ボタンをクリックした際に、
必須inputに入力がなくても、
チェックアウトフローに入ってしまう、
ということで合っていますでしょうか？
上記で合っているようでしたら、
Craftのカートのコードを見てみますと、
「ご購入手続きへ」ボタンが、
タグのsubmitではなく、おそらくJavaScriptでsubmitしているため、
要素のreuired属性は無視されてしまうものと思われます。
(確証はありませんが。)
おそらく、
最も簡単な実装方法は、下記をJavaScriptで実装する、ではないかと思います。
利用規約への同意チェックボックスにチェックが入っていない場合、
「ご購入手続きへ」ボタンを表示しない。
掲載いただているコードで表現しますと下記のようになるかと思います。
(動作検証はしておりません。)
ご参考まで。
(キュー田辺)
おそらく以下で「入力必須にする」という動作に関しては実現できるかなと思います。
ただし上記サンプルはform属性が有効なブラウザでのみ動作するため、レガシーなブラウザでは対応できない可能性があります。
この辺りはCraftテーマ自体の対応範囲にも関連しますので、必要に応じて調査や対応を行うことをお勧めします。
サンプルが動作する場合、記載されていたコードの問題点は以下のとおりです。
- form属性がない
- requiredの後ろにダブルクォートがついている
以上ですが動作しない場合は不要な情報となり申し訳ありません。