umbot - v2.2.0
    Preparing search index...

    Class ViberCard

    ViberCard Класс для создания и отображения карточек в Viber. Наследуется от TemplateCardTypes и реализует специфичную для Viber логику.

    Основные возможности:

    • Создание карточек с изображениями и текстом
    • Поддержка форматированного текста (HTML)
    • Ограничение количества изображений (максимум 7)
    • Адаптация размеров карточки под количество изображений
    • Поддержка различных типов кнопок
    • Автоматическое форматирование текста
    • Поддержка цветов и стилей текста
    // Создание карточки с одним изображением
    const card = new ViberCard();
    const image = new Image();
    image.init('product1.jpg', 'Товар 1', 'Описание 1');
    image.button.addBtn('Купить', 'buy_action');
    card.images = [image];
    const result = await card.getCard(true);
    // result = {
    //     Columns: 6,
    //     Rows: 6,
    //     Image: 'product1.jpg',
    //     Text: '<font color=#000><b>Товар 1</b></font><br><font color=#666>Описание 1</font>',
    //     ActionType: 'reply',
    //     ActionBody: 'buy_action',
    //     Buttons: [{
    //         Columns: 6,
    //         Rows: 1,
    //         Text: '<font color=#fff>Купить</font>',
    //         ActionType: 'reply',
    //         ActionBody: 'buy_action'
    //     }]
    // }

    // Создание карточки с несколькими изображениями
    const multipleCard = new ViberCard();
    const images = [
        new Image('product1.jpg', 'Товар 1', 'Описание 1'),
        new Image('product2.jpg', 'Товар 2', 'Описание 2'),
        new Image('product3.jpg', 'Товар 3', 'Описание 3')
    ];
    multipleCard.images = images;
    const result = await multipleCard.getCard(false);
    // result = [
    //     {
    //         Columns: 6,
    //         Rows: 6,
    //         Image: 'product1.jpg',
    //         Text: '<font color=#000><b>Товар 1</b></font><br><font color=#666>Описание 1</font>',
    //         ActionType: 'reply',
    //         ActionBody: 'card_action'
    //     },
    //     {
    //         Columns: 6,
    //         Rows: 6,
    //         Image: 'product2.jpg',
    //         Text: '<font color=#000><b>Товар 2</b></font><br><font color=#666>Описание 2</font>',
    //         ActionType: 'reply',
    //         ActionBody: 'card_action'
    //     },
    //     {
    //         Columns: 6,
    //         Rows: 6,
    //         Image: 'product3.jpg',
    //         Text: '<font color=#000><b>Товар 3</b></font><br><font color=#666>Описание 3</font>',
    //         ActionType: 'reply',
    //         ActionBody: 'card_action'
    //     }
    // ]

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    _appContext button images isUsedGallery title

    Methods

    getCard _getElement

    Constructors

    Properties

    Protected_appContext

    _appContext: AppContext

    Контекст приложения.

    button: Buttons

    Кнопки для карточки. Используются для взаимодействия с пользователем.

    Buttons

    this.button.addBtn('Купить');
    this.button.addLink('Подробнее', 'https://example.com');
    images: Image[]

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

    Image

    this.images = [
        new Image('image1.jpg', 'Заголовок 1', 'Описание 1'),
        new Image('image2.jpg', 'Заголовок 2', 'Описание 2')
    ];
    isUsedGallery: boolean = false

    Флаг использования галереи изображений. true - изображения отображаются в виде галереи false - изображения отображаются как отдельные карточки

    this.isUsedGallery = true; // Включить режим галереи
    title: string | null

    Заголовок карточки. Отображается в верхней части карточки.

    this.title = 'Название товара';

    Methods

    • Получает карточку для отображения в Viber.

      Процесс работы:

      1. Проверяет количество изображений:
        • Ограничивает до 7 изображений
      2. Если isOne=true или одно изображение:
        • Создает одну карточку
        • Возвращает объект IViberCard
      3. Иначе:
        • Создает массив карточек
        • Добавляет карточку для каждого изображения
        • Возвращает массив IViberCard[]

      Parameters

      • isOne: boolean

        Флаг отображения только одного элемента

      Returns Promise<IViberButton | IViberButton[]>

      Карточка или массив карточек

      const card = new ViberCard();
      card.images = [
          new Image('product1.jpg', 'Товар 1', 'Описание 1'),
          new Image('product2.jpg', 'Товар 2', 'Описание 2')
      ];

      // Получить одну карточку
      const singleCard = await card.getCard(true);
      // singleCard = {
      //     Columns: 6,
      //     Rows: 6,
      //     Image: 'product1.jpg',
      //     Text: '<font color=#000><b>Товар 1</b></font><br><font color=#666>Описание 1</font>',
      //     ActionType: 'reply',
      //     ActionBody: 'card_action'
      // }

      // Получить массив карточек
      const multipleCards = await card.getCard(false);
      // multipleCards = [
      //     {
      //         Columns: 6,
      //         Rows: 6,
      //         Image: 'product1.jpg',
      //         Text: '<font color=#000><b>Товар 1</b></font><br><font color=#666>Описание 1</font>',
      //         ActionType: 'reply',
      //         ActionBody: 'card_action'
      //     },
      //     {
      //         Columns: 6,
      //         Rows: 6,
      //         Image: 'product2.jpg',
      //         Text: '<font color=#000><b>Товар 2</b></font><br><font color=#666>Описание 2</font>',
      //         ActionType: 'reply',
      //         ActionBody: 'card_action'
      //     }
      // ]

    Protected Static_getElement

    • _getElement(image: Image, countImage?: number): IViberButton

      Создает элемент карточки для Viber из объекта изображения.

      Процесс работы:

      1. Проверяет наличие токена изображения:
        • Если нет токена, использует путь к изображению
      2. Создает базовую структуру карточки:
        • Устанавливает количество колонок (от 1 до 6)
        • Устанавливает количество строк (от 1 до 6)
      3. Добавляет изображение, если оно есть:
        • Использует токен или путь к изображению
      4. Добавляет кнопки и форматированный текст:
        • Форматирует заголовок жирным шрифтом
        • Добавляет описание с правильным цветом
        • Применяет стили и цвета

      Parameters

      • image: Image

        Объект с изображением

      • OptionalcountImage: number = 1

        Количество изображений в карточке

      Returns IViberButton

      Элемент карточки для Viber

      // Создание элемента с одним изображением
      const image = new Image();
      image.init('product.jpg', 'Товар', 'Описание');
      const element = ViberCard._getElement(image);
      // element = {
      //     Columns: 6,
      //     Rows: 6,
      //     Image: 'product.jpg',
      //     Text: '<font color=#000><b>Товар</b></font><br><font color=#666>Описание</font>',
      //     ActionType: 'reply',
      //     ActionBody: 'card_action'
      // }

      // Создание элемента с кнопкой
      const imageWithButton = new Image();
      imageWithButton.init('product.jpg', 'Товар', 'Описание');
      imageWithButton.button.addBtn('Купить', 'buy_action');
      const elementWithButton = ViberCard._getElement(imageWithButton);
      // elementWithButton = {
      //     Columns: 6,
      //     Rows: 6,
      //     Image: 'product.jpg',
      //     Text: '<font color=#000><b>Товар</b></font><br><font color=#666>Описание</font>',
      //     ActionType: 'reply',
      //     ActionBody: 'buy_action',
      //     Buttons: [{
      //         Columns: 6,
      //         Rows: 1,
      //         Text: '<font color=#fff>Купить</font>',
      //         ActionType: 'reply',
      //         ActionBody: 'buy_action'
      //     }]
      // }

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods