EC-CUBE3.0にreCAPTCHAを実装する

やりたいこと

「私はロボットではありません。」がやりたい。

環境

EC-CUBE3.0

実装

フロントエンドの実装は2つだけです。

管理画面からブロック設定
管理画面で新規ブロックを作成してください。

<!-- Google recaptcha -->
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
<script>
  function validateRecaptcha(code){
    if(!!code){
      var form = document.querySelector(".recaptcha");
      form.removeAttribute('disabled');
    }
  }
</script>

作成したブロックをレイアウト設定で、問い合わせフォームのヘッダー部分に設置します。

問い合わせフォームにreCAPTCHAパーツを組み込む


## 編集箇所
src > Eccube > Resource > template > default > Contact > index.twig

<div class="col-sm-offset-4 col-sm-4">
    <div class="g-recaptcha" data-callback="validateRecaptcha" data-sitekey="6LdkFCoUAAAAAOwtu-OYCfiFKLBz9_ED1KlsEiOA"></div>
</div>


<div id="top_box__confirm_button" class="btn_group col-sm-offset-4 col-sm-4">
  <p><button type="submit" class="recaptcha btn btn-primary btn-block" disabled>確認ページへ</button></p>
</div>

チェックするまで確定ボタンが押せないように初期表示ではdisabledにしています。

該当ソースコード全文はこちら

組み込んだ結果以下の挙動になります。

以上