Главная / Разработчикам / Создание блоков

Каркас блока

В этой статье мы подробно и по шагам поясним, как создать собственный блок для приложения "Конструктор".

 

1. Каркас плагина

Если не брать во внимание возможность добавления блоков, плагины "Конструктора" ничем не отличаются от других плагинов для приложений Webasyst, например, приложения "Магазин". Поэтому, если Вы не в курсе, как создать каркас, рекомендуем ознакомиться со статьей на сайте Webasyst. Готовый каркас можно скачать здесь.

 

2. Подготовка класса блока

Когда каркас создан, необходимо подготовить класс блока, который будет использоваться системой. Мы рекомендуем хранить файл с этим классом в подкаталоге /classes/ плагина, как полагается по правилам Webasyst. Имя файла класса должно строиться по следующему шаблону:

landingsBlock<ИМЯ_БЛОКА>.class.php

Например, в нашем случае блок будет называться HelloWorld, а значит, имя файла будет следующим:

landingsBlockHelloWorld.class.php

Сам класс должен наследоваться от класса landingsBlock и содержать обязательный статический метод getInfo(), который возвращает основные данные о блоке. Пример приведен ниже:

<?php

class landingsBlockHelloWorld extends landingsBlock
{
    static public function getInfo()
    {
        return array(
            'code' => 'helloWorld', // Идентификатор блока, горбатым стилем
            'type' => self::TYPE_CONTENT, // Тип блока
            'name' => 'Мой супер-блок', // Имя блока
            'description' => 'Будет делать все, что нужно, когда мы закончим с ним', // Описание блока
            'icon' => wa()->getAppStaticUrl('landings').'plugins/tblock/img/hello-world.png', // URL логотипа блока
        );
    }
}

Обратите внимание на поле "type" - это тип блока. Типов бывает всего три:

  • TYPE_HEADER - эти блоки система будет использовать как блоки шапки;
  • TYPE_CONTENT - эти блоки система будет использовать в контентной части сайта;
  • TYPE_FOOTER - эти блоки система будет использовать как блоки подвала.

Готово! Пока что наш блок ничего не умеет, но начало положено. С этого момента его можно регистрировать в системе.

 

3. Регистрация блока в системе

Для регистрации блоков предусмотрен специальный хук landings_block, с помощью которого мы будем действовать. Для этого сначала убедимся, что наш плагин задействует этот хук. Для этого в файле /tblock/lib/config/plugin.php проверим, подключен ли обработчик.

'handlers' => array
    (
        'landings_block' => 'landingsBlock', // Новые блоки
    ),

Теперь в самом классе плагина landingsTblock.plugin.php объявим метод, который зарегистрирует наш блок HelloWorld:

public function landingsBlock()
{
    return array(
        'helloWorld' => true,
    );
}

Теперь наш новый блок появился в системе. Если нет - попробуйте очистить кеш в приложении "Инсталлер".

 

4. Стандартный HTML, СSS и JS блока

Когда основа нашего блока готова, пора сделать так, чтобы он отображал какое-то содержимое. Для этого нам нужны стандартные шаблоны. Мы рекомендуем использовать следующую структуру:

/tblock/css/blocks/helloWorld/frontend.css // CSS файл фронтенда блока
/tblock/js/blocks/helloWorld/frontend.js   // JS файл фронтенда блока
/tblock/templates/blocks/helloWorld/Frontend.html // HTML шаблон фронтенда блока
/tblock/templates/blocks/helloWorld/Settings.html // HTML шаблон настроек блока

При данной структуре мы рекомендуем поместить в подпапки /blocks/ каталогов css и js файлы .htaccess, закрывающие прямой доступ к ним, так как все файлы система обрабатывает, а не отдает "как есть".

Само собой, Вы можете использовать и другую компоновку, однако, мы рекомендуем эту для единообразности всех плагинов.

Как только все необходимые файлы созданы, нам нужно указать блоку, что требуется их использовать. Для этого, в классе блока (landingsBlockHelloWorld.class.php) переопределим следующие методы:

// Указывает блоку использовать файл /tblock/templates/blocks/helloWorld/Settings.html как шаблон настроек
public function getSettingsTemplatePath()
{
    if(!$this->exists()) {return wa()->getAppPath('templates/blocks/default/Settings.html', 'landings');}
    $path = wa()->getAppPath('plugins/tblock/templates/blocks/'.$this->data['code'].'/Settings.html', 'landings');
    if(!file_exists($path)) {return wa()->getAppPath('templates/blocks/default/Settings.html', 'landings');}
    return $path;
}
    
// Указывает блоку использовать файл /tblock/templates/blocks/helloWorld/Frontend.html как шаблон фронтенда
public function getFrontendTemplatePath()
{
    if(!$this->exists()) {return wa()->getAppPath('templates/blocks/default/Frontend.html', 'landings');}
    return wa()->getAppPath('plugins/tblock/templates/blocks/'.$this->data['code'].'/Frontend.html', 'landings');
}
    
// Указывает блоку использовать файл /tblock/css/blocks/helloWorld/frontend.css как css-файл фронтенда
public function getFrontendCssPath()
{
    if(!$this->exists()) {return wa()->getAppPath('css/blocks/default/frontend.css', 'landings');}
    return wa()->getAppPath('plugins/tblock/css/blocks/'.$this->data['code'].'/frontend.css', 'landings');
}
    
// Указывает блоку использовать файл /tblock/js/blocks/helloWorld/frontend.js как js-файл фронтенда
public function getFrontendJsPath()
{
    if(!$this->exists()) {return wa()->getAppPath('js/blocks/default/frontend.js', 'landings');}
    return wa()->getAppPath('plugins/tblock/js/blocks/'.$this->data['code'].'/frontend.js', 'landings');
}

Готово, теперь блок использует указанные файлы по-умолчанию, а пользователь может вносит изменения в код плагина. При внесении изменений пользователем сами файлы не изменяются.

 

В следующих статьях мы продолжим разработку блока, а пока, можно скачать то, что получилось по результатам этой.

Информация