Создать простой интернет-магазин и сверстать

1. На каждой странице сайта, справа вверху, имеются надписи текущего языка сайта. По умолчанию он русский. Необходимо чтобы все 4 надписи: РУССКИЙ, ENGLISH, DEUTSCH, ESPANOL – стали кликабельными. HTML-версия сайта в файле vermix_HTML.rar

2. На странице price.html согласно изображению Design5.psd находится модуль магазина. Страницу необходимо сверстать, желательно с большей степенью сходства (обратите внимания на пункты 3 и 7). Необходимо предусмотреть возможность работы магазина под разное разрешение- от обычного 1024х768, до 1920х1200 – для этого сайт изначально делался «резиновым». Когда позиции товара с длинными именами не умещаются в 1 строчку, допустимо названия делать в 2 или 3 строки. Соответственно, при wide-мониторе длинное название будет успешно умещаться в 1 строку.

3. Визуально позиции в магазине выделяются через одну зеленой полосой – для удобства восприятия. Полоски берутся из файла Design5.psd

4. Ссылки на странице: СКАЧАТЬ ПРАЙС-ЛИСТ – открывается окно для скачивания файла XLS, который загружается через систему управления интернет-магазином, этот же файл является основополагающим для таблицы товаров, который видит посетитель.

Вторая ссылка: ОСТАТКИ НА СКЛАДЕ – ведет на страницу last.html. Страница last.html уже сверстана.

5. В прайс-листе (xls) есть позиции, цены к которым не указаны. На странице магазина такие товары не могут быть куплены/заказаны, поэтому визуально в колонке «кол-во» стоит зеленый квадрат и отсутствует справа от нее кнопка «купить».

6. Если колонка «цена» в прайс-листе (xls) заполнена, то независимо заполнено ли поле «вес упаковки» или не заполнено – такие товары можно покупать.

7. Посетитель, пользуясь клавиатурой, может выставлять количество товара в соответствующей колонке от 1 до 999. Для этого ширина ячейки должна быть такой, чтобы визуально вмещать в себя три знака цифр.

8. Колонка «единицы измерения» в зависимости от товара может иметь 3 значения: «упак» или «кг», или не иметь вовсе(оставаясь пустой) – данные берутся из файла xls.

9. Когда посетитель с помощью клавиатуры вводит необходимое количество единиц напротив нужного товара и нажимает кнопку «купить», то справа на странице price.html в КОРЗИНЕ ЗАКАЗОВ отображается покупаемая позиция товара: его название и количество. Когда позиции товара с длинными именами не умещаются в 1 строчку, допустимо названия делать в 2 или 3 строки. Если позиций товаров много, то область КОРЗИНЫ ЗАКАЗОВ на странице price.html визуально увеличивается вниз на необходимую длину.

В самом низу КОРЗИНЫ ЗАКАЗОВ подводится итог текущего заказа надписью «На сумму» - отображается итоговая сумма всех покупок. По кнопке ОФОРМИТЬ ЗАКАЗ клиент переходит на страницу basket.html

10. Страница КОРЗИНА ЗАКАЗОВ basket.html – необходимо сверстать из Design5basket.psd

11. На странице basket.html должны быть представлены купленные товары, их количество, стоимость, а также возможность удалять позиции товаров кнопкой «очистить». На этой странице посетитель может менять количество товара как в большую, так и в меньшую сторону (от 1 до 999), после смены количества товара при нажатии кнопки «обновить» происходит рекалькуляция суммы за товар и итоговой суммы.

Кнопка ВЕРНУТЬСЯ К ПОКУПКАМ ведет обратно в интернет-магазин, на страницу price.html

Кнопка ОФОРМИТЬ ЗАКАЗ ведет на страницу order.html

12. Страница order.html верстается из файла Design5order.psd. На странице имеются интерактивные поля для заполнения, помеченные звездочкой - обязательные для заполнения. Поля ТЕЛЕФОН и ТЕЛЕФОН ЕЩЕ РАЗ должны совпадать. В случае не заполнения какого-либо обязательно поля и/или поля ТЕЛЕФОН и ТЕЛЕФОН ЕЩЕ РАЗ не совпадают по значению, то выводится надпись «НЕКОРРЕКТНО ЗАПОЛНЕНЫ ОДНО ИЛИ НЕСКОЛЬКО ПОЛЕЙ! Проверьте правильность введенной информации и повторите попытку снова». Надпись выводится справа от того поля, в котором некорректная информация: если телефон продублирован неверно, то напротив ТЕЛЕФОН. Если какое-либо обязательное поле не заполнено, то напротив этого поля (справа). В поле EMAIL при заполнении посетителем должен присутствовать символ @.

Надпись об ошибке выводится красным цветом, шрифтом кегль 12, курсивом.

13. После нажатия на кнопку ОФОРМИТЬ ЗАКАЗ посетителю открывается страница confirm.html – эта страница уже сверстана.

14. Сформированный заказ отправляется на почтовый ящик [email protected]

В поле «тема письма» указывается “order NNNN”, где NNNN –номер текущего заказа, начиная от 1 и к последующим письмам прибавляется единичка, то есть NNNN+1.