Задача: сделать дизайн модального окна при нажатии кнопки Купить.
Сайт:
При нажатии кнопки Купить должно появляться модальное окно с запросом характеристики этого товара и количества. На сайте все товары идут с дополнительными характеристиками и их нужно указать до попадания товара в корзину.
Требования и что должно быть в этом окне:
1. Конечный файл в формате .psd (Фотошоп).
2. В окне не должно быть ни одного непереносимого элемента шире 320 пикселей (требования под мобильные).
3. У окна должен быть крестик закрытия окна (в правом верхнем углу) достаточного размера, чтобы попадать в него с телефона (требование не строгое, т.к. будет кнопка Отмена п.15).
4. Крестик закрытия окна должен иметь 2 варианта дизайна. Один в обычном состоянии, второй при наведении мыши.
5. По высоте окно должно помещаться на современные телефоны (лучше не более 560 пикселей). В нем будут динамические элементы и человек должен видеть все окно целиком без прокрутки по высоте.
6. В окне должна присутствовать фотография товара.
7. В дизайне должно быть предусмотрено два варианта цены. Первый вариант просто цена. Второй вариант две цены. Первая зачеркнутая, а вторая реальная. Второй вариант дизайна будет использоваться для акций и скидок.
8. Цена должна хорошо смотреться из 5 цифр (например 58 745р.).
9. В окне должно быть 2 варианта указания наличия. Есть в наличии и нет в наличии. Надпись будет меняться динамически, при выборе той или иной характеристики товара.
10. Выбор характеристики товара. Наверное, самый сложный пункт. Есть товары, у которых одна характеристика, а есть у которых более 50 (!). Способ выбора характеристики на усмотрение дизайнера. У нас решения нет. В выборе должен быть текст характеристики (максимум несколько слов)
11. Должно быть поле для указания количества товара.
12. Должны быть стрелки для увеличения и уменьшения количества товара без использования мыши. Эти стрелки должны быть удобными и при работе с мобильных (чтобы легко нажимались пальцем).
13. Должна быть общая сумма добавляемого товара. Например фраза: В корзину будет добавлено 5шт. на сумму 5000р.
14. Должна быть кнопка Добавить в корзину. Кнопка должна иметь 2 варианта дизайна. Обычное состояние и при наведении мыши.
15. Должна быть кнопка Отмена. Кнопка должна иметь 2 варианта дизайна. Обычное состояние и при наведении мыши.
16. Должно присутствовать наименование добавляемого товара. Например: Бесцветный акриловый лак Mobihel anti scratch.
Конкурс проводим не первый раз, правила знаем. В обсуждении предлагаемых вариантов участвовать не планируем. Планируем взять лучший предложенный вариант и с ним дальше работать. Победитель в единственном числе будет определен 100% в любом случае, т.к. сейчас дизайна такого окна просто нет. Выбранный дизайн через какое-то время появится на сайте
К заданию прикрепляю скриншот такого окна в старом дизайне. В какой-то мере оно нас устраивало. Это не призыв сейчас делать такое же, просто для информации.
Работы можно высылать по адресу: admin@avtokraska-shop.ru Перед сдачей работы, просьба проверить ее по ТЗ.