Prestashop, добавление reCAPTCHA

14 июля 2019

Добавление reCAPTCHA, показываю на примере Prestashop 1.6, но принцип одинаков для всех версий 

Для начала заходим на сайт Google reCaptcha, регистрируем сайт и получаем ключ

Теперь прикрутим это счастье к Prestashop. Я ставлю reCAPTCHA в форму обратной связи и на страницу регистрации клиента

Интеграция reCAPTCHA в форму обратной связи Prestashop

В файле themes/ваш-шаблон/contact-form.tpl в самом верху добавить

<script>
    (function($) {
        $(document).ready(function() {
            $('#submitMessage').attr('disabled', 'disabled');
        });
    })(jQuery);
    var verifyCallback = function(response) {
        //alert(response);
        $('#submitMessage').removeAttr('disabled');
    };
    var onloadCallback = function() {
        grecaptcha.render('captcha', {
            'sitekey' : 'ВАШ-КЛЮЧ',
            'callback' : verifyCallback,
            'theme' : 'light'
        });
    };
</script>

в 'sitekey' : 'ВАШ-КЛЮЧ' вместо ВАШ КЛЮЧ вставить ключ, который получили при регистрации reCAPTCHA

в том же файле найти

<div class="submit">

и выше, перед ним вывести форму капчи кодом

<div id="captcha"></div>

кнопке, которая отправляет запрос, добавить статус Disabled

<button type="submit" name="submitMessage" id="submitMessage" class="button btn btn-default button-medium" disabled="disabled">

внизу файла добавить скрипт

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async="" defer=""></script>

В результате получится типа такого

Интеграция reCAPTCHA в форму регистрации пользователей Prestashop

В файле themes/ваш-шаблон/authentication.tpl в самом верху добавить

<script>
    (function($) {
        $(document).ready(function() {
            $('#SubmitCreate').attr('disabled', 'disabled');
        });
    })(jQuery);
    var verifyCallback = function(response) {
        $('#SubmitCreate').removeAttr('disabled');
    };
    var onloadCallback = function() {
        grecaptcha.render('captcha', {
            'sitekey' : 'ВАШ-КЛЮЧ',
            'callback' : verifyCallback,
            'theme' : 'light'
        });
    };
</script>

в 'sitekey' : 'ВАШ-КЛЮЧ' вместо ВАШ КЛЮЧ вставить ключ, который получили при регистрации reCAPTCHA

Находим начало формы регистрации <div class="submit"> , добавляем перед ней код капчи и делаем кнопку неактивной. Вот так должно получиться

<div id="captcha"></div>
<div class="submit">
    <button class="btn btn-default button button-medium exclusive" type="submit" id="SubmitCreate" disabled="disabled" name="SubmitCreate">

В самом низу добавить

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async="" defer=""></script>

готово

Вот и все, reCAPTCHA подключена к вашему Prestashop