Общая информация о карточке товара
Переход на экран
Карточка товара (Product Detail Page (PDP) - страница интернет-магазина, на которой отображается детальная информация о товаре (описание, цена, цвет, наличие/отсутствие на складе и др.).
Чтобы перейти на карточку товара, тапните на мини-карточку товара на:
- рекомендательных полках (например, "Бестселлеры"/"Current bestsellers" или "Лучшее предложение"/"Best suggestion" на главной)
- в истории заказов (как на экране "Все заказы", так и на экране с деталями конкретного заказа)
- в корзине
- в избранном
Отображение и поведение экрана
На экране отображаются:
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"), а кнопка добавления в корзину будет не кликабельна и графически выделена серым цветом.
По нажатию на кнопку с информацией о количестве отзывов на товар, пользователь попадает на отдельный экран со списком всех отзывов.
Подробнее об отзывах можно узнать здесь.