Отображение данных

Компоненты для представления и организации данных.

`<ya-kit-grouping-characteristic />`

Используется для отображения и выбора различных вариантов товара (цвет, размер, материал и т.д.).

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS-классы для стилизации.
characteristic	`GroupingCharacteristicModel`	Модель характеристики товара с доступными значениями и текущим выбором.
is-сollapsable	`boolean`	Определяет, можно ли свернуть список опций.
size-table	`ProductSizeTableModel`	Модель с таблицей размеров.
on-сhange	`(id: string, value: string) => void`	Callback-функция, вызываемая при изменении выбранного значения характеристики.

Пример использования

<ya-kit-product-detail-controller as="controller">
    {{#each controller.model.groupingCharacteristics as |characteristic|}}
        <ya-kit-grouping-characteristic characteristic={{characteristic}} on-change={{controller.onVariantSelect}} />
    {{/each}}
</ya-kit-product-detail-controller>

Пример внешнего вида

Связанные модели: ProductSizeTableModel.

`<ya-kit-markdown />`

Элемент типографики подходит для шаблонов, где Rich контент необходимо задавать и настраивать из конструктора.

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS-классы для стилизации.
markup	`string`	Rich контент в формате MD разметки.

`<ya-kit-prices />`

Элемент типографики для отображения цен и скидок.

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS-классы для стилизации.
price	`number \ string`	Цена до скидки.
final-price	`number \ string`	Цена после скидки.
quantity	`number`	Количество товара.
size	`sm \ md \ lg \ xl \ 2xl`	Размер текста.
weight	`normal \ medium \ semibold \ bold`	Толщина текста.
enable-discount	`boolean`	Отображать/скрывать скидку. По-умолчанию `true`.

Пример внешнего вида

Ошибка на вики 404

`<ya-kit-products-filters />`

Компонент для фильтрации каталога товаров. Позволяет настраивать фильтрацию по различным параметрам (цена, бренд, характеристики и т. д.) и отправлять сформированные фильтры для обновления списка товаров.

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS‑классы для стилизации.
schema	`ProductsFiltersSchemaModel`	Схема фильтров, описывающая доступные параметры фильтрации и их настройки.
value	`Record<string, unknown>`	Текущие значения фильтров.
category	`CategoryModel`	Текущая выбранная категория товаров.
categories	`CategoryModel[]`	Список всех доступных категорий.
on‑submit	`(value: Record<string, unknown>) => void`	Обработчик отправки фильтров. Вызывается при применении или сбросе фильтров.

Пример использования


<ya-kit-products-listing-controller as="controller">
    <ya-kit-products-filters
        class="custom-class"
        schema={{controller.model.filters.schema}}
        values={{controller.model.filters.values}}
        values={{controller.model.filters.values}}
        category={{controller.model.categories.selected}}
        categories={{controller.model.categories.items}}
        on-submit={{controller.onFiltersChange}}
    />
</ya-kit-products-listing-controller>

Пример внешнего вида

Связанные модели: ProductsListingModel, CategoryModel.

Связанные контроллеры: ya-kit-products-listing-controller.

`<ya-kit-product-snippet />`

Компонент для отображения стандартного сниппета товара.

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS‑классы для стилизации.
product	`ProductVariantModel`	Модель варианта товара.
quantity	`number`	Количество товара в корзине.
enable‑button	`boolean`	Включение/отключение кнопки «В корзину».
enable‑carousel	`boolean`	Включение/отключение смены фотографий при наведении.
enable‑rounding	`boolean`	Включение/отключение скруглений.
enable‑badges	`boolean`	Включение/отключение отображения бейджей.
on‑toggle‑favourite	`() => void`	Обработчик добавления/удаления товара из избранного.
on‑update‑quantity	`(quantity: number) => void`	Обработчик обновления количества товара в корзине.

Пример использования


<ya-kit-product-snippet-controller product={{model}} as="controller">
    <ya-kit-product-snippet
        class="custom-class"
        product={{model}}
        quantity={{controller.quantity}}
        on-toggle-favourite={{controller.onToggleFavourite}}
        on-update-quantity={{controller.onUpdateQuantity}}
    />
</ya-kit-product-snippet-controller>

Пример внешнего вида

Связанные модели: ProductVariantModel.

Связанные контроллеры: ya-kit-product-snippet-controller.

`<ya-kit-products-sorting />`

Компонент выбора способа сортировки списка товаров. Управляет отображением доступных опций и уведомляет родительский компонент об изменении выбора.

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS‑классы для стилизации.
value	`string`	Текущее значение сортировки.
options	`ProductSortingOptionModel[]`	Список доступных опций сортировки.
on‑change	`(sorting: string) => void`	Обработчик события изменения сортировки.

Пример использования

<ya-kit-products-listing-controller as="controller">
	<ya-kit-products-sorting
   value={{controller.model.sorting.option.value}}
   options={{controller.model.sorting.options}} 
   on-change={{controller.onSortingChange}}
	>
   <ya-kit-text>{{controller.model.sorting.option.displayText}}</ya-kit-text>
	</ya-kit-products-sorting>
</ya-kit-products-listing-controller>

Связанные модели: ProductSortingOptionModel.

Связанные контроллеры: ya-kit-products-listing-controller.

`<ya-kit-text />`

Элемент типографики содержит ограниченный набор размеров шрифта, которые хорошо сочетаются друг с другом для создания согласованного макета.

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS-классы для стилизации.
as	`string`	Элемент для отображения. По-умолчанию `<p />`.
color	`inherit \ primary \ secondary \ brand`	Цвет текста.
size	`xs \ sm \ md \ lg \ xl \ 2xl \ 3xl \ 4xl \ 5xl`	Размер текста.
align	`left \ center \ right`	Выравнивание текста.
weight	`normal \ medium \ semibold \ bold`	Толщина текста.
decoration	`line-through \ underline`	Декоративные линии для текста.
lines	`number`	Количество строк текста.

`<yandex-pay-badge-discount />`

Элемент для отображения бейджа скидки/кэшбека Яндекс Пэй.

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS‑классы для стилизации.
price	`number \ string`	Цена до скидки.
size	`s \ m \ l`	Размер бейджа.

Пример внешнего вида

`<yandex-pay-badge-split />`

Элемент для отображения BNPL бейджа Яндекс Пэй.

Свойства элемента

Свойство	Тип	Описание
class	`string`	Дополнительные CSS-классы для стилизации.
price	`number \ string`	Цена до скидки.
size	`s \ m \ l`	Размер бейджа.
color	`primary \ green \ grey \ transparent`	Цвет бейджа.
variant	`simple \ detailed`	Вариант отображения бейджа.

Пример внешнего вида

Обратиться в службу поддержки

Написать в чат

Написать письмо

Была ли статья полезна?

Навигация

Обратная связь и взаимодействие