Архив: Интегрировать в шаблон верстку
Бюджет
По договоренности
Создан: 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
4
Сайт arg2028t. beget. tech/. Нужно сделать вот такой калькулятор. airprint. by/outdoor/wide-format. и еще некоторые доработки....
9 месяцев назад
0
4
Требуется создать скрипт для premiere pro. Данная суть скрипта: в выделеном бине нужно что бы автоматически проставлялся in out ровно по серидине файла так что бы выделенная область была длиной 3 секунды. И требуется кнопка что бы работало через окно expressions. Проблема текущего в том что он не работает......
11 месяцев назад
$714
0
3
Описание задачи: Необходимо разработать serverless функцию на базе NestJS и TypeScript для автоматизированной обработки видеофайлов, загружаемых в Yandex Cloud Storage. Функция должна выполнять конвертацию видео в формат, поддерживаемый основными веб-браузерами, с последующим сжатием до оптимального......
1 год назад
44
13
Необходимо разработать бек и фронт мини-сервиса таким образом, чтоб его можно было развернуть внутри другого проекта....
1 год назад
$1111
23
0
Стоит на Бизнесе для своих нужд на простеньком базовом шаблоне, складываю туда контент потихоньку. Нужно начинать приводить в соответствие что бы публика сразу не убегала, а как то цеплялась, да и продвигать не торопясь. Шаблон где порвался от вставки баннеров подправить, для мобилок может сверстать.......
1 год назад
105
9
117
5
Очень простой криптообменник в виде веб-сайта. Без смарт-контрактов и т. Все платежи вручную....
1 год назад
73
2
Исправление и доработки php и js в воде. Платформа на joomla....
1 год назад
$20
136
1
384
6
Привет! Рад, что тебя заинтересовала наша стажировка! Мы являемся аккредитованной ИТ-компанией, . при наличии высшего образования сможем предоставить бронь . от мобилизации или отсрочку от призыва на срочную службу. надоело работать за 1000$ в месяц? понимаешь что такое Active Directory и как оно работает?......
1 год назад
152
1
Нужно написать чекер аккаунтов на Валид по базе login:password, сайта http://southwest. com с парсингом количества поинтов , на пост гет запросах, использование прокси, много поток, перечек аккаунтов которые не прошли чек из за прокси. Сложность в том что токен при авторизации приходит с js запросов......
1 год назад
80
0
Необходимо проводить работы по технической поддержке и сопровождению сайта банка работающего на CRM 1-C bitrix через GIT. Прошу СТРОГО (! ) указывать окончательную цену нормо-часа в отклике, без неё не смотрю, предпочтение будет оказываться разработчикам из Ярославля и окрестностей (области и из Костромской......
1 год назад
87
1
Необходим специалист, который настроит шлюз Power BI на Windows Server 2012 R2. Проблема: при настройке шлюза Power BI возникает проблема с подключением БД mySQL к шлюзу по причине отсутствия драйвера БД. Попытки установки не привели к успеху. Пожалуйста, прикрепите к отклику кейсы. Также укажите приблизительную......
1 год назад
131
4
редактировать код сайта на Wordpress исходя из тз 2. оперативно добавлять и редактировать информацию на сайте (новые страницы, разделы, блоки) 3. поддерживать стабильный уровень загрузки согласно google speed 4. оптимизировать «тяжелые» страницы сайта 5. быть на связи в рабочее время и решать задачи......
1 год назад
217
1
Предоставляю в Аренду аккаунт Upwork для работы с своего ПК. Установленой зп нет, так как все зависит от вас....
1 год назад
337
4
(Для диплома). Разработать сервис для организации проекта "IT для людей" ЗАО "Тандер". Функции веб сервиса:. пользователь может подать заявку на установку ПО, ремонт оборудования, консультацию. обучение сотрудников, курсы(бесплатные в рамках нац. проекта "образование"). обучение сторонних людей(бесплатно)......
1 год назад
81
0
https://github. com/ant-media/Ant-Media-Server используя antmedia собрать простой сайт с авторизацией/регистрацией + главная страница вывод активных стримов ( название/превью) страница добавления стрима, поля: название стрима / описание стрима / превью стрима страница стрима с плеером/названием/описанием/логином......
1 год назад
$13
94
5
Оплата сдельная Необходимо сверстать карту проектов на основе сервиса mapbox....
1 год назад
217
7
$875
324
4
Нужно доработать действующий сайт маркет плейс на опен карт 3 и исправить баги сайта на Yii2. Тех задание представим. Оплата от 70 000 руб и выше, сроки до 1 месяца + высокие премиальные....
1 год назад
$775
95
0
Нужен шаблон регистрации аккаунтов и рассылки линкидин. Есть готовый шаблон - можете либо доработать либо сделать новый. Работа в первый месяц строго через гарант сервис а в последуюшем возможны варианты. Напишите на те ле гр zakaz021 для получения Тех Задания....
1 год назад
Похожая удалённая работа
- Удаленная работа для веб-программиста
- Удаленная работа для разработчика баз данных
- Удаленная работа для прикладного программиста
- Удаленная работа для системного программиста
- Удаленная работа для разработчика игр
- Удаленная работа для разработчика мобильных приложений
- Удаленная работа для тестировщика ПО
- Удаленная работа для 1С программиста
- Удаленная работа для разработчика встраиваемых систем
- Удаленная работа для разработчика CRM и ERP
Перетащите