Введение Шаблон: http://themeforest.net/item/couponia

Введение
Шаблон:
http://themeforest.net/item/couponia-coupons-online-shoptemplate/8233607?WT.oss_phrase=&WT.oss_rank=38&WT.z_author=Tsoy&WT.ac=search_list
Шаблон отличается от оригинала, так как обработан и приведен к необходимому виду. Требует
небольших доработок.
Исходные данные:
- страницы требующие доработки (html)
- все необходимые файлы шаблона (css, jq, img, fonts)
- по запросу могут быть выданы оригиналы файлов (под оригиналами подразумеваются,
«нетронутые», «чистые» файлы шаблона)
- ТЗ с описанием необходимых доработок
Практически все элементы (лайтбоксы поп-ап, тултипы, чекбоксы и т.д. и т.п.) есть в шаблоне,
большая половина задач сводиться составлению из этих элементов необходимого вида страницы.
Тем не менее некоторые элементы придаться делать с ноля с версткой css, html, jq.
Необходимые доработки
Общие доработки на всех страницах и условия при которых необходимо «писать» создаваемый
код:
- Проверить на кроссбраузерность: IE7-9, Chrome (15+), Firefox (15+), Opera (12+), Safari 5. Скрипты
работают в соответствии с ТЗ. В IE7-8, могут быть незначительные упрощения, скрипты, связанные
с анимацией, могут работать в упрощенном виде.
- Проверить верстку на валидацию
- Платформы: Windows, MacOs
- Доступность страниц при отключенных картинках
- Доступность страниц при отключенных скриптах
- При написании кода:
- Имена классов и идентификаторов – осмысленные
- Классы служат для привязки оформления, идентификаторы – скриптов.
Страница «каталог товаров» (catalog.html)
1. Слева необходимо сделать вертикальное меню «аккордеон» (пример подобного меню:
http://futboholic.com/category/muzyika-23943/ ). 4+ уровня вложенности меню (Раздел
меню > 1 > 2 > 3 > 4 ).
Описание: как видно из примера по ссылке, каждая категория меню должна иметь
область (в примере это знак «+») при нажатии на которую меню просто
«разворачивается» без загрузки контента данной категории. При нажатии же вне
области на категорию меню происходит загрузка контента данной категории и меню
также «разворачивается». Можно реализовать это каким-либо другим образом при
условии сохранения принципа – нажатие для загрузки контента и просто для
открытия подменю.
Стилистическая составляющая меню должна быть в соответствии с шаблоном
(допускаются отступления от стилистики шаблона, при согласовании с заказчиком).
2. Сверху над контентом каталога необходимо реализовать верстку фильтров (Удалить, тот
фильтр который сейчас есть на странице-нерабочий) : [первый фильтр – по новинкам и
популярности] [второй фильтр по виду товара > по полу (для некоторых категорий товара)
> по наименованию] (пример работы этих фильтров
http://www.vsemayki.ru/catalog/sort/sell/mayki_autotuning ). Стилистика должна быть
соответствующая шаблону. Использование иконок (типа font-awesome, они подключены в
шаблоне) или изображений.
Описание: Ниже приведен схематичный рисунок и описание того, как это вижу я.
Возможно исполнитель сможет предложить более интересный, креативный, удобный,
функциональный вариант (нужно согласовать). При выборе в фильтре товара,
например, категории «одежда» появляется стрелочка справа (font awesome) и фильтр
по полу (м/ж). При выборе, например, категории «мужская» появляется стрелочка
справа (font awesome) и фильтр по виду товара. Иконки использовать размером «fa-lg».
Текст в ячейке должен выравниваться по горизонтали – по центру, по вертикали
иметь небольшой отступ слева. В видах товара есть длинные названия (до 45
символов), необходимо предусмотреть написание в 2 строки и размер шрифта (чтобы
было читаемо. Необходимо согласовать этот момент при выполнении работы).
3. Ниже меню и фильтра по атрибутам (блок слева под меню категорий) реализовать верстку
фильтра по цвету. Блок с выбором по цвету (пример реализации:
http://futboholic.com/category/muzyika-23943/ . Сделать не квадратами, а кружками.
Стилистика по шаблону). Реализовать возможность делать цвет фона кружка картинкой
(для специфических окрасок, в остальных случаях цвет кодом). При наведении на цвет
«вылезает» тултип (тултип - подсказка, уже встроен в шаблон, добавляется просто
классом) с названием цвета. При выборе цвета вокруг появляется рамка цвет по шалону.
Страница карточки товара (product.html)
1. В правом блоке есть фильтр по категории товара и по наименованию товара. Он реализован в
виде вкладок (категории товара) и в виде баннера (наименование товара). Необходимо
доработать следующий функционал:
- при наведении на вкладку категории товара, которая на данный момент обозначена
просто иконкой font-awesome, должна «выезжать» надпись с названием категории. Ниже
приведена схема, с визуальным описанием того, что требуется. Реализовать можно с
помощью ccs3, либо jq. Выбрать наиболее подходящий вариант, ориентируясь на такие
факторы как простота кода, более быстрая скорость загрузки, кроссбраузерность.
- наименование товара в каждой категории представлено в виде «карусели» с
графическим отображением товара (рассмотреть возможность использование спрайтов,
если это рационально). Необходимо подобрать самую быструю, оптимальную «карусель».
Сделать так, чтобы эти карусели отображались для каждой категории товара (на данном
этапе это не работает).
- рассмотреть возможность применения легкого (по загрузке) эффекта при наведении на
наименование товара
2. После полей с наименованием товара и описанием товара, идет зона с выбором цвета, размера
и таблицей размера. Необходимо эту зону скомпоновать:
- Палитра цветов должна быть полностью показана как в примерах на сайтах (ссылки приведены
выше). С функционалом из «страницы каталога» пункт 3. (Т.е. по сути 1 разрабатывается
функционал)
- Палитра размеров, так же должна быть выведена полностью на страницу.
Страница Корзины (?.html)
Страница корзины останется практически без изменений.
1. Её необходимо лишь русифицировать и добавить дополнительные поля для ввода промо
кодов ниже блока таблицы с приобретаемым товаром.
2. Сделать max-height и width у картинки не больше 150 px
Описание: Полей для ввода промокодов должно быть 5 шт. Перед полями для промокодов идет
заголовок «Введите промокод для получения скидки: » ниже более мелким шрифтом сноска
«Узнай как получить промокод в разделе (ссылка, открывается в новой вкладке) Скидки и Акции
(после ссылки иконка font-awesome «открытие в новой вкладке»). Названия скидок окрашено в
характерный цвет, при активации поля, оно обрамляется в хар-ный цвет. Номера цветов есть
в css файле. Ниже полей идет кнопка «применить скидки».
Введите промокод для получения скидки:
Узнай как получить промокд в разделе Скидки и Акции #
Зеленая скидка:
Оранжевая скидка:
Желтая скидка:
Синяя скидка:
Акция:
применить скидки
Кнопка оформить заказ.
Страница оформления покупки (checkout.html)
Взять за основу вариант шаблона.
1. Слева оставить вывод цены. Справа под выводом цены. Сделать вертикальный блок с
выводом товара (1 столбец, коло-во товаров – посмотреть как будет лучше смотреться,
примерно 3+). Заголовок в блоке «Последние оформленные заказы:». Вывод товара
осуществляется в виде карточки с изображением товара, названием товара и числом в
формате число.месяц.год (хх.хх.xx) пробел время (xx:xx).
2. Справа необходимо переделать поля следующим образом:
Описание:
- возле каждого названия поля необходимо поместить иконку font-awesome со знаком вопроса, при наведении на которую будет «всплывать» тултипс с описанием.
- поля должны быть заполнены текстом-подсказкой, при активации поля и начале его
заполнения текст-подсказка изчезает.
- после поля предусмотреть вывод иконки (галочка – поле заполнено верно,
восклицательный знак – поле заполнено не верно. Значки можно заложить другие,
подходящие по смыслу)
Контактные данные:
* Ф.И.О. (?)
* Телефон (?)
Иванов Иван Иванович
+7 (ххх) ххх хх хх
√ /!
√ / ! [неверно заполнен номер]
Описание: поле для номера телефона- «+7», «(» и «)» - статичны. Пробелы между
цифрами статичны.
Е-mail (?)
ivan@mail.ru
√ / ! [неверно заполнена почта]
*Страна (?)
Россия
√ / ! [неверно заполнена почта]
*Область (?)
-
√ / ! [неверно заполнена почта]
*Город (?)
Москва
√ / ! [неверно заполнена почта]
*Адрес (?)
√ / ! [неверно заполнена почта]
-------------------------------------------------------------------------------------------------------------------------------Выберите способ доставки:
Описание: чекбоксы, в зависимости от выбора чек бокса способа доставки, ниже блока с
выбором способа доставки становятся активными или не активными чекбоксы способа
оплаты. Чекбоксы могут быть активны (разрешен выбор) и не активны (выбрать
невозможно). Выбрать можно только 1 чекбокс из списка.
*
Доставка курьером лично в руки
Описание: после выбора этого чекбокса становятся активными чекбоксы для выбора службы
доставки. Цена – выделена в стилистике шаблона. Выбрать можно только 1 чекбокс из списка.
Название службы доставки1 Цена
(подробнее) – лайтбокс с инф.
Название службы доставки1 Цена
(подробнее)
Название службы доставки1 Цена
(подробнее)
Доставка почтой России
Цена
Доставка до пункта выдачи
Цена
---------------------------------------------------------------------------------------------------------------------------------------Выберите способ оплаты:
Описание: чекбоксы. Выбрать можно только 1 чекбокс из списка.
Наличными при получении
Электронным платежом
Описание: после выбора этого чекбокса становятся активными чекбоксы для выбора
способа электронного платежа.
Способ платежа 1
Способ платежа 2
Способ платежа 3
-----------------------------------------------------------------------------------------------------------------------------------------Большая кнопка Заказать!
Описание: При нажатии по кнопке «заказать» появляется лайтбокс, в котором следующего
вида:
х
СПАСИБО!
Вы успешно совершили заказ в нашем магазине
.
номер Вашего заказа:
1812 3210
В ближайшее время с Вами свяжется наш
оператор. Он уточнит контактные данные и
информацию о заказе, чтобы заказ пришел к Вам
в кратчайшие сроки.
Если оператор по каким-либо причинам не перезвонил вам,
пожалуйста, свяжитесь с нами.
вернуться в каталог