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

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

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

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

Изображение статьи
  • на мини-карточку товара на рекомендательных полках (например, "Бестселлеры"/"Current bestsellers" или "Лучшее предложение"/"Best suggestion" на главной)
Изображение статьи
Изображение статьи
Изображение статьи
  • в истории заказов (как на странице "Все заказы", так и на странице с деталями конкретного заказа)
Изображение статьи

Переход на PDP со страницы "Все заказы" (десктоп)

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

Переход на PDP со страницы с деталями заказа (десктоп)

Отображение и поведение страницы Copy-icon

На странице отображаются:

1 - галерея товара

2 - статус товара (некликабельно)

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

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

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

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

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

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

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

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

11 - блок с отзывами на товар

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

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

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

Карточка товара с несколькими вариантами (десктоп)
Изображение статьи
Карточка товара с одним вариантом (десктоп)
Изображение статьи
Карточка товара с несколькими вариантами (МВС)
Изображение статьи
Карточка товара с одним вариантом (МВС)
Изображение статьи

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

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

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

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

Если на медиа-ассет, используемый на карточке товара, не установлено изображение, то будет отображена заглушка.

Статус товара отображается в виде:

  • фиолетовой плашки с текстом В наличии/In Stock, если товар есть на складе
  • серой плашки с текстом Нет в наличии/Out of Stock, если товар отсутствует
  • плашки с текстом Нет информации/Unknown, если отсутствуют данные о товаре

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

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

По нажатию на кнопку В корзину/Add to cart товар будет добавлен в вашу корзину.

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

При добавлении в товара корзину отображается нотификация об успешно/неуспешно выполненной операции. Чтобы закрыть сообщение, кликните/тапните на само сообщение или крестик в нем.

Отображение нотификации на десктопе
Изображение статьи
Отображение нотификации в МВС
Изображение статьи

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

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

В блоке отзывов отображается рейтинг товара и отзывы на него, оставленные другими клиентами интернет-магазина. Подробнее об отзывах читайте в Отзывы на товар.

Связанные статьи Copy-icon

Корзина

Листинг каталога (PLP)

Отзывы на товар

Микросервис catalog-orchestration

Микросервис ugc-orchestration

Микросервис cart-orchestration

Микросервис wishlist-orchestration