В этой статье подробно рассказывается о разработке виджета панели управления Webasyst для приложения Shop-Script.
Виджеты для других приложений и системные виджеты создаются аналогично: виджеты для приложений — в директорииwa-apps/[app_id]/widgets/соответствующего приложения, а файлы общесистемных виджетов — в директории фреймворкаwa-widgets/. Подробнее об основах разработки виджетов.
Если вы планируете опубликовать ваш виджет в магазине Webasyst, то при разработке необходимо учитывать требования, предъявляемые к публикации программных продуктов.
0. Режим разработки
Перед началом разработки убедитесь, что в вашей установке фреймворка Webasyst включен режим разработки. В этом режиме отключается всяческое кеширование, что необходимо для отладки программного кода. Режим разработки можно включить либо в системных настройках аккаунта, либо в файле wa-config/config.php, как показано ниже:
'debug' => true,
1. Файловая структура
Придумайте удобный идентификатор для своего виджета. Идентификатор может содержать только латинские буквы, цифры и символы подчеркивания. Для примера виджета, описанного в этом руководстве будем использовать идентификатор stats (этот простой виджет-пример будет показывать пользователю бекенда общее количество основных записей в базе данных интернет-магазина: товаров, категорий, изображений, покупателей и заказов).
Поскольку это виджет приложения, то создадим в директории с файлами этого приложения поддиректорию с идентфикатором виджета: wa-apps/shop/widgets/stats/. Пути к файлам виджета в дальнейшем будет указывать относительно этой корневой директории.
В качестве примера мы рассматриваем создание файловой структуры вручную. В реальной жизни рекомендуем использовать консольную команду php wa.php createWidget APP_ID WIDGET_NAME.
1. Создадим главный конфигурационный файл виджета lib/config/widget.php:
<?php
return [
'name' => 'Shop statistics',
'size' => ['2x2', '2x1'],
'img' => 'img/stats.png'
];
2. Загрузим в директорию img/ файл-иконку виджета stats.png (это имя мы указали в конфигурационном файле widget.php).
3. Создадим файл основного PHP-класса виджета lib/shopStats.widget.php и в нем класс shopStatsWidget, унаследованный от системного класса waWidget:
<?php
class shopStatsWidget extends waWidget
{
public function defaultAction()
{
//
}
}
4. Осталось создать HTML-шаблон (templates/Default.html), в который будут передаваться данные из основного PHP-класса виджета.
2. Основной метод класса виджета — defaultAction()
Основной метод класса виджета — defaultAction(). В этом методе реализуем всю нужную нам логику и с помощью метода display() передадим в HTML-шаблон значения, которые нужно отображать в виджете. Поскольку мы разрабатываем виджет для приложения, то в коде виджета автоматически доступны все классы и функции этого приложения.
Этот виджет-пример отображает данные, предназначенные для ограниченного круга пользователей бекенда (администраторов), поэтому используем проверку прав доступа:
<?php
class shopStatsWidget extends waWidget
{
public function defaultAction()
{
//проверяем, обладает ли пользователь полным доступом к приложению Shop-Script
$is_admin = wa()->getUser()->isAdmin('shop');
$result = [
'is_admin' => $is_admin,
];
//для пользователей с полным доступом получаем статистические данные
if ($is_admin) {
$product_model = new shopProductModel();
$category_model = new shopCategoryModel();
$product_images_model = new shopProductImagesModel();
$customer_model = new shopCustomerModel();
$order_model = new shopOrderModel();
$result += [
'products' => $product_model->countAll(),
'images' => $product_images_model->countAll(),
'categories' => $customer_model->countAll(),
'customers' => $category_model->countAll(),
'orders' => $order_model->countAll(),
];
}
//передаем информацию в HTML-шаблон
$this->display($result);
}
}
3. Шаблон вывода виджета — Default.html
Добавим шаблон для вывода информации, подготовленной в основном классе виджета:
<div class="block">
{if $is_admin}{* отображаем данные для пользователей с полным доступом *}
<ul class="zebra">
<li>[`Products`]: <b>{$products}</b></li>
<li>[`Images`]: <b>{$images}</b></li>
<li>[`Categories`]: <b>{$categories}</b></li>
<li>[`Customers`]: <b>{$customers}</b></li>
<li>[`Orders`]: <b>{$orders}</b></li>
</ul>
{else}{* для всех остальных пользователей показываем сообщение об ограничении доступа *}
<p class="gray align-center">[`You are not authorized to view store statistics. Please ask your Webasyst admin for access.`]</p>
{/if}
</div>
4. Готово!
Виджет готов, и уже можно добавить его на свою панель управления, чтобы проверить результат.
* * *
Виджеты могут предоставлять пользователям произвольные наборы настроек, могут использовать по несколько HTML-шаблонов в зависимости от текущих настроек или других условий, а также поддерживают стандартный механизм локализации строк Вебасиста. Подробнее о реализации этих возможностей читайте в статье «Основы создания виджетов».
