Фронтенд блока
Это третья статья из цикла статей о разработке блока для приложения "Конструктор". Если Вы не читали первые две, "Каркас блока" и "Настройки блока", рекомендуем с ними ознакомиться.
1. Дополнительные переменные и обработка CSS
По умолчанию, система передает в шаблон фронтенда блока переменные $block_id, $block_data и $block_settings, которые содержат идентификтаор блока, его данные и настройки соответственно. Так же, система добавит к шаблону css и js код блока. Здесь требуется обратить внимание на два важных момента:
- Как передать дополнительные переменные в шаблон
- Каким образом обрабатывается CSS-код блока, чтобы он не распространялся на другие блоки.
Разберем эти моменты по порядку.
Чтобы передать дополнительные переменные в шаблон фронтенда блока, необходимо переопределить метод getFrontendHtml(), например, так:
// Метод для формирования шаблона фронтенда public function getFrontendHtml() { if(!$this->id) {return '';} $view = wa()->getView(); $settings = $this->getSettings(); $settings = $this->applyLegacyColors($settings); $view->assign('block_id', $this->id); $view->assign('block_data', $this->data); $view->assign('block_settings', $settings); // Дополнительно передадим собственную переменную $view->assign('my_custom_variable', 'test'); $view->assign('form_url', $this->getRouteUrl('receiveRequest')); // Это правило замены идентификторов в CSS $css = str_replace('#landings_block_ ', '#landings_block_'.$this->id.' ', $this->data['css']); return $view->fetch('string:'.$this->data['html'].'<script type="text/javascript">'.$this->data['js'].'</script>').'<style type="text/css">'.$css.'</style>'; }
Как видно из примера, мы передали в шаблон дополнительную переменную my_custom_variable.
Теперь по поводу CSS: обратите внимание, что стандартно, система заменит в CSS код
#landings_block_
на код
#landings_block_<ID_БЛОКА>
Это нужно, чтобы CSS действовал только внутри указанного блока. Таким образом, Вы можете перенастроить правила замены и предупредить об этом пользователя.
Важно! JS-код обрабатывается как шаблон, и следовательно, в нем доступны те же переменные smarty, что и в шаблоне, а так же требуется следить за синтаксисом.
2. Особые обработчики событий для блоков
Само собой, блоки могут быть интерактивными, а для интерактивности требуется передавать и принимать данные с сервера. Приложение "Конструктор" поддерживает создание методов в блоках, аналогичных по действию контроллерам плагинов. Теперь разберемся, как их вызывать.
Сначала в блоке требуется создать метод с произвольным именем, который будет вызываться, например:
// Метод приема запроса от пользователя public function receiveRequest() { $setting = waRequest::post('my_custom_setting', '', 'string'); // Тут можно добавить любой код для обработки return array('result' => 1, 'message' => 'Отлично, приняли данные, значение:'.htmlspecialchars($setting, ENT_QUOTES)); }
Затем, требуется определить метод frontendExecMap(), который поставит в соответствие нашему методу строковый идентификатор, чтобы блок знал, что этот метод можно вызвать из фронтенда.
// Карта выполнения фронтенд-методов public function frontendExecMap() { return array( 'receive' => 'receiveRequest', ); }
Чтобы во фронтенде получить ссылку, к которой прикреплён этот метод, в методе getFrontendHtml() можно вызывать код:
$url = $this->getRouteUrl('receiveRequest');
Где receiveRequest - это имя метода.
Итоговый код фронтенд-шаблона блока:
<div class="container-fluid"> <div class="row"> <div class="col-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12"> <p>Это мой блок. Таких блоков много, но этот — мой.</p><br> <input type="text" class="my-custom-value" value="10"><br> <input type="button" value="Отправить" class="my-block-send"> </div> </div> </div>
Итоговый код js блока:
$(document).ready(function() { $('#landings_block_{$block_id|escape} .my-block-send').click(function() { var value = $('.my-custom-value').val(); $.post('{$form_url|escape}', 'my_custom_setting='+encodeURIComponent(value), function(jData) { alert(jData.data.message); }, 'json'); }); });
Плагин, который получился по итогам действий, описанных в данной статье, можно скачать по этой ссылке.