1. YCLIENTS
  2. Маркетплейс интеграций
  3. Плагинизация
  4. Руководство по созданию Frontend плагина
  5. Плагинизация виджета онлайн-записи
  6. Примеры плагинов виджета
  7. Тестовый плагин виджета (masters-promo)

Тестовый плагин виджета (masters-promo)


Репозиторий

https://github.com/yclients/example-plugin-frontend/tree/main/apps/masters-promo

Что делает

Добавляет ссылки на портфолио на странице информации о мастере.

Принцип работы

Старт работы плагина

Запуск плагина происходит через функцию initializePlugin
(репозиторий)

export function initializePlugin() {
  LoggerUtil.info('Инициализация плагина');
  // Подписываемся на событие готовности хоста
  hostEventEmitter.onDocument(HOST_EVENT_NAMES.READY, handleHostReadyEvent);
  // Добавляем обработчик для очистки при закрытии страницы
  if (typeof window !== 'undefined') {
    window.addEventListener('beforeunload', cleanup);
  }
}

LoggerUtil — утилита для логирования. Добавлена для примера.

При старте плагин подписывается на событие HOST_EVENT_NAMES.READY, которое будет отправлено виджетом онлайн записи, когда он будет готов для работы с плагинами.

handleHostReadyEvent

/**
* Обработчик события готовности хоста
*/
function handleHostReadyEvent(event: CustomEvent<THostReadyEvent>): void {
    LoggerUtil.info('Получено событие готовности хоста:', event);
    MastersService.addSlotsForMasterPortfolios();
}

В handleHostReadyEvent прописываем основную логику работу плагина. В данной ситуации один вызов addSlotsForMasterPortfolios.

MastersService

(репозиторий)

export class MastersService {
  static addSlotsForMasterPortfolios() {
    if (!WidgetApiUtil.isMethodAvailable('addSlotInfo')) {
      LoggerUtil.error('Метод addSlotInfo недоступен');
      return;
    }
    for (const masterPortfolio of MASTER_PORTFOLIO_DATA) {
      const slotId = window.widgetApi.addSlotInfo({
        containerType: EWApiSlotContainerType.masterInfoAfterInformation,
        containerOptions: { masterId: masterPortfolio.masterId },
        componentType: EWApiSlotComponentType.link,
        componentOptions: {
          linkLabel: 'Портфолио',
          linkType: EWApiLinkType.ghost,
          url: masterPortfolio.charmDirectLink,
        },
      });
      LoggerUtil.info(`Добавлен слот для мастера ${masterPortfolio.masterId}: ${slotId}`);
    }
  }
}

WidgetApiUtil — обертка на Widget API. Добавлена для примера.
MASTER_PORTFOLIO_DATA — конфигурация ссылок для мастеров (ссылка).

Основа логики плагина — общение с widgetApi виджета онлайн записи. Документация расположена по ссылке.

Предыдущая статья Плагин кастомизации
Следующая статья Плагинизация ERP