Class Card

Card Класс для создания и управления карточками на различных платформах.

Класс предоставляет функциональность для:

Создания карточек с изображениями, заголовками и описаниями
Добавления кнопок к карточкам
Адаптации карточек под различные платформы (Алиса, VK, Telegram, Viber, Marusia, SmartApp)
Поддержки галерей изображений

Ограничения по платформам:

Алиса:

Максимум 5 элементов в галерее
Изображения: до 1MB, 1024x1024px
Форматы: JPG, PNG

VK:

Максимум 10 элементов в карусели
Изображения: до 5MB, рекомендуется 13:8
Форматы: JPG, PNG, GIF

Telegram:

Максимум 10 изображений в альбоме
Изображения: до 10MB, 1280x1280px
Форматы: JPG, PNG, WEBP

Viber:

Максимум 6 элементов в карусели
Изображения: до 1MB, рекомендуется 400x400px
Форматы: JPG, PNG

Example

import { Card } from './components/card/Card';

// Создание простой карточки
const card = new Card();
card.setTitle('Заголовок карточки')
    .setDescription('Описание карточки')
    .addImage('image.jpg', 'Заголовок изображения', 'Описание изображения')
    .addButton('Нажми меня');

// Создание карточки с галереей
const galleryCard = new Card();
galleryCard.isUsedGallery = true;
galleryCard.addImage('image1.jpg', 'Изображение 1', 'Описание 1')
    .addImage('image2.jpg', 'Изображение 2', 'Описание 2')
    .addButton({
        title: 'Подробнее',
        url: 'https://example.com',
        payload: { action: 'details' }
    });

// Кастомные шаблоны для разных платформ

// Кастомное переопределение ответа, на примере: Алиса - BigImage
const alisaCard = new Card();
alisaCard.template = {
    type: 'BigImage',
    image_id: '123456/123456',
    title: 'Заголовок',
    description: 'Описание',
    button: {
        text: 'Кнопка',
        url: 'https://example.com'
    }
};

// Кастомное переопределение ответа, на примере: VK - Карусель
const vkCard = new Card();
vkCard.template = {
    type: 'carousel',
    elements: [{
        photo_id: '-123456_789',
        title: 'Заголовок',
        description: 'Описание',
        buttons: [{
            action: {
                type: 'text',
                label: 'Кнопка',
                payload: { button: 1 }
            }
        }]
    }]
};

// Кастомное переопределение ответа, на примере: Telegram - HTML-разметка
const telegramCard = new Card();
telegramCard.template = {
    type: 'article',
    message_text: '<b>Заголовок</b>\n<i>Описание</i>',
    parse_mode: 'HTML',
    reply_markup: {
        inline_keyboard: [[{
            text: 'Кнопка',
            callback_data: 'button_1'
        }]]
    }
};

// Кастомное переопределение ответа, на примере: Viber - Карусель
const viberCard = new Card();
viberCard.template = {
    type: 'carousel',
    elements: [{
        image: 'https://example.com/image.jpg',
        title: 'Заголовок',
        subtitle: 'Подзаголовок',
        buttons: [{
            text: 'Кнопка',
            actionType: 'reply',
            actionBody: 'button_1'
        }]
    }]
};

// Получение карточки для текущей платформы
const cards = await card.getCards();

Index

Constructors

constructor

new Card(): Card
Создает новый экземпляр карточки. Инициализирует все поля значениями по умолчанию.

Returns Card
Example
```
const card = new Card();
```
- Defined in src/components/card/Card.ts:240

Properties

title

title: null | string

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

Example

card.setTitle('Название товара');

desc

desc: null | string

Описание элемента карточки. Отображается под заголовком.

Example

card.setDescription('Подробное описание товара');

images

images: Image[]

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

See

Image

Example

card.addImage('product.jpg', 'Название товара', 'Описание товара');

button

button: Buttons

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

See

Buttons

Example

card.addButton('Купить');
card.addButton({
    title: 'Подробнее',
    url: 'https://example.com'
});

isOne

isOne: boolean

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

Example

card.isOne = true; // Отобразить только первый элемент

isUsedGallery

isUsedGallery: boolean = false

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

Example

card.isUsedGallery = true; // Включить режим галереи

template

template: any = null

Произвольный шаблон для отображения карточки. Используется для кастомизации отображения на определенных платформах. Не рекомендуется использовать при заание поддерживаемых платформ. При использовании этого параметра вы сами отвечаете за корректное отображение.

Example

card.template = {
    type: 'custom_card',
    content: { ... }
};

Methods

setTitle

setTitle(title: string): Card
Устанавливает заголовок для карточки.
Parameters
- title: string
  Заголовок карточки
Returns Card
this для цепочки вызовов
Example
```
card.setTitle('Название товара');
```
- Defined in src/components/card/Card.ts:258

setDescription

setDescription(description: string): Card
Устанавливает описание для карточки.
Parameters
- description: string
  Описание карточки
Returns Card
this для цепочки вызовов
Example
```
card.setDescription('Подробное описание товара');
```
- Defined in src/components/card/Card.ts:272

addButton

addButton(button: TButton): Card

Добавляет кнопку в карточку.

