Доработка сайта на вордпресс

Задание на изменения на сайте https://okna-alkor.ru/glavnaya-2/

ИНТЕГРИРОВАТЬ В АДМИНКУ НИЧЕГО НЕ НАДО

Заверстать прямо в шаблоне кодом!!!!!!!!!

1. Заверстать новый блок с карточками продукции как в дизайне.

https://www.figma.com/file/3WUispH8LFHvgNeFUtSSNw/Алькор-(Апрель-2020)?node-id=0%3A1

1.1. Карточки располагаются в ряд по 5 штук на экране. Большее количество карточек доступно при нажатии на кнопки право/лево.

Если карточек меньше 6штук для десктопа и меньше 2штук для мобильной версии, то кнопок право/лево нет. А выравнивание происходит по левому краю. (Если это упростит реализацию, то можно кнопки использовать в любом сценарии всегда. При нажатии карточки могут просто меняться местами последовательно)

1.2. При наведении мышкой на карточку разворачивается краткое описание продукта в пределах карточки продукции. В мобильной версии такой функции нет.

На описание продукции в свернутом виде отведено 2 строчки. Если полное описание больше 2-х строчек, то в конце второй строки должны всегда стоять 3 точки и на десктопе и в мобильной версии.

1.3. При клике мышкой на карточку продукции или при нажатии на карточку пальцем на мобильном, открывается всплывающее окно.

1.4. Во всплывающем окне есть раздел «Характеристики товара». Этот раздел раскрывается при нажатии. Раскрытие происходит вниз со смещением нижестоящего контента.

1.5. Под разделом «характеристики товара» начинается раздел калькулятора. (это Тип дома и Дополнительная комплектация). При Выборе пунктов в этом разделе ничего не меняется и не запоминается.

При нажатии на чек боксы просто ставятся галочки.

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

Итоговая цена это просто текст.

1.6. Раздел с телефоном и кнопкой «Рассчитать» отправляет данные в CallTraking Mango и в Битрикс24. Также как это реализовано на других формах сайта

2. Заложить для всех форм на сайте верификацию данных и блокировку отправки недостоверных данных, так чтобы ложные срабатывания не попадали в статистику calltraking. При не правильном, заполнении формы, пользователю выдается всплывающее сообщение – «Поля не заполнены или заполнены не верно». Сообщение закрывается по нажатию крестика. Информация при этом не удаляется и сохраняется возможность корректировать данные и отправить повторно.

3. При успешной отправке формы пользователь получает всплывающее сообщение – «Данные успешно отправлены». Сообщение закрывается по нажатию крестика.

4. В хедере при наведении мышки на почту на десктопе должно выходить сообщение – «Почта будет скопирована в буфер обмена». После нажатия на почту, адрес почты копируется в буфер обмена. После нажатия и копирования в буфер выдается сообщение – «Почта скопирована в буфер обмена»