Россия

Предлагайте свою цену

Придумать дизайн сайта

Дизайн сайтов

<h2>Каталог</h2><h3>Поиск</h3>Пользователь может искать <a href="https://dtbclub.atlassian.net/wiki/spaces/merch/pages/5734411">товары </a>и <a href="https://dtbclub.atlassian.net/wiki/pages/createpage.action?spaceKey=merch&amp;title=%D0%90%D1%80%D1%82%D0%B8%D1%81%D1%82&amp;linkCreation=true&amp;fromPageId=5636213">артистов</a>, при вводе символов нужно предлагать подходящие варианты для автозаполнения. Поиск происходит по имени артиста, названию товара, категории товара и по ключевым словам.<h3>Фильтры</h3>Пользователь может применить фильтры по заданным полям:<ul><li>Артист</li><li>Категория товара</li><li>Размер товара</li><li>Цвет</li><li>Цена</li></ul>Иконка должна содержать в себе количество примененных фильтров.<h3>Сортировка</h3><ul><li>По популярности</li><li>По цене (по возрастанию/убыванию)</li><li>Сначала новые</li></ul>Если пользователь не выбрал вариант сортировки, по умолчанию включена сортировка по популярности.<h3>Аналитика</h3>Действие 1.Поиск2. Применение фильтров3. СортировкаНазвание события 1.catalog_search2.catalog_filters_apply3.catalog_sort
Параметры 1.query - содержимое запроса2.filters - текущие фильтры3. sort_by - как сортируем<h2>Продукт</h2><h3>Breadcrumbs</h3>Блок с breadcrumbs должен показывать путь от главной страницы до текущей страницы, чтобы пользователь мог видеть, где он находится в структуре сайта. В качестве разделителя можно использовать знак <code>/</code>.<h3>Изображения</h3>Изображений может быть как несколько, так и одно. Если изображений несколько, то рендерим:<ul><li>Пикер</li><li>Слайдер с изображениями</li></ul>Если изображений так много, что они не помещаются в контейнере пикера, нужно отобразить стрелки влево и вправо с шагом в N - 2, где N - количество отображенных изображений.При клике на изображение открывается модалка с увеличенным разрешением картинки, которая включает в себя:<ul><li>Пикер</li><li>Слайдер с изображениями</li></ul><h3>Основная информация</h3><ul><li>Название</li><li>Цена. Может быть применена скидка в процентах.</li><li>Описание</li></ul>Если описание слишком длинное, то отображаем кнопки показать/скрыть.<h3>Характеристики</h3><ul><li>Имя артиста (ссылка на <a href="https://dtbclub.atlassian.net/wiki/pages/createpage.action?spaceKey=merch&amp;title=%D0%90%D1%80%D1%82%D0%B8%D1%81%D1%82&amp;linkCreation=true&amp;fromPageId=5636213">страницу с артистом</a>)</li><li>Цвет</li><li>Материал</li><li>Параметры изделия (высота, ширина, глубина и т.д)</li></ul>Параметры изделия отображаются на основе выбранного размера.<h3>Действия</h3><ul><li>Кнопка "Добавить в корзину". Если товар распродан, пометить кнопку как недоступную для нажатия и заменить надпись на "Нет в наличии".</li><li>Кнопка “Добавить в вишлист”</li><li>Предусмотреть выбор цвета, если доступна опция выбора.</li><li>Предусмотреть выбор размера, если доступна опция выбора. Распроданные размеры должны быть видны, но помечены как недоступные для выбора.</li></ul><h3>Рекомендации</h3>В этой секции находится горизонтальный список из карточек похожих товаров.<h3>Аналитика</h3>Действие 1.Просмотр изображения2.Клик на “Показать полностью“3.Клик на “Скрыть“4.Выбрать размер5.Выбрать цвет6.Добавить в корзину 7. Добавить в вишлистНазвание события 1.product_image_view 2.product_description_reveal3.product_description_collapse4.product_select_size5.product_select_color6.product_add_to_cart7. 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 - цвет<h2>Профиль артиста</h2><h3>Основная информация</h3>Информация об артисте – это самое первое, на что обратит внимание пользователь, перейдя в его профиль. Она включает в себя:<ul><li>Имя артиста</li><li>Фотография артиста</li><li>Обложка профиля (опционально)</li><li>Краткая биография или описание</li><li>Ссылки на соц. сети или официальный сайт</li></ul>Если биография или описание слишком длинные, то отображаем кнопки показать/скрыть.<h3>Мерч</h3>В этом блоке сеткой отображается весь мерч артиста.<h3>Аналитика</h3>Действие 1.Переход в соц. сети или на официальный сайт 2. Клик на “Показать полностью“<ol><li>Клик на “Скрыть“</li></ol>Название события 1. artist_open_external_link 2. artist_description_reveal3. artist_description_hideПараметры 1. artist_id - идентификатор артиста link - ссылка, по которой перешел пользователь<ol><li>artist_id - идентификатор артиста</li><li>artist_id - идентификатор артиста</li></ol><h2>Вишлист</h2>Сетка, отображающая все избранные товары.<h3>Аналитика</h3>Действие 1.Удаление из избранного, 2. Добавление в вишлистНазвание события 1. wishlist_remove_product, 2. wishlist_add_productПараметры 1. product_id - индентификатор товара size - размер color - цвет, 2. product_id - индентификатор товара size - размер color - цвет<h2>Корзина</h2>На этом этапе пользователь ничего не заполняет, оформление происходит на следующей странице.<h3>Товары</h3>Пользователь может посмотреть добавленные товары, которые группируются по имени и фото артиста, и отсортированы в порядке добавления.(1. Фото) - Пример группировки товаров Пример группировки товаров Информация о группе товаров:<ul><li>Фото артиста</li><li>Имя артиста</li></ul>Информация о товаре:<ul><li>Фото</li><li>Название</li><li>Категория товара</li><li>Цена (может применяться скидка в процентах)</li><li>Размер</li><li>Цвет</li></ul>Пользователь также может удалить товары, добавить в вишлист и изменить количество (минимум 1).<h3>Информация о заказе</h3><ul><li>Количество товаров и их стоимость</li><li>Промокод и его скидка (если применено)</li><li>Стоимость доставки</li><li>Общая стоимость</li></ul><h3>Промокод</h3>Пользователь может ввести промокод, который применит скидку на стоимость товаров.<h3>Аналитика</h3>Действие 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 - промокод<h2>Оформление заказа</h2><h3>Форма</h3>В форме нужно собрать все необходимые данные для исполнения заказа:<ul><li>ФИО получателя</li><li>Номер телефона</li><li>Адрес доставки (город, улица, дом, квартира)</li><li>Комментарий</li></ul><h3>Информация о заказе</h3>В этом блоке содержится информация о заказе и примененных скидках:<ul><li>Номер заказа</li><li>Состав заказа</li><li>Стоимость<ul><li>Количество товаров и их стоимость</li><li>Промокод и его скидка (если применено)</li><li>Стоимость доставки</li><li>Общая стоимость</li></ul></li></ul><h3>Аналитика</h3>Действие 1.Нажатие на кнопку “Оформить заказ“Название события 1.checkout_create_orderПараметры 1.city - город доставки заказа<h2>Заказы</h2>(2. Фото) - Пример таблицы заказов На этой странице отображается таблица заказов. При клике на строку открывается страница с подробной информацией.Название колонок:<ul><li>Дата заказа</li><li>Номер заказа</li><li>Сумма</li><li>Статус</li></ul>Пример таблицы заказов<h3>Статусы заказа</h3><ul><li>Обработка – заказ обрабатывается менеджером артиста</li><li>Отменен – заказ по какой-то причине отменен пользователем или менеджером артиста, в случае отмены нужно писать причину</li><li>Доставка – заказ у курьера</li><li>Выполнено – заказ успешно выполнен</li></ul><h3>Аналитика</h3>Действие 1.Открытие страницы с подробной информацией о заказеНазвание события 1.orders_open_detailsПараметры 1.order_id - идентификатор заказа(предлагайте цену)

