Нужно придумать дизайн сайта по ТЗ (предлагайте свою цену)

Каталог

Поиск

Пользователь может искать товары и артистов, при вводе символов нужно предлагать подходящие варианты для автозаполнения. Поиск происходит по имени артиста, названию товара, категории товара и по ключевым словам.

Фильтры

Пользователь может применить фильтры по заданным полям:

• Артист

• Категория товара

• Размер товара

• Цвет

• Цена

Иконка должна содержать в себе количество примененных фильтров.

Сортировка

• По популярности

• По цене (по возрастанию/убыванию)

• Сначала новые

Если пользователь не выбрал вариант сортировки, по умолчанию включена сортировка по популярности.

Аналитика

Действие 1.Поиск

2. Применение фильтров

3. Сортировка

Название события 1.catalog_search

2.catalog_filters_apply

3.catalog_sort

Параметры 1.query - содержимое запроса

2.filters - текущие фильтры

3. sort_by - как сортируем

Продукт

Breadcrumbs

Блок с breadcrumbs должен показывать путь от главной страницы до текущей страницы, чтобы пользователь мог видеть, где он находится в структуре сайта. В качестве разделителя можно использовать знак /.

Изображения

Изображений может быть как несколько, так и одно. Если изображений несколько, то рендерим:

• Пикер

• Слайдер с изображениями

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

При клике на изображение открывается модалка с увеличенным разрешением картинки, которая включает в себя:

• Пикер

• Слайдер с изображениями

Основная информация

• Название

• Цена. Может быть применена скидка в процентах.

• Описание

Если описание слишком длинное, то отображаем кнопки показать/скрыть.

Характеристики

• Имя артиста (ссылка на страницу с артистом)

• Цвет

• Материал

• Параметры изделия (высота, ширина, глубина и т.д)

Параметры изделия отображаются на основе выбранного размера.

Действия

• Кнопка "Добавить в корзину". Если товар распродан, пометить кнопку как недоступную для нажатия и заменить надпись на "Нет в наличии".

• Кнопка “Добавить в вишлист”

• Предусмотреть выбор цвета, если доступна опция выбора.

• Предусмотреть выбор размера, если доступна опция выбора. Распроданные размеры должны быть видны, но помечены как недоступные для выбора.

Рекомендации

В этой секции находится горизонтальный список из карточек похожих товаров.

Аналитика

Действие 1.Просмотр изображения

2.Клик на “Показать полностью“

3.Клик на “Скрыть“

4.Выбрать размер

5.Выбрать цвет

6.Добавить в корзину

7. Добавить в вишлист

Название события 1.product_image_view

2.product_description_reveal

3.product_description_collapse

4.product_select_size

5.product_select_color

6.product_add_to_cart

7. product_add_to_wishlist

Параметры 1.product_id - идентификатор мерча
index- индекс картинки

2.product_id - идентификатор мерча

3.product_id - идентификатор мерча

4.product_id - идентификатор мерча
size - размер

5.product_id - идентификатор мерча
color - цвет

6.product_id - идентификатор мерча
size - размер
color - цвет

7.product_id - идентификатор мерча
size - размер
color - цвет

Профиль артиста

Основная информация

Информация об артисте – это самое первое, на что обратит внимание пользователь, перейдя в его профиль. Она включает в себя:

• Имя артиста

• Фотография артиста

• Обложка профиля (опционально)

• Краткая биография или описание

• Ссылки на соц. сети или официальный сайт

Если биография или описание слишком длинные, то отображаем кнопки показать/скрыть.

Мерч

В этом блоке сеткой отображается весь мерч артиста.

Аналитика

Действие 1.Переход в соц. сети или на официальный сайт

2. Клик на “Показать полностью“

1. Клик на “Скрыть“

Название события 1. artist_open_external_link

2. artist_description_reveal

3. artist_description_hide

Параметры 1. artist_id - идентификатор артиста
link - ссылка, по которой перешел пользователь

1. artist_id - идентификатор артиста

2. artist_id - идентификатор артиста

Вишлист

Сетка, отображающая все избранные товары.

Аналитика

Действие 1.Удаление из избранного,

2. Добавление в вишлист

Название события 1. wishlist_remove_product,

2. wishlist_add_product

Параметры 1. product_id - индентификатор товара
size - размер
color - цвет,

2. product_id - индентификатор товара
size - размер
color - цвет

Корзина

На этом этапе пользователь ничего не заполняет, оформление происходит на следующей странице.

Товары

Пользователь может посмотреть добавленные товары, которые группируются по имени и фото артиста, и отсортированы в порядке добавления.

(1. Фото) - Пример группировки товаров

Пример группировки товаров

Информация о группе товаров:

• Фото артиста

• Имя артиста

Информация о товаре:

• Фото

• Название

• Категория товара

• Цена (может применяться скидка в процентах)

• Размер

• Цвет

Пользователь также может удалить товары, добавить в вишлист и изменить количество (минимум 1).

Информация о заказе

• Количество товаров и их стоимость

• Промокод и его скидка (если применено)

• Стоимость доставки

• Общая стоимость

Промокод

Пользователь может ввести промокод, который применит скидку на стоимость товаров.

Аналитика

Действие 1.Удаление товара,

2. Добавление в вишлист,

3.Изменение количества,

4. Нажатие на кнопку “Применить“ в поле с промокодом

Название события 1.cart_remove_product,

2,cart_add_to_wishlist,

3.cart_change_count,

4. cart_apply_promocode

Параметры 1. product_id - идентификатор товара,

2. product_id - идентификатор товара
size - размер
color - цвет,

3. product_id - идентификатор товара
count - новое количество,

4. promocode - промокод

Оформление заказа

Форма

В форме нужно собрать все необходимые данные для исполнения заказа:

• ФИО получателя

• Номер телефона

• Адрес доставки (город, улица, дом, квартира)

• Комментарий

Информация о заказе

В этом блоке содержится информация о заказе и примененных скидках:

• Номер заказа

• Состав заказа

• Стоимость

  • Количество товаров и их стоимость

  • Промокод и его скидка (если применено)

  • Стоимость доставки

  • Общая стоимость

Аналитика

Действие 1.Нажатие на кнопку “Оформить заказ“

Название события 1.checkout_create_order

Параметры 1.city - город доставки заказа

Заказы

(2. Фото) - Пример таблицы заказов

На этой странице отображается таблица заказов. При клике на строку открывается страница с подробной информацией.

Название колонок:

• Дата заказа

• Номер заказа

• Сумма

• Статус

Пример таблицы заказов

Статусы заказа

• Обработка – заказ обрабатывается менеджером артиста

• Отменен – заказ по какой-то причине отменен пользователем или менеджером артиста, в случае отмены нужно писать причину

• Доставка – заказ у курьера

• Выполнено – заказ успешно выполнен

Аналитика

Действие 1.Открытие страницы с подробной информацией о заказе

Название события 1.orders_open_details

Параметры 1.order_id - идентификатор заказа

(предлагайте цену)