カート画面のチェックボックスを必須にする方法について

[N0613]

お世話になります。

現在構築中のサイトにて、特定のSKUを持つ商品をカートに入れているときだけ、カート画面でチェックボックスを設置したいと考えております。

使用テーマはCraftです。

下記のコードを埋め込んでチェックボックスの設置はできたのですが、必須（ required）が作動していないようでチェックしないままでも決済に進めてしまいます。

こちらの原因と解決策をご存知の方がいらっしゃいましたらご教示いただけないでしょうか。

{% for item in cart.items %}
{% if forloop.first and item.variant.sku contains "SKU" %}
レンタルの利用規約をご確認ください。
<label　for="{{ formId}}-inquirydetails">
<input type="checkbox" id="optin" name="利用規約" value="同意する" required"><a href="">利用規約</a>に同意する</label>
{% endif %}

[Qcoltd]

カートの「ご購入手続きへ」ボタンをクリックした際に、

必須inputに入力がなくても、

チェックアウトフローに入ってしまう、

ということで合っていますでしょうか？

上記で合っているようでしたら、

Craftのカートのコードを見てみますと、

「ご購入手続きへ」ボタンが、

<form>タグのsubmitではなく、

おそらくJavaScriptでsubmitしているため、

<input>要素のreuired属性は無視されてしまうものと思われます。

(確証はありませんが。)

おそらく、

最も簡単な実装方法は、下記をJavaScriptで実装する、ではないかと思います。

利用規約への同意チェックボックスにチェックが入っていない場合、

「ご購入手続きへ」ボタンを表示しない。

掲載いただているコードで表現しますと下記のようになるかと思います。

(動作検証はしておりません。)

<style>
#checkout {
  display: none !important;
}
</style>

<script>
window.addEventListener('load', function(){
  const inputTermsOfUse = document.querySelector('#optin');
  const buttonCheckout = document.querySelector('#checkout');
  inputTermsOfUse.addEventListener('change', function(){
    if(this.checked) {
      buttonCheckout.style.display = 'block';
    } else {
      buttonCheckout.style.display = 'none';
    }
  });
});
</script>

ご参考まで。

(キュー田辺)

[Jizo_Inagaki · Accepted solution]

おそらく以下で「入力必須にする」という動作に関しては実現できるかなと思います。

<label　for="{{ formId}}-inquirydetails">
<input type="checkbox" id="optin" name="利用規約" form="cart" value="同意する" required><a href="">利用規約</a>に同意する</label>

ただし上記サンプルはform属性が有効なブラウザでのみ動作するため、レガシーなブラウザでは対応できない可能性があります。

この辺りはCraftテーマ自体の対応範囲にも関連しますので、必要に応じて調査や対応を行うことをお勧めします。

サンプルが動作する場合、記載されていたコードの問題点は以下のとおりです。

• form属性がない
• requiredの後ろにダブルクォートがついている

以上ですが動作しない場合は不要な情報となり申し訳ありません。