<h2>Каталог</h2><h3>Поиск</h3>Пользователь может искать <a href="https://dtbclub.atlassian.net/wiki/spaces/merch/pages/5734411" rel="nofollow noopener noreferrer" target="_blank">товары </a>и <a href="https://dtbclub.atlassian.net/wiki/pages/createpage.action?spaceKey=merch&amp;title=%D0%90%D1%80%D1%82%D0%B8%D1%81%D1%82&amp;linkCreation=true&amp;fromPageId=5636213" rel="nofollow noopener noreferrer" target="_blank">артистов</a>, при вводе символов нужно предлагать подходящие варианты для автозаполнения. Поиск происходит по имени артиста, названию товара, категории товара и по ключевым словам.<h3>Фильтры</h3>Пользователь может применить фильтры по заданным полям:<ul><li>Артист</li><li>Категория товара</li><li>Размер товара</li><li>Цвет</li><li>Цена</li></ul>Иконка должна содержать в себе количество примененных фильтров.<h3>Сортировка</h3><ul><li>По популярности</li><li>По цене (по возрастанию/убыванию)</li><li>Сначала новые</li></ul>Если пользователь не выбрал вариант сортировки, по умолчанию включена сортировка по популярности.<h3>Аналитика</h3>Действие 1.Поиск2. Применение фильтров3. СортировкаНазвание события 1.catalog_search2.catalog_filters_apply3.catalog_sort
Параметры 1.query - содержимое запроса2.filters - текущие фильтры3. sort_by - как сортируем<h2>Продукт</h2><h3>Breadcrumbs</h3>Блок с breadcrumbs должен показывать путь от главной страницы до текущей страницы, чтобы пользователь мог видеть, где он находится в структуре сайта. В качестве разделителя можно использовать знак <code>/</code>.<h3>Изображения</h3>Изображений может быть как несколько, так и одно. Если изображений несколько, то рендерим:<ul><li>Пикер</li><li>Слайдер с изображениями</li></ul>Если изображений так много, что они не помещаются в контейнере пикера, нужно отобразить стрелки влево и вправо с шагом в N - 2, где N - количество отображенных изображений.При клике на изображение открывается модалка с увеличенным разрешением картинки, которая включает в себя:<ul><li>Пикер</li><li>Слайдер с изображениями</li></ul><h3>Основная информация</h3><ul><li>Название</li><li>Цена. Может быть применена скидка в процентах.</li><li>Описание</li></ul>Если описание слишком длинное, то отображаем кнопки показать/скрыть.<h3>Характеристики</h3><ul><li>Имя артиста (ссылка на <a href="https://dtbclub.atlassian.net/wiki/pages/createpage.action?spaceKey=merch&amp;title=%D0%90%D1%80%D1%82%D0%B8%D1%81%D1%82&amp;linkCreation=true&amp;fromPageId=5636213" rel="nofollow noopener noreferrer" target="_blank">страницу с артистом</a>)</li><li>Цвет</li><li>Материал</li><li>Параметры изделия (высота, ширина, глубина и т.д)</li></ul>Параметры изделия отображаются на основе выбранного размера.<h3>Действия</h3><ul><li>Кнопка "Добавить в корзину". Если товар распродан, пометить кнопку как недоступную для нажатия и заменить надпись на "Нет в наличии".</li><li>Кнопка “Добавить в вишлист”</li><li>Предусмотреть выбор цвета, если доступна опция выбора.</li><li>Предусмотреть выбор размера, если доступна опция выбора. Распроданные размеры должны быть видны, но помечены как недоступные для выбора.</li></ul><h3>Рекомендации</h3>В этой секции находится горизонтальный список из карточек похожих товаров.<h3>Аналитика</h3>Действие 1.Просмотр изображения2.Клик на “Показать полностью“3.Клик на “Скрыть“4.Выбрать размер5.Выбрать цвет6.Добавить в корзину 7. Добавить в вишлистНазвание события 1.product_image_view 2.product_description_reveal3.product_description_collapse4.product_select_size5.product_select_color6.product_add_to_cart7. 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 - цвет<h2>Профиль артиста</h2><h3>Основная информация</h3>Информация об артисте – это самое первое, на что обратит внимание пользователь, перейдя в его профиль. Она включает в себя:<ul><li>Имя артиста</li><li>Фотография артиста</li><li>Обложка профиля (опционально)</li><li>Краткая биография или описание</li><li>Ссылки на соц. сети или официальный сайт</li></ul>Если биография или описание слишком длинные, то отображаем кнопки показать/скрыть.<h3>Мерч</h3>В этом блоке сеткой отображается весь мерч артиста.<h3>Аналитика</h3>Действие 1.Переход в соц. сети или на официальный сайт 2. Клик на “Показать полностью“<ol><li>Клик на “Скрыть“</li></ol>Название события 1. artist_open_external_link 2. artist_description_reveal3. artist_description_hideПараметры 1. artist_id - идентификатор артиста link - ссылка, по которой перешел пользователь<ol><li>artist_id - идентификатор артиста</li><li>artist_id - идентификатор артиста</li></ol><h2>Вишлист</h2>Сетка, отображающая все избранные товары.<h3>Аналитика</h3>Действие 1.Удаление из избранного, 2. Добавление в вишлистНазвание события 1. wishlist_remove_product, 2. wishlist_add_productПараметры 1. product_id - индентификатор товара size - размер color - цвет, 2. product_id - индентификатор товара size - размер color - цвет<h2>Корзина</h2>На этом этапе пользователь ничего не заполняет, оформление происходит на следующей странице.<h3>Товары</h3>Пользователь может посмотреть добавленные товары, которые группируются по имени и фото артиста, и отсортированы в порядке добавления.(1. Фото) - Пример группировки товаров Пример группировки товаров Информация о группе товаров:<ul><li>Фото артиста</li><li>Имя артиста</li></ul>Информация о товаре:<ul><li>Фото</li><li>Название</li><li>Категория товара</li><li>Цена (может применяться скидка в процентах)</li><li>Размер</li><li>Цвет</li></ul>Пользователь также может удалить товары, добавить в вишлист и изменить количество (минимум 1).<h3>Информация о заказе</h3><ul><li>Количество товаров и их стоимость</li><li>Промокод и его скидка (если применено)</li><li>Стоимость доставки</li><li>Общая стоимость</li></ul><h3>Промокод</h3>Пользователь может ввести промокод, который применит скидку на стоимость товаров.<h3>Аналитика</h3>Действие 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 - промокод<h2>Оформление заказа</h2><h3>Форма</h3>В форме нужно собрать все необходимые данные для исполнения заказа:<ul><li>ФИО получателя</li><li>Номер телефона</li><li>Адрес доставки (город, улица, дом, квартира)</li><li>Комментарий</li></ul><h3>Информация о заказе</h3>В этом блоке содержится информация о заказе и примененных скидках:<ul><li>Номер заказа</li><li>Состав заказа</li><li>Стоимость<ul><li>Количество товаров и их стоимость</li><li>Промокод и его скидка (если применено)</li><li>Стоимость доставки</li><li>Общая стоимость</li></ul></li></ul><h3>Аналитика</h3>Действие 1.Нажатие на кнопку “Оформить заказ“Название события 1.checkout_create_orderПараметры <a href="http://1.city" rel="nofollow noopener noreferrer" target="_blank">1.city</a> - город доставки заказа<h2>Заказы</h2>(2. Фото) - Пример таблицы заказов На этой странице отображается таблица заказов. При клике на строку открывается страница с подробной информацией.Название колонок:<ul><li>Дата заказа</li><li>Номер заказа</li><li>Сумма</li><li>Статус</li></ul>Пример таблицы заказов<h3>Статусы заказа</h3><ul><li>Обработка – заказ обрабатывается менеджером артиста</li><li>Отменен – заказ по какой-то причине отменен пользователем или менеджером артиста, в случае отмены нужно писать причину</li><li>Доставка – заказ у курьера</li><li>Выполнено – заказ успешно выполнен</li></ul><h3>Аналитика</h3>Действие 1.Открытие страницы с подробной информацией о заказеНазвание события 1.orders_open_detailsПараметры 1.order_id - идентификатор заказа(предлагайте цену)

Данила guest_1692811921197

Придумать дизайн сайта

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