Вот сайт: https://mobionik.ru
Описание Работа в основном с редизайном сайта. Нужно сверстать по макетам новую шапку, каталожное меню, новую списковую страницу и карточку товара.



К каждой переверстанной странице нужен адаптивная резиновая верстка. Макет адаптива есть для карточки товара, шапки сайта, остальные (списковая и меню) “на глаз”.

1. Обновить сайт до актуальной версии, все доработки делать на обновленной версии сайта. Важно, чтобы seo- оптимизация, редиректы, урлы были сохранены.

Шапка и горизонтальное меню

1. Сверстать по макету для десктопа и адаптива, макеты https://drive.google.com/drive/u/1/folders/1c_zgffJtL_9aWxy9VC53Y8ZM4M0jwS1f
   
   
   1. При наведении курсора подсвечивается текст
   2. При клике на раздел меню добавляется нижнее зеленое подчеркивание
2. Добавить функционал поиска (его сейчас вообще нет), поиск должен искать по полному и частичному совпадению
3. Структура горизонтального меню:
   
   
   1. Хиты продаж - https://mobionik.ru/specialnye-predlozheniya
   2. Доставка и оплата - https://mobionik.ru/zakaz
   3. Услуги - https://mobionik.ru/bureau
   4. Конаткты - https://mobionik.ru/contact
4. Структура меню справа, над значком корзины и поиска
   
   
   1. О компании - https://mobionik.ru/about
   2. Наши клиенты - https://mobionik.ru/gallery
   3. Варианты использования - https://mobionik.ru/ispolzovanie-stoek
5. Фиксирование шапки при скроллинге
   
   
   1. Для полной версии:
      
      
      1. Логотип
      2. Горизонтальное меню
      3. Кнопка “Заказать звонок”
      4. Кнопка “Получить КП”
      5. Значок поиска
      6. Значок корзины
   2. Для мобильной версии:
      
      
      1. Логотип
      2. Горизонтальное меню - “гамбургер”
      3. Значок поиска
      4. Значок корзины
6. При добавлении товара в корзину - она окрашивается в зеленый цвет, типа заполняется (видно на макете), если в корзине нет товаров - она прозрачная, то есть пустая

Меню товаров

1. Сверстать по макету меню товаров, макеты в файле Mobionik_Shapka_bez_tovarov_Shapka_s_tovarami_Vertikalnoe_menyu .png
   https://drive.google.com/drive/u/1/folders/1c_zgffJtL_9aWxy9VC53Y8ZM4M0jwS1f

1. Выбранные разделы выделять зеленым цветом, невыбранные - черным.
2. в мобильной версии меню располагается перед футером http://prntscr.com/mmlss4 , внешний вид на мобилке заменить на тот, что и в десктопной версии, местоположение оставить прежним

Списковая страница каталога Весь функционал остается неизменным, кроме того, что прописано в ТЗ или отражено на макете.

1. Сверстать страницу по макету, макет https://drive.google.com/drive/u/1/folders/1c_zgffJtL_9aWxy9VC53Y8ZM4M0jwS1f . Важно! На макете не отражено, но нужно оставить кнопку “Я зарегистрирован на портале поставщиков” как сейчас http://prntscr.com/mmlvq9, а хиты продаж убрать.

Файл называется Mobionik_Katalog.png

1. Ссылка на портал поставщиков под вертикальным меню остается без изменений
2. На списковой странице по 3 элемента в ряд
   
   
   1. В мобильной версии по 2 элемента в ряд
3. Структура элементов:
   
   
   1. Анонс изображения
   2. Название
   3. Описание
   4. Характеристики
   5. цена
   6. Сведение о наличии
   7. Кнопка “Заказать”
4. При наведении на карточку товара появляется надпись “подробнее”, которая ведет на карточку товара
5. Переход в карточку товара при клике:
   
   
   1. название товара
   2. изображение
   3. кнопка «Заказать»
6. При наведении на название товара добавляется ховер (данный функционал остается без изменений) :
   
   
   1. Тень у выбранного элемента
   2. Подчеркивание названия товара
   3. Изменение курсора при наведении на название
7. Изображения товаров с пометкой “хит продаж” перенести с текущими леммами.
1. На список надо вывести описание и характеристики
   
   
   1. В админке, к каждому товару надо добавить поле для описания (анонса), из которого будет выводится текст на списковую страницу.
   2. В админке, в кт есть вкладка “таблица” оттуда выводятся характеристики http://prntscr.com/mmm0d2 , нужна возможность выводить эти характеристики на списковую страницу.
   3. Добавить в админке 2 новых поля, они тоже могут выводится на списковой:
      
      
      1. Форма основания
      2. Длина ленты
2. Убрать блок “Хиты продаж” слева, под сайдбаром.
3. Кнопку “Оформить заказ” переименовать в “Заказать”

Карточка товара Весь функционал остается неизменным, кроме того, что прописано в ТЗ или отражено на макете.

1. Сверстать страницу по макету для десктопа и 320px. Файл для десктопа называется Mobionik_Kartochka_tovara.png, для мобильной версии Mobionik_Kartochka_tovara_320.png
2. Цены перенести на место таблицы с характеристиками http://prntscr.com/mmm7k3
3. Свойство “Цвет ленты” сделать превью цвета (убрать выпадающий список), к каждому цвету нужно сделать возможность добавлять картинку цвета, которая будет выводится в карточке товара. При клике на картинку с цветом, снизу, в скобках появляется название цвета.
4. Свойство “длина ленты” вывести отдельными полями, выпадающий список убрать. При клик на поле - он выделяется серым цветом.
5. Изменить порядок вкладок в таблице: первая вкладка “Описание”, вторая “Характеристики”, далее без изменений. Вкладка “Характеристики” активна по умолчанию.
   
   
   1. Видоизменить таблицы во вкладке “характеристики”, убрать границы http://prntscr.com/mmmbn9
6. Цена меняется, если характеристика на нее влияет. Этот функционал остается неизменным.

Слайдеры в карточке товара

1. Добавить слайдер “Вам также могут понравиться”
   
   
   1. Структура внешнего вида есть на макетах кт (анонс изображения + название).
   2. На одной странице слайдера по 3 элемента.
   3. Карточка товара открывается в новой вкладке браузера по клику на изображение и название
   4. Зона перелистывания (стрелки) располагается по всей высоте слайдера http://joxi.ru/brRknGbsJjlnnm
2. Слайдер “Совместимые товары”. Он есть.
   
   
   1. Переименовать “Совместимые товары” в “Сопутствующие товары”
   2. Логика слайдера остается неизменной
   3. На странице слайдера по 3 элемента
   4. Структура элементов. Все свойства заполняются вручную:
      
      
      1. Анонс изображения
      2. Название
      3. Описание
      4. Характеристики
      5. Цена
      6. Сведение о наличии
      7. Кнопка “Заказать”
   5. Карточка товара открывается в новой вкладке браузера по клику на изображение и название
   6. Зона перелистывания (стрелки) располагается по всей высоте слайдера http://joxi.ru/brRknGbsJjlnnm