Вёрстка сайта по ТЗ

Техническое задание на верстку шаблона для интернет магазина по прадаже автомобильных ковриков.

Требуется сверстать шаблон для интернет магазина согласно дизайну в фигиме ссылка .

Кол-во страниц для верстке определяется дизайном в фигме.

1. Вёрстка должна быть адаптивная корректно работающая на браузерах: Google Chrome, Firefox, Safari, Opera,Brave, Microsoft Internet Explorer и Edge. В десктопных, планшетных и мобильных версиях.

2. Верстка должна быть понятная с нормальными именами тегов (которые отражают суть происходящего в верстке) и

задокументированна комментариями.

3. При начальной загрузке страницы не должно быть никаких мерцаний сдвигов контента и тому подобное. Страница должна быть загружена и отображена четко вся. Верстальщик должен дать четкую

информацию по месту подключения и расположения скриптов.

4. Не должно быть на одной странице для разных версий (мобильная, планшет, десктопная) дублирования смыслового блока. Поясняю:

В десктопной версии выводится блок меню значит в мобильной версии и в

планшетной должен быть этот же блок меню. Еще пример: выводится на

странице блок с элементами категорий, во всех версиях должен выводится один и тот же блок.

5. Каждый смысловой блок должен быть с комментарием на русском языке своей принадлежности ( футер, меню, хедер, слайдер, меню, доп.

товары и тд)

6. Использование технологий строго Html, css ,js (без использования сторонних библиотек и технологий, но допускается использование JQuery последних версий) без сжимания содержимого файлов.

7. Все односмысловые блоки которые используются в разных местах в проекте должны быть выполнены одним блоком с одним классом и

стилями. Поясняю: к примеру есть блок “подберите коврики в свой

автомобиль” и если этот блок находится на разных страницах в проекте то верстка должна быть для одного блока и этот

блок будет вставляется в другие места куда нужно.

8. Все элементы формы с которых требуется снять информацию и должны обрабатываться формой и отправляться на сервер. Поясняю: к

примеру в карточке товара есть выбор параметров цвета в кружочке, окантовка

коврика тоже кружочки. При выборе данных кружочков скорее всего смена цвета

будет делаться js , но конечный выбор всех элементов которые изменяются или выбираются должны быть элементами формы, что бы их можно было отправить на сервер. Не нужно делать кружочки див

со стилями все элементы такого плана должны быть чек боксами если выбор

нескольких или радио если выбор один с соответствующей стилизацией.

9. Для возможности вывода валидации для элементов формы должен быть прописан класс со стилями который будет применятся к

валидируемому полю. Этот класс должен быть один ко всем элементам формы. И

стили для этого класса должны работать во всем проекте.

Так же создается отдельный класс со стилем для перечеркиванию цены и перечеркивание добавляется прибавкой класса

перечеркивания -> так же во всех местах проекта.

10. Структура верстки. Все файлы разложенные по папкам (js, html, css, Img)

11. Все изображения должны быть оптимизированы под web и должны иметь понятные имена.

