Vitaliks в 10:22, 31 августа 2019

2019-08-31T10:22:42Z

Vitaliks: Новая страница: «'''Актуально для версии 20''' == Задача == Реализовать использование Google reCaptcha v3 в шаблоне Demoma…»

2019-08-31T10:22:12Z

Новая страница: «'''Актуально для версии 20''' == Задача == Реализовать использование Google reCaptcha v3 в шаблоне Demoma…»

Новая страница

'''Актуально для версии 20'''

== Задача ==
Реализовать использование Google reCaptcha v3 в шаблоне Demomarket.

== Решение ==
Для использования Google reCaptcha v3 необходимо внести небольшие изменения в несколько файлов шаблона:

===DemomarketPhpExtension.php===
Файл находится по адресу /templates/demomarket/php/library/DemomarketPhpExtension.php

В файле нужно изменить метод '''getRecaptchaUrl''' так, чтобы в GET параметре render передавался SiteKey Google reCaptcha v3:
<source lang='php'>
/**
* Возвращает 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}";
}
</source>

===head.phtml===
Файл находится по адресу /templates/demomarket/php/layout/head.phtml

Этот файл отвечает за код который размещается в теге <head> всех страниц сайта и тут нужно поменять код инициализации Google reCaptcha v3:
<source lang='php'>
<?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>


<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>
</source>

===Результат===
Если все сделано правильно в правом нижнем углу сайта появится виджет:

[[Файл:Google reCaptcha v3.png]]

Благодаря тому, что Google reCaptcha v3 работает в фоне и не отвлекает пользователя от выполнения действий на сайте повышается его удобство использования и соответственно увеличивается конверсия.

[[category:Верстка в PHP]][[category:Вопросы и уроки разработки сайтов на UMI.CMS]]

@@ Строка 92: / Строка 92: @@
 [[Файл:Google reCaptcha v3.png]]
-Благодаря тому, что Google reCaptcha v3 работает в фоне и не отвлекает пользователя от выполнения действий на сайте повышается его удобство использования и соответственно увеличивается конверсия.
+Благодаря тому, что Google reCaptcha v3 работает в фоне и не отвлекает пользователя от выполнения действий на сайте повышается удобство его использования и соответственно увеличивается конверсия.
 [[category:Верстка в PHP]][[category:Вопросы и уроки разработки сайтов на UMI.CMS]]

Google reCAPTCHA v3 в Demomarket - История изменений

Vitaliks в 10:22, 31 августа 2019

Vitaliks: Новая страница: «'''Актуально для версии 20''' == Задача == Реализовать использование Google reCaptcha v3 в шаблоне Demoma…»