Class AlisaCard

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

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

Создание больших изображений с описанием
Создание списков элементов
Создание галерей изображений
Поддержка кнопок для каждого элемента
Автоматическое ограничение длины текста
Поддержка различных типов карточек (BigImage, ItemsList)
Автоматическая обработка изображений и токенов

Ограничения:

Максимум 5 элементов в списке (ALISA_MAX_IMAGES)
Максимум 7 изображений в галерее (ALISA_MAX_GALLERY_IMAGES)
Длина заголовка: до 128 символов
Длина описания: до 256 символов

Example

// Создание простой карточки
const card = new AlisaCard();
card.images = [
    new Image('product1.jpg', 'Товар 1', 'Описание 1'),
    new Image('product2.jpg', 'Товар 2', 'Описание 2')
];
const result = await card.getCard(false);

// Создание галереи (максимум 7 изображений)
const galleryCard = new AlisaCard();
galleryCard.isUsedGallery = true;
galleryCard.images = [
    new Image('product1.jpg', 'Товар 1', 'Описание 1'),
    new Image('product2.jpg', 'Товар 2', 'Описание 2')
];
const galleryResult = await galleryCard.getCard(false);

Hierarchy (View Summary)

TemplateCardTypes
- AlisaCard

Index

Constructors

constructor

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

Returns AlisaCard
Example
```
const card = new CustomCard();
```
Inherited from TemplateCardTypes.constructor
- Defined in src/components/card/types/TemplateCardTypes.ts:88

Properties

`Static` `Readonly`ALISA_CARD_BIG_IMAGE

ALISA_CARD_BIG_IMAGE: "BigImage" = 'BigImage'

Определяет тип карточки как большое изображение. Используется для отображения одного изображения с описанием.

Особенности:

Отображает одно изображение в большом формате
Поддерживает заголовок и описание
Может содержать кнопку действия

Example

const card = new AlisaCard();
card.type = AlisaCard.ALISA_CARD_BIG_IMAGE;
// Результат будет содержать одно большое изображение
// с заголовком, описанием и кнопкой

`Static` `Readonly`ALISA_CARD_ITEMS_LIST

ALISA_CARD_ITEMS_LIST: "ItemsList" = 'ItemsList'

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

Особенности:

Отображает список элементов с изображениями
Каждый элемент может иметь заголовок и описание
Поддерживает кнопки для каждого элемента
Имеет общий заголовок и кнопку в футере

Example

const card = new AlisaCard();
card.type = AlisaCard.ALISA_CARD_ITEMS_LIST;
// Результат будет содержать список элементов
// с изображениями, заголовками и кнопками

`Static` `Readonly`ALISA_MAX_IMAGES

ALISA_MAX_IMAGES: 5

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

Особенности:

Ограничивает количество элементов в списке
Помогает оптимизировать производительность
Улучшает пользовательский опыт

Example

const maxImages = AlisaCard.ALISA_MAX_IMAGES; // 5
// Если в списке больше 5 изображений,
// будут отображаться только первые 5

`Static` `Readonly`ALISA_MAX_GALLERY_IMAGES

ALISA_MAX_GALLERY_IMAGES: 7

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

Особенности:

Ограничивает количество изображений в галерее
Оптимизирует загрузку и отображение
Улучшает производительность

Example

const maxGalleryImages = AlisaCard.ALISA_MAX_GALLERY_IMAGES; // 7
// Если в галерее больше 7 изображений,
// будут отображаться только первые 7

images

images: Image[]

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

See

Image

Example

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

button

button: Buttons

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

See

Buttons

Example

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

title

title: null | string

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

Example

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

isUsedGallery

isUsedGallery: boolean = false

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

Example

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

Methods

getCard

getCard(
isOne: boolean,
): Promise<null | IAlisaBigImage | IAlisaItemsList | IAlisaImageGallery>

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

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

Если isOne=true:
- Создает карточку с большим изображением
- Добавляет описание и кнопку
- Возвращает объект типа IAlisaBigImage
Иначе:
- Если isUsedGallery=true:
  - Создает галерею изображений
  - Возвращает объект типа IAlisaImageGallery
- Иначе:
  - Создает список элементов с заголовком
  - Добавляет кнопку в футер
  - Возвращает объект типа IAlisaItemsList

Parameters

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

Returns Promise<null | IAlisaBigImage | IAlisaItemsList | IAlisaImageGallery>

Карточка или null

Example

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

// Получить одну карточку
const singleCard = await card.getCard(true);
// singleCard = {
//     type: 'BigImage',
//     image_id: '123456789',
//     title: 'Товар 1',
//     description: 'Описание 1',
//     button: { text: 'Купить' }
// }

// Получить список
const listCard = await card.getCard(false);
// listCard = {
//     type: 'ItemsList',
//     header: { text: 'Каталог товаров' },
//     items: [
//         { title: 'Товар 1', description: 'Описание 1', image_id: '123456789' },
//         { title: 'Товар 2', description: 'Описание 2', image_id: '987654321' }
//     ],
//     footer: { text: 'Купить', button: { text: 'Купить' } }
// }

// Получить галерею
card.isUsedGallery = true;
const galleryCard = await card.getCard(false);
// galleryCard = {
//     type: 'ImageGallery',
//     items: [
//         { title: 'Товар 1', image_id: '123456789' },
//         { title: 'Товар 2', image_id: '987654321' }
//     ]
// }

Class AlisaCard

Example

Hierarchy (View Summary)

Index

Constructors

Properties

Methods

Constructors

constructor

Returns AlisaCard

Example

Properties

`Static` `Readonly`ALISA_CARD_BIG_IMAGE

Example

`Static` `Readonly`ALISA_CARD_ITEMS_LIST

Example

`Static` `Readonly`ALISA_MAX_IMAGES

Example

`Static` `Readonly`ALISA_MAX_GALLERY_IMAGES

Example

images

See

Example

button

See

Example

title

Example

isUsedGallery

Example

Methods

getCard

Parameters

Returns Promise<null | IAlisaBigImage | IAlisaItemsList | IAlisaImageGallery>

Example

Settings

On This Page

Class AlisaCard

Example

Hierarchy (View Summary)

Index

Constructors

Properties

Methods

Constructors

constructor

Returns AlisaCard

Example

Properties

Static ReadonlyALISA_CARD_BIG_IMAGE

Example

Static ReadonlyALISA_CARD_ITEMS_LIST

Example

Static ReadonlyALISA_MAX_IMAGES

Example

Static ReadonlyALISA_MAX_GALLERY_IMAGES

Example

images

See

Example

button

See

Example

title

Example

isUsedGallery

Example

Methods

getCard

Parameters

Returns Promise<null | IAlisaBigImage | IAlisaItemsList | IAlisaImageGallery>

Example

Settings

On This Page

`Static` `Readonly`ALISA_CARD_BIG_IMAGE

`Static` `Readonly`ALISA_CARD_ITEMS_LIST

`Static` `Readonly`ALISA_MAX_IMAGES

`Static` `Readonly`ALISA_MAX_GALLERY_IMAGES