12. Микроразметка по schema.org + Open Graph (https://ruogp.me/)

13. Все номера телефонов почт и соцсетей должны быть кликабельны и настроены под конкретные телефоны почты месенджеры.

Кнопка вацап карточка товара: https://api.whatsapp.com/send?phone=79282922425&text=Здравствуйте!%20Мне%20Необходима%20консультация%20по%20товару%20"коврики

в салон BMW 4 (F36) Gran Coupe

2013-2020"%20ссылка:%20eva7.ru/kovrik/1724-kovriki-v-bmw-4-f36-gran-coupe

Кнопка вацап категория,подкатегория:

https://api.whatsapp.com/send?phone=79282922425&text=Здравствуйте!%20Мне%20необходима%20консультация%20по%20коврикам%20для%20"Toyota"%20ссылка:%20eva7.ru/catalog/toyota

Кпопка вацап остальные страницы:

https://api.whatsapp.com/send?phone=79282922425&text=Здравствуйте!%20evadrom.ru/spb%20Мне%20необходимы%20коврики%20для

14. Реализовать аякс запрос с изменением данных на странице где это потребуется.

15. Верстка должна быть предоставлена в таком виде:

1. Шаблон страницы – это хедер и футер. Фаил стилей, изображений, фаил js.

2. Далее для остальных страниц предоставляется только внутреннее содержимое страницы завернутое в комментарий принадлежности

страницы ( каталог, корзина, о компании и тд) + фаил стилей , изображений, фаил

js.

3. Все методы скриптов должны быть закомментированы на русском языке Поясняю: есть блок скипта который выводит модальное окно –

весь блок должен быть помечен комментарием “модальное окно” начало и конец.

4. Все CSS основные блоки должны быть закоментиованны начало и конец.

Особые требования JS

По js требуется сделать:

· модальные окна много вариантов согласно дизайна.

· открывающиеся по кнопке, “читать полностью” – раскрытие текста вниз

· конструктор цветовых решений (при выборе определенных кружков с цветами будет менятся основная картинка согласно

выбранным цветам )

· реализовать блок выбора товара по 3 селектам (изначально подгружен один с категориями, при клике на категорию аякс гет

запрос на определенный урл (получение json) и вставка во 2 инпут , далее по такой же схеме в третий инпут который получит название и ссылку . при нажатии на название должен быть

реализован переход по ссылке на страницу товара.

· переключение стилизованного радио “популярные/все” cо сменой содержимого в блоке

· Встроенный в сайт видеоплеер согласно дизайну

· Разворичивающиеся вниз блоки при нажатии на галочку или плюс несколько.

· Слайдеры изображений согласно дизайна

· Кнопка типа Бургер с меню в мобильной версии с раскрывающимся меню согласно дизайна

· Реализовать вывод рейтинга 5 звезд в карточке товара ( вывод по шкале от 1 до 10 ) с шагом ползвезды

· Кнопка поделится с реализацией.

· Карточка товаров при выборе определенного параметра ( фактура, цвет коврика ,цвет окантовки должна быть смена этих

параметров на условной картинке)

· Карточка товара . Реализации смены блоков изображений по кнопке + слайдер изображений. Предложить варианты и реализовать.

· Реализовать калькуляцию по выбранным комплектам со сменой итоговой цены и скидки. Все переменные и логика будет предоставлена.

· Блок с выводом описания , характеристик ,совместимости и отзывов (изначально показывается описание, при нажатии на другой из вышеуказанных названий открывается текст

выбранного названия и меняется с тем который выведен по факту. Получение из вне не нужно все блоки будут изначально загружены и скрыты

· Корзина: аякс пост запросы на смену кол-ва товаров и удаление калькуляцией и изменением итоговых сумм как у товаров так и

в итоговом блоке

· Корзина если товар выбран кнопка добавить к заказу не показывается

· Оформление заказа: реализовать копирование номера телефона при нажатии на кнопку (номер телефона вацап)

· Блок оформление заказа: Согласно дизайну реализовать поочередное открытие 3 блоков (контактные данные, способ доставки,

способ оплаты) изначально виден только тот блок который заполняется и по мере

заполнения и нажатии на кнопку открывается следующий блок. Заполненные блоки

можно развернуть на галочку и изменить. Все данные будут сохранятся при нажатии

на кнопку в каждом блоке (пост запрос ) Так же все данные будут предоставлятся

в json формате.

· Блок способ доставки при нажатии на изменить город модальное окно с селектом городов и при выборе и изменении (пост запрос)

в ответ придут расценки и смена названия города с расценками

Могут быть дополнительный js скрипты для реализации функций согласно дизайну в фигмы.

Особые требования:

· Верстка должна быть валидна будет проверена на онлайн валидаторе.

· Сайт должен находится в зеленой зоне по всем параметрам в PageSpeed

Требования касаемо СЕО:

1) заголовки h1–h6 не должны использоваться как элементы дизайна или вёрстки и использоваться в текстовой части страницы. У заголовков должны

быть прописаны стили в файле стилей (CSS).

Всегда в шаблоне нужно прописывать h1, который равен названию страницы. За редким исключением, когда просто по дизайну не

предусмотрен заголовок

2) Картинки должны содержать атрибут alt (для элементов дизайна и вёрстки устанавливается пустой alt=""). Между картинками и текстом должен

быть задан отступ. По возможности, название файла картинки должно также

отражать суть изображения (как и тег alt)

3) всегда выносим максимальное число стилей в файлы CSS для облегчения кода, оптимизации загрузки

сайта и удобства работы со стилями.