Разработка виджета для Webasyst TV

Уроки » №3. Пошаговое руководство по разработке виджета «Статистика магазина» для панели управления Webasyst и Webasyst TV

В этой статье подробно рассказывается о разработке виджета панели управления 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-шаблонов в зависимости от текущих настроек или других условий, а также поддерживают стандартный механизм локализации строк Вебасиста. Подробнее о реализации этих возможностей читайте в статье «Основы создания виджетов».