Общая информация о карточке товара

В статье вы узнаете о том, как отображается, какие компоненты содержит и как ведёт себя экран с подробным описанием товара в мобильном приложении интернет-магазина.

Переход на экран Copy-icon

Карточка товара (Product Detail Page (PDP) - страница интернет-магазина, на которой отображается детальная информация о товаре (описание, цена, цвет, наличие/отсутствие на складе и др.).

Чтобы перейти на карточку товара, тапните на мини-карточку товара на:

Отображение и поведение экрана Copy-icon

На экране отображаются:

1 - поисковая строка

2 - кнопка перехода к списку избранных товаров

3 - текущая локация

4 - галерея изображений товара

5 - информация о наличии/отсутствии товара на складе (если товар есть, то отображается информация об остатках в формате "X шт. в наличии")

6 - артикул товара (в формате "Арт.ХХХХХХХ"/"Art.Nr.ХХХХХХХ") (некликабельно)

7 - наименование товара (некликабельно)

8 - кнопка добавления/удаления товара из избранного

9 - рейтинг товара (в звездах) и количество отзывов на него

10 - цена товара с символом валюты (если товар на скидке, то отображаются 2 цены: полная (перечеркнута) и акционная) (некликабельно)

11 - подробное описание товара (некликабельно)

12 - (опционально) блок с характеристиками товара (некликабельно)

В блоке Характеристики отображаются характеристики, заданные товару и его категории в BackOffice. Если характеристик на продукте или его категории нет или они были удалены администратором в BackOffice, то блок не отображается на карточке товара.


Подробнее о присвоении товару характеристик в Backoffice можно узнать здесь.

13 - (для мультивариативных товаров) варианты товара

14 - кнопка добавления товара в корзину

15 - средний рейтинг товара и кнопка перехода к экрану со всеми отзывами

Изображение статьи

Редактирование данных о товаре происходит через BackOffice.

Подробнее читайте в Работа с товарами в BackOffice.

При скролле экрана вниз или вверх хедер, строка поиска, кнопка перехода к избранному и текущая локация "прикреплены" к верху экрана, а цена с кнопкой В корзину/Add to cart - к низу экрана.

Вы можете ознакомиться со всеми изображениями товара:

  • по тапу на миниатюры изображений под основным фото (если у товара только одно фото, то карусель не отображается)
  • по свайпу влево/вправо

В случае мультивариативных товаров при переключении между вариантами продукта вы попадете на экран, предназначенный для каждого отдельного варианта товара (/product/{productId}/{variantId}). Порядок отображения вариантов на карточке товара совпадает с порядком, заданным в BackOffice.

Подробнее о работе с мультивариативными товарами в BackOffice можно узнать здесь.

По тапу на кнопку В корзину/Add to cart происходит добавление товара в корзину. Если же товара в наличии нет, то на карточке будет отображен соответствующий статус товара ("Нет в наличии"/"Out of Stock"), а кнопка добавления в корзину будет не кликабельна и графически выделена серым цветом.

По нажатию на кнопку с информацией о количестве отзывов на товар, пользователь попадает на отдельный экран со списком всех отзывов. 

Подробнее об отзывах можно узнать здесь.