Верстка нового дизайна

Здравствуйте, в этом проекте мы меняем страницу оформления заказа и страницу корзины. Рисуем дизайн и верстаем. Дизайн будет; ваша задача только сделать верстку этого дизайна. Ниже представлено ТЗ всего проекта (и для дизайнера, и для верстальщика, и для программиста). Заинтересованым дадим ссылку на сайт.

Просьба в начале отклика писать: "Готов".

ОБЩИЕ

• Добавить кнопку “Вверх” справа.
• Добавить на фото акционных товаров стикеры с процентом скидки.

ОТОБРАЖЕНИЕ СТРАНИЦЫ НА ДЕСКТОПЕ

Общие

• Разделить страницу на две части: левая 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/jslp5n https://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)
• Поле “Номер телефона” нужно сделать:
• При нажатии на поле “Номер телефона” курсор должен появляться здесь - 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.

• Если в заказе есть товар со скидкой:

- после поля “Доставка” выводится “Экономия” (разница между обычной ценой всех товаров и ценой с учетом скидки);

- в поле “Сумма заказа” под суммой заказа выводится серая зачеркнутая стоимость заказа без скидок.