Google reCAPTCHA v3 в Demomarket
Актуально для версии 20
Задача
Реализовать использование Google reCaptcha v3 в шаблоне Demomarket.
Решение
Для использования Google reCaptcha v3 необходимо внести небольшие изменения в несколько файлов шаблона:
DemomarketPhpExtension.php
Файл находится по адресу /templates/demomarket/php/library/DemomarketPhpExtension.php
В файле нужно изменить метод getRecaptchaUrl так, чтобы в GET параметре render передавался SiteKey Google reCaptcha v3:
/**
* Возвращает url скрипта recaptcha
* @param array $variables описание страницы
*
* [
* 'lang' => string // код языка
* ]
*
* @return string
*/
public function getRecaptchaUrl(array $variables) {
$lang = isset($variables['lang']) ? $variables['lang'] : 'ru';
return "https://www.google.com/recaptcha/api.js?render=".$this->getRecaptchaSiteKey()."&onload=CaptchaCallback&render=explicit&hl={$lang}";
}
head.phtml
Файл находится по адресу /templates/demomarket/php/layout/head.phtml
Этот файл отвечает за код который размещается в теге <head> всех страниц сайта и тут нужно поменять код инициализации Google reCaptcha v3:
<?php
/**
* Содержимое html-тега <head>.
*
* @var umiTemplaterPHP|ViewPhpExtension|DemomarketPhpExtension $this
* @var array $variables
*/
?>
<base href="<?= $this->getResourceDirectory() ?>">
<title><?= $this->escape($variables['title']) ?></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="<?= $this->escape($variables['meta']['description']) ?>">
<meta name="keywords" content="<?= $this->escape($variables['meta']['keywords']) ?>">
<meta name="author" content="Umisoft">
<?= $this->macros('content', 'includeFrontendResources') ?>
<link rel="stylesheet" href="compiled/demomarket.lib.min.css">
<link rel="stylesheet" href="compiled/demomarket.min.css">
<?= $this->getCanonicalLinkTag($variables) ?>
<script type="text/javascript" src="/ulang/<?= $variables['lang'] ?>/common/emarket/?js" charset="utf-8"></script>
<script src="compiled/demomarket.lib-min.js"></script>
<script src="compiled/demomarket-min.js"></script>
<?php if ($this->isRecaptchaEnabled()): ?>
<script src="<?= $this->getRecaptchaUrl($variables) ?>" async defer></script>
<!--suppress JSUnusedLocalSymbols -->
<script>
var CaptchaCallback = function() {
$('.g-recaptcha')
.append('<input type="hidden" name="g-recaptcha-response" class="g-recaptcha-response">')
.append('<input type="hidden" name="action" class="recaptcha-action" value="homepage">');
grecaptcha.ready(function() {
grecaptcha.execute("<?=$this->getRecaptchaSiteKey()?>", {action: 'homepage'}).then(function(token) {
$('.g-recaptcha-response').val(token);
$('.recaptcha-action').val('homepage');
});
});
};
</script>
<?php endif; ?>
<style>
<?= $this->getUserCss() ?>
</style>
Результат
Если все сделано правильно в правом нижнем углу сайта появится виджет:
Благодаря тому, что Google reCaptcha v3 работает в фоне и не отвлекает пользователя от выполнения действий на сайте повышается его удобство использования и соответственно увеличивается конверсия.
