Архив: Верстка нового дизайна
Бюджет
По договоренности
Создан: 7 лет назад
Закрыт
- Описание
- Здравствуйте, в этом проекте мы меняем страницу оформления заказа и страницу корзины. Рисуем дизайн и верстаем. Дизайн будет; ваша задача только сделать верстку этого дизайна. Ниже представлено ТЗ всего проекта (и для дизайнера, и для верстальщика, и для программиста). Заинтересованым дадим ссылку на сайт.
Просьба в начале отклика писать: "Готов".
ОБЩИЕ
Добавить кнопку “Вверх” справа.Добавить на фото акционных товаров стикеры с процентом скидки.
ОТОБРАЖЕНИЕ СТРАНИЦЫ НА ДЕСКТОПЕ
Общие
Разделить страницу на две части: левая 60% (блоки, которые касаются оформления заказа), правая 40% (блоки с перечнем товара и блок “Итого”) http://prntscr.com/jwpwuf.Вывести для неавторизированных пользователей вместо заглавия “Оформление заказа” заглавие “Заполните форму или авторизуйтесь”, где слово “авторизуйтесь” выделено другим цветом и содержит ссылку на страницу авторизации. На странице подтверждения авторизации вывести две кнопки
- Продолжить покупки (переход на страницу каталога)
- Оформить заказ (переход на страницу оформления заказа)Реализовать автоматическое заполнение полей заказа: Ф.И.О, телефон, электронная почта, город, адрес.
Блок “Покупатель”
Вывести три поля:
- ФИО (текстовое, обязательное);
- Телефон (с маской ввода номера, обязательное);
- E-mail (необязательное).
http://prntscr.com/jsloaz
Блок “Оплата”
Три пункта с чекбоксами (как в в следующем блоке “Доставка” - https://image.prntscr.com/image/A3TxZwlBTPejA-b59ahAXA.png):
“Наличный” “Безналичный” “Карта Visa/Mastercard”.Можно выбрать любой способ оплаты и любой способ доставки.
- Наличный способ оплаты - это оплата наличными в магазине, оплата курьеру, оплата в Новой почте;
- Безналичный способ оплаты - это оплата по счету;
- Оплата картой Visa/Mastercard это оплата по терминалу в магазине, курьеру, в Новой почте.
Блок “Доставка”
Вывести два блока “Доставка”:
первый - выбор способа доставки, который надо показывать по умолчанию, второй - блок для заполнения данных о доставке, который надо показывать только после выбора способа доставки. http://prntscr.com/jsjnneВ первом блоке вывести заголовок “Способ доставки”, далее три пункта с чекбоксами:
Способ Самовывоз Курьер (Киев и область) Новая почта
доставки: (описание) (описание) (описание)
Описание должно содержаться в включаемых областях.Описание для “Самовывоз”: Вы можете забрать товар по адресу г. Киев, ул. Павловская, 28
Описание для “Курьер (Киев и область)”: Наш курьер доставит товар в удобное для вас время. Стоимость доставки сообщит наш менеджер.
Описание для “Новая почта”: Заказ будет доставлен до ближайшего отделения почты. Ориентировочная стоимость доставки от 50 грн. Внимание! Стоимость доставки может отличаться от указанной.
Схематически показано - http://prntscr.com/jskv5b
Вывести блок с гугл картой, он появляется, если выбран способ доставки “Самовывоз”. На карте разместить маркер с адресом магазина.Вывести блок для заполнения данных о доставке, он появляется, если выбран способ доставки “Курьер”:
- сделать текстовое поле “Город”, в котором по умолчанию указывается город с местоположения (которое определяется автоматически):
- если поле заполнено, справа должен быть крестик, при нажатию на который поле очищается и в нем появляется мигающий курсор и выпадающий список с населенными пунктами;
- в выпадающем списке выводятся Киев и большие города Киевской области (до 10) http://prntscr.com/jsjjrf.
- при вводе первых букв города будет происходить автокомплит (появляться подсказки с названиями городов) - http://prntscr.com/jveher.
- вывести одно текстовое поле “Адрес” для ввода почтового адреса.Вывести блок для заполнения данных о доставке, он появляется, если выбран способ доставки “Новая почта”:
- вывести поле “Город”, в котором по умолчанию указывается город с местоположения (которое определяется автоматически):
- если поле заполнено, справа должен быть крестик, при нажатию на который поле очищается и в нем появляется мигающий курсор и такой выпадающий список - http://prntscr.com/jveje1 (большие города Украины)
- при вводе первых букв города появляется автокомплит (подсказки) в формате Город - Область (Никополь - Днепропетровская обл.), пример - http://prntscr.com/jsjl1w;
- сделать текстовое поле “Отделение” с выпадающим списком для выбора отделения “Новой почты”, в который подтягиваются отделения Новой почты выбранного города; в списке отделения отсортированы по алфавиту и выводятся в формате “Отделение №1, ул. Полевая, 67”, пример - http://prntscr.com/jsjli2;
- под полем “Отделение” должна быть кнопка “Выбрать на карте” (пример: https://prnt.sc/jsi25s), при нажатии на которую - открывается попап с гугл-картой, зафиксированной на выбранном городе, и со списком отделений города справа https://prnt.sc/jsi2gn. При нажатии на информацию об отделении http://prntscr.com/jtjrbe карта должна показывать это отделение. И после закрытия попапа - устанавливается отделение, на которое нажали.
Блок “Комментарий к заказу”
Вывести текстовый блок для комментария к заказу (необязательный для заполнения).
Блок “Товары”
Вывести в правой части страницы блок со списком товаров заказа, пример такой реализации - http://prntscr.com/jsj05q (стилистика блока http://prntscr.com/jwp7rt)При скролле страницы блок фиксируется. Пример страницы оформления заказа на Розетке - http://prntscr.com/jslp5nhttps://rozetka.com.ua/.Выводить для каждого товара: “Фото”, “Наименование”, “Цена” (цена одной единицы товара; если товар в заказе со скидкой, то под новой ценой выводить перечеркнутую старую цену без скидки - http://prntscr.com/jvctoo), “Стоимость” (общая цена выбранных единиц товара; если товар в заказе со скидкой, то под новой стоимостью выводить перечеркнутую старую стоимость без скидки - http://prntscr.com/jvcue3). Пример такой реализации - http://prntscr.com/jsj05q.Сделать Название и Фото товара ссылками на товар.Добавить кнопки “+” и “-” http://prntscr.com/jsi7rw для увеличения/уменьшения количества единиц выбранного товара, сделать поле для ввода количества товара.Добавить кнопку “Удалить”, которая удаляет все единицы выбранного товара из оформления заказа и из корзины, пример такой реализации - http://prntscr.com/jsj05q.Добавить кнопку “Отложить” (такую, как сейчас в корзине http://prntscr.com/jtjicw) рядом с кнопкой “Удалить” - сюда http://prntscr.com/jtjir3, при нажатии на кнопку - все единицы товара удаляются из страницы оформления заказа, а в корзине из блока “Готовые к заказу” переносятся в “Отложенные”.Если удалить все товары из заказа - выводится сообщение “Корзина пуста” - http://prntscr.com/jvasa5 и, если пользователь авторизирован, перебрасывает на личный кабинет, если неавторизован - перебрасывает на страницу авторизации.
Блок “Итого”
Вывести значения:
- “Сумма заказа” (где указывается общая стоимость всех единиц всех товаров, на которые оформляется заказ); если в заказе есть товары со скидками, то под суммой заказа выводится серая зачеркнутая сумма заказа без скидок;
- “Доставка” (если выбран способ доставки “Самовывоз”, то указывается “бесплатно”; если выбран способ доставки “Новая почта” или “Курьер (Киев и область)”, то указывается “сообщит менеджер”);
- опциональное “Экономия” выводится, если в заказе есть товар со скидкой, тогда Экономия - это разница между обычной ценой всех товаров и ценой с учетом скидки;
- “Итого” (общая стоимость суммы заказа и доставки).
http://prntscr.com/jsjmzvЕсли блок “Товары” высотой не больше левой части блоков, то блок “Итого” вывести под блоком “Товары” здесь - http://prntscr.com/jtjlea
Если высота блока “Товары” больше высоты левой части блоков, то блок “Итого” вывести под блоком “Соглашение на обработку персональных данных” здесь - http://prntscr.com/jtjm3lВ блоке “Итого” поместить кнопку “Оформить заказ” - http://prntscr.com/jtjjr6
Блок “Соглашение на обработку персональных данных”
Внизу блока “Комментарии к заказу” поместить галочку с текстом “Соглашаюсь на обработку персональных данных”.По умолчанию галочка стоит.Если пользователь снял галочку и нажал кнопку “Оформить заказ” - заказ не оформляется, а чекбокс обводится красным.Текст “персональных данных” содержит ссылку на попап с текстом соглашения и кнопкой-крестиком, при нажатии на которую попап закрывается (кнопки “Принимаю” и “Не принимаю” не выводить) - http://prntscr.com/jtjy01.
Страница “Заказ сформирован”
После нажатия на кнопку “Оформить заказ” переходим на страницу “Заказ сформирован” - http://prntscr.com/jvacmw, на странице нужно изменить текст.
Страница “Корзина”
Удалить отдельную страницу корзины.При нажатию на любое место в выделенном блоке - http://prntscr.com/jwqx8i должен открываться попап с корзиной в виде списка товаров http://prntscr.com/jwqvuj.В мобильной версии тоже выводим попап - http://prntscr.com/jyzkkv.Если в корзину добавлено большое количество товара и попап не выводится полностью:
- отступ снизу сделать такой, как сверху - http://prntscr.com/jyzesz;
- в попап добавить скролл.При нажатию на фото или название товара - переход на страницу товара.При нажатию на любое место в браузере вне попапа - попап закрывается.В блоке “Итого” http://prntscr.com/jwqwuv вывести:
- итоговая цена
- зачеркнутая старая цена
- “Экономия: n грн.”Вывести кнопки“+” и “-” http://prntscr.com/jsi7rw для увеличения/уменьшения количества единиц выбранного товара в корзине, сделать поле для ввода количества товара.Вывести кнопку “Удалить”http://prntscr.com/jwqzeb, которая удаляет все единицы выбранного товара из корзины .Добавить кнопку “Отложить” http://prntscr.com/jwqzs2 рядом с кнопкой “Удалить”, при нажатии на кнопку - все единицы товара удаляются из корзины.Вывести кнопку “Продолжить покупки” http://prntscr.com/jwr0hm, при нажатию на которую закрывается попап с корзиной.Вывести кнопку “крестик” в правом верхнем углу попапа, при нажатию на крестик - попап закрывается.Вывести кнопку “Оформить заказ” http://prntscr.com/jwr161, при нажатию на которую открывается страница оформления заказа.
ОТОБРАЖЕНИЕ СТРАНИЦЫ НА МОБИЛЬНЫХ УСТРОЙСТВАХ
Блок “Товары”
Сделать блок свернутым по умолчанию.
- если блок свернут - на его месте вывести кнопку “Показать товары” при нажатии на которую - блок разворачивается вертикально, кнопка переименовывается на “Скрыть товары” при нажатии на которую блок сворачивается.Сделать блок в таком виде, как на текущем сайте - http://prntscr.com/jve2iz:- Фото товара, Название, Цена, Старая цена, Экономия, Количество и кнопки изменения количества (с полем ввода; кнопка минус при количестве товара “1” - становится неактивной; при вводе в поле количества товара “0” - автоматически выводится “1”), Сумма, кнопка “Отложить”, кнопка “Удалить”.Сделать “Название” и “Фото” товара ссылками на товар.
Блок “Покупатель”
Сделать в таком виде: http://prntscr.com/jv9rgf (https://www.e-esco.com.ua)Поле “Номер телефона” нужно сделать: <input type="number">При нажатии на поле “Номер телефона” курсор должен появляться здесь - http://prntscr.com/jve7cz.
Блок “Оплата”
Вывести блок с выпадающим списком: http://prntscr.com/jv9sws
Блок “Доставка”
Вывести поле "Способ доставки", http://prntscr.com/jve8fr, при нажатии на поле появляется выпадающий список со способами доставки http://prntscr.com/jv9v4sЕсли выбрать в списке “Самовывоз” - под полем появляется адрес магазина - http://prntscr.com/jv9war.Если выбрать в списке “Курьер (Киев и область)”, то под списком появится:
- поле "Город" http://prntscr.com/jve9mz, в котором по умолчанию указывается город с местоположения (которое определяется автоматически):
- если поле заполнено, справа должен быть крестик, при нажатию на который поле очищается и появляется клавиатура;
- при вводе первых букв города будет происходить автокомплит (появляться подсказки с названиями городов) - http://prntscr.com/jvnozg.
- поле “Адрес” - http://prntscr.com/jvnpai.Если выбрать в списке “Новая почта” - появляется два поля http://prntscr.com/jvnq72:
- поле “Город”, в котором по умолчанию указывается город с местоположения (которое определяется автоматически):
- если поле заполнено, справа должен быть крестик, при нажатию на который поле очищается и появляется клавиатура;
- при вводе первых букв города будет происходить автокомплит (появляться подсказки с названиями городов) - http://prntscr.com/jvnozg.
- поле “Отделение”, при нажатию на которое появляется попап как в Розетке http://prntscr.com/jva1ya (https://m.rozetka.com.ua/). В попапе выводится список отделений города с информацией (адрес, график, номер телефона) и с поиском по отделениям.
Блок “Комментарий к заказу”
Вывести блок кнопкой, как в Розетке - http://prntscr.com/jva3gbПри нажатию на кнопку появляется попап - http://prntscr.com/jva3xs
Блок “Соглашение на обработку персональных данных”
По умолчанию чекбокс с галочкой - http://prntscr.com/jva69lПри нажатии на чекбокс появляется галочка, что означает согласие с обработкой персональных данных.Текст “персональных данных” содержит ссылку, при нажатию на которую пользователь переходит на страницу с текстом Соглашения в новой вкладке.
Блок “Итого”
Выводим под блоком “Соглашение на обработку персональных данных”.В поле “Доставка” выводится:
- “бесплатно”, если доставка “Самовывоз”, вhttp://prntscr.com/jva7p7
-“сообщит менеджер”, если доставка “Курьер (Только Киев)” - http://prntscr.com/jva8wb
- “сообщит менеджер”, если доставка “Новая почта” - https://prnt.sc/jva8wb.Если в заказе есть товар со скидкой:
- после поля “Доставка” выводится “Экономия” (разница между обычной ценой всех товаров и ценой с учетом скидки);
- в поле “Сумма заказа” под суммой заказа выводится серая зачеркнутая стоимость заказа без скидок.
- Категория
Похожие проекты
0
3
Ищу клиента для создания учебного проекта и оформления портфолио бесплатно или за символическую сумму....
1 год назад
89
1
Нужно будет делать видео по примеру уже готового видео. Вы подойдете если : имеете базовые-легкие знания в трейдинге,если у вас хороший микрофон, нормальная дикция, и есть программа для снятия экрана на видео. (Себя снимать не нужно,только видео экрана) Чем выше качество тем выше оплата . Оплата за среднее......
1 год назад
$1000
286
6
TALP GROUP Мы занимаемся разработкой и продвижением IT- продуктов. В нашем арсенале множество интересных кейсов, большинство из которых реализованы на нашей собственной low/no code платформе Аltrp. Мы работаем как над внутренними проектами, так и с внешними заказчиками. Среди них: разработка швейцарской......
1 год назад
662
30
Должно быть у исполнителя готовое и грамотно сделанное портфолио....
1 год назад
$13
187
4
Сайт на Laravel нужно переделать авторизацию логин-пароль на двухфакторную по емейл, логин-пароль-код....
1 год назад
179
5
Верстка на React с использованием своего UI kit. Использование препроцессора для стилей SCSS. Методология БЭМ. Чистая и аккуратная верстка. Понимание концепции React....
1 год назад
$1875
312
0
Команда специалистов в области электронной коммерции в поисках еще одного фронт разработчика. Более 5ти лет мы работаем с западными клиентами в области электронной коммерции, создаем крутые сайты, которые помогают нашим клиентам увеличивать их доход и положение на рынке, решаем интересные и сложные задачи.......
1 год назад
438
19
Необходима html+css верстка для нескольких проектов в области коммерции, а так же криптовалютной тематики. Референсы сайтов, которые максимально схожи с задачами, которые нужно будет выполнять:. https://hyiplab. afreeca. ru/. http://xn--d1aucemf. xn--p1ai/. nominex. io/ru. Требования к вёрстке: pixel......
1 год назад
230
12
Сайт для рандомальнго выбора рецепта нужно сверстать сайт для задания по учебе . php html css Javascript mysql более подробную информацию о том как должен выглядеть сайт я изложу позже. Есть наброски....
1 год назад
$275
171
5
Задача внести изменения на сайт:. - внесение правок для UI/UX вёрстки + замена нескольких изображений. Макет в Фигме, картинки уже готовы. - SEO-оптимизация по отчёту SemRush. - интеграция сервиса автоматического перевода - Phrase. - интеграция чата JavaScript SDK от пользователя - Crisp. Подробное ТЗ......
1 год назад
121
1
http://night. fixmoke. ru/goods? brands=41. https://prnt. sc/17vbu7r. 1) Нужно сделать, чтобы при выборе значений, эти значения выбирались во всех селектах. Если выбрал в списке, то выбирается и в сайдбаре и наоборот. И также, если добавил в корзину то отображалось во всех местах. 2) Также нужно сделать,......
2 года назад
$19
103
5
245
7
Нужен опытный специалист с хорошим знанием CSS, Responsive Design, Mobile First и дизайнерскими навыками. Мы хотим постепенно заменять страницы сайта «Мир отходов» https://waste. ua, действующая версия которого работает с 2006 г. , устарела и не отвечает современным требованиям. На данном этапе нужно......
3 года назад
554
22
Требуется специалист для работы над вёрсткой нового дизайна сайта. Проект текущий, к вёрстке новых страниц приступаем, как только дизайнер сдаёт макеты. Всё сдаётся в срок. Макеты для оценки стоимости работ предоставим при обсуждении проекта. Если заинтересовались, пожалуйста, пришлите портфолио.......
4 года назад
$313
413
11
Обязанности:. - Разработка сайтов по макету,. - Работа с CMS;. - Размещение информации на сайтах заказчика,. - Учиться и узнавать что-то новое. Требования к кандидату. Желание работать долгосрочно, на постоянной основе. Желание и умение учиться самостоятельно. Желателен опыт работы с Photoshop, знание......
4 года назад
$150
201
10
На сайте версия Bootstrap v3. 7, в ней и надо верстать, чтобы не было проблем при интеграции. Нужна вёрстка высокого уровня: чистая, красивая. Вёрстку натягивать не надо она будет натянута на cms 1С Битрикс штатным разработчиком. От исполнителя требуется только вёрстка. При вёрстке стараться не добавлять......
4 года назад
154
4
Я с напарником создаю агентство цифрового маркетинга. Я буду заниматься настройкой рекламы, партнер будет заниматься переговорами + он может принимать деньги (есть расчетный счет) + у него есть портфолио. Нужны еще партнеры. В частности, фронтендер. Т. делать лендинги клиентам и т. Есть конкурентные......
4 года назад
$5
230
3
Ищем Веб-мастера для постоянного сотрудничества. Возможность работать в течение первой или второй половины дня с 9 до 18. Необходимо знать bootstrap html css, js , основные движки joomla wordpress. Для потенциальных сотрудников мы предоставляем ОПЛАЧИВАЕМОЕ тестовое задание. Необходимо будет сверстать......
4 года назад
244
17
Внешний вид как у приложения со статьями. Запускаться оффлайн через html. index файл. Меню сверху, которое прокручивается вместе с сайтом, чтобы было постоянно на виду. В меню несколько разделов: Главная, анонсы, тиражи, полезное. В каждом от 1 до 3 статей. Заказ подобного сайта будет каждую неделю.......
5 лет назад
$15
579
41
Добрый день. Нужно сверсать веб резюме. Материал по ссылке. Для нормального отображения нужно скачать https://drive. google. com/file/d/1Rmit1zqQwjPIOunTbgPsTIokmyG3LcFV/view?...
6 лет назад
Перетащите