В этой статье подробно рассказывается о разработке виджета панели управления Webasyst для приложения Shop-Script 6.
Виджеты для других приложений и системные виджеты создаются аналогично: виджеты для приложений — в директории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 array( 'name' => 'Shop statistics', 'size' => array('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 = array( '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 += array( '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-шаблонов в зависимости от текущих настроек или других условий, а также поддерживают стандартный механизм локализации строк Вебасиста. Подробнее о реализации этих возможностей читайте в статье «Основы создания виджетов».