Parameters

button: TButton
Кнопка для добавления (строка или объект)

Returns Card

this для цепочки вызовов

Example

// Добавление простой кнопки
card.addButton('Купить');

// Добавление кнопки с дополнительными параметрами
card.addButton({
    title: 'Подробнее',
    url: 'https://example.com',
    payload: { action: 'details' }
});

clear

clear(): void
Очищает все элементы карточки.

Returns void
Example
```
card.clear(); // Удалить все изображения
```
- Defined in src/components/card/Card.ts:314

add

add(
    image: null | string,
    title: string,
    desc?: string,
    button?: null | TButton,
): boolean
Вставляет элемент в карточку|список.
Parameters
- image: null | string
  Идентификатор или расположение изображения
- title: string
  Заголовок изображения
- Optionaldesc: string = ' '
  Описание изображения
- Optionalbutton: null | TButton = null
  Кнопки для элемента
Returns boolean
true если элемент успешно добавлен
Deprecated
Используйте метод addImage вместо этого
Example
```
// Устаревший метод - не рекомендуется использовать
const success = card.add('product.jpg', 'Название', 'Описание');

// Рекомендуемый метод
card.addImage('product.jpg', 'Название', 'Описание');
```
- Defined in src/components/card/Card.ts:335

addImage

addImage(
    image: null | string,
    title: string,
    desc?: string,
    button?: null | TButton,
): Card
Добавляет изображение в карточку.
Parameters
- image: null | string
  Идентификатор или URL изображения
- title: string
  Заголовок изображения
- Optionaldesc: string = ' '
  Описание изображения
- Optionalbutton: null | TButton = null
  Кнопки для элемента
Returns Card
this для цепочки вызовов
Remarks
Ограничения на изображения:
- Алиса: до 1MB, 1024x1024px, JPG/PNG
- VK: до 5MB, рекомендуется 13:8, JPG/PNG/GIF
- Telegram: до 10MB, 1280x1280px, JPG/PNG/WEBP
- Viber: до 1MB, рекомендуется 400x400px, JPG/PNG
Example
```
// Добавление одного изображения
card.addImage('image.jpg', 'Название', 'Описание');

// Добавление изображения с кнопкой
card.addImage('product.jpg', 'Товар', 'Описание', {
    title: 'Купить',
    url: 'https://shop.com/product',
    payload: { action: 'buy', id: 123 }
});

// Добавление нескольких изображений в галерею
card.isUsedGallery = true;
card.addImage('image1.jpg', 'Фото 1')
    .addImage('image2.jpg', 'Фото 2')
    .addImage('image3.jpg', 'Фото 3');
```
- Defined in src/components/card/Card.ts:380

getCards

getCards(userCard?: null | TemplateCardTypes): Promise<any>

Получает карточку в формате для текущей платформы.

Parameters

OptionaluserCard: null | TemplateCardTypes = null
Пользовательский шаблон карточки

Returns Promise<any>

Карточка в формате текущей платформы

Remarks

Возвращаемые значения зависят от платформы:

Алиса:

{
    type: 'BigImage',
    image_id: string,
    title?: string,
    description?: string,
    button?: {
        text: string,
        url?: string,
        payload?: any
    }
}

VK:

{
    type: 'carousel',
    elements: [{
        photo_id: string,
        title?: string,
        description?: string,
        buttons?: Array<{
            action: {
                type: string,
                label: string,
                payload?: any
            }
        }>
    }]
}

Telegram:

{
    type: string,
    media: Array<{
        type: 'photo',
        media: string,
        caption?: string
    }>,
    reply_markup?: {
        inline_keyboard: Array<Array<{
            text: string,
            url?: string,
            callback_data?: string
        }>>
    }
}

Example

// Получение карточки для текущей платформы
const card = new Card();
card.addImage('image.jpg', 'Название', 'Описание')
    .addButton('Подробнее');

const result = await card.getCards();
console.log(result);

// Использование пользовательского шаблона
const customTemplate = {
    type: 'custom',
    content: { ... }
};
const customResult = await card.getCards(customTemplate);

getCardsJson

getCardsJson(userCard?: null | TemplateCardTypes): Promise<string>
Возвращает JSON-строку со всеми элементами карточки.
Parameters
- OptionaluserCard: null | TemplateCardTypes = null
  Пользовательский класс для отображения карточки
Returns Promise<string>
JSON-строка с данными карточки
Example
```
const cardJson = await card.getCardsJson();
```
- Defined in src/components/card/Card.ts:519

Class Card

Example

Index

Constructors

Properties

Methods

Constructors

constructor

Returns Card

Example

Properties

title

Example

desc

Example

images

See

Example

button

See

Example

isOne

Example

isUsedGallery

Example

template

Example

Methods

setTitle

Parameters

Returns Card

Example

setDescription

Parameters

Returns Card

Example

addButton

Parameters

Returns Card

Example

clear

Returns void

Example

add

Parameters

Returns boolean

Deprecated

Example

addImage

Parameters

Returns Card

Remarks

Example

getCards

Parameters

Returns Promise<any>

Remarks

Example

getCardsJson

Parameters

Returns Promise<string>

Example

Settings

On This Page