Фронтенд блока

Это третья статья из цикла статей о разработке блока для приложения "Конструктор". Если Вы не читали первые две, "Каркас блока" и "Настройки блока", рекомендуем с ними ознакомиться.

 

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>Это мой блок. Таких блоков много, но этот &mdash; мой.</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');
    });
});

Плагин, который получился по итогам действий, описанных в данной статье, можно скачать по этой ссылке.