FROM CACHE - jp_header
解決済

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

N0613
観光客
7 0 0

お世話になります。

現在構築中のサイトにて、特定の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 %}

Natsumi
1 件の受理された解決策

Jizo_Inagaki
Shopify Partner
1006 380 697

成功

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

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

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

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

 

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

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

 

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1049 428 412

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

必須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>

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

Jizo_Inagaki
Shopify Partner
1006 380 697

成功

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

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

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

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

 

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

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

 

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。