Кейс по разработке и редизайну косметологической клиники Dolce Vita Клиент: Dolce Vita
О клиенте
Клиника Dolce Vita предоставляет профессиональные услуги в области косметологии, омоложения и коррекции внешности с применением современных технологий. Компания обратились к нам с просьбой выполнять крупный ряд правок, изменить структуру страниц и сделать редизайн сайта.
Стек технологий
Основные задачи
- Переделать структуру главной страницы, создать новые страницы для услуг со своим дизайном, внедрить адаптивную вёрстку;
- Сделать админку для главной страницы на примере блочного редактора WordPress;
- Добавить новый блок с картой лояльности Dolce Vita (гостевая карта);
- Запрограммировать динамический поиск по всем услугам клиники;
- Внедрить микроразметку для всех изображений сайта;
- Редизайн сайта по новому макету, уход от привычного розового цвета к голубым тонам;
- Множество правок для удобного и правильного отображения визуальных блоков, перестройка базовых свойств, исправление багов.
Для работы над проектом сделали слепок основного сайта, настроили Git-репозиторий и вынесли на наш тестовый сервер.
Реструктуризация главной страницы
Перед началом работ главная страница включала в себя несколько блоков с определенной услугой: блок со специалистами и форму для обратной связи. Основная часть страницы была статичной, что не позволяло изменить контент внутри блоков.
Изменение структуры началось с добавления раздела отзывов по макету, пока также статично, настроили отображение через jquery, адаптировали под разные разрешения.
Далее, помимо простого описания двух услуг, сделали отдельный блок, в котором будет размещаться слайдер для всех категорий услуг. Блок был реализован по примеру слайдера со специалистами с небольшими изменения.
Изначально все услуги на сайте не имели определенной категории и ссылка всегда вела на /uslugi/процедура, визуально услуги были разделены, но функционально не были никуда привязаны, что вызвало проблемы при отображении категорий в слайдере.
Было принято решение создать отдельные инфоблоки для каждой категории, что позволило кастомизировать каждую страницу в отдельности и после уже связать с нужными услугами.
Добавили блок с картой лояльности, позже он тоже будет настраиваемым.
Также по просьбе заказчика был встроен новый блок с сертификатом после формы обратной связи.
В результате реструктуризации было добавлено 3 новых блока, некоторые разделы перетасовали в другие позиции, выдвинув информативный текст с заголовком на передний план, подправили макет, адаптивную вёрстку, стандартизировали отступы.
Разработка админ-панели для главной страницы
Как уже говорилось, большая часть информации на странице была статичной, а так как страница главная, изменять её приходилось часто (сезонные изменения, акции, изменения в компании и т.д.). Редактирование страницы можно было реализовать через режим правки в Bitrix, но заказчикам привычнее был функционал редактирования, как в WordPress (отдельная страница, куда можно было зайти и настроить нужные параметры).
Вновь пересмотрели структуру страницы, выделили редактируемые блоки, осталось только запрограммировать.
Создали отдельный инфоблок “Главная страница”, и через свойства инфоблока битрикса внесли список всех редактируемых полей.
Некоторых типов свойств в bitrix не было, из-за чего пришлось бы создавать много однотипных полей другого вида, что в свою очередь сильно бы усложнило вывод этих полей на страницу, и образовались бы рамки для менеджера, если количество полей требуется неизвестное количество.
Для решения этой проблемы были добавлены новые типы свойств, имеющие свою уникальную структуру. Также был создан новый тип свойств не для вывода информации на главную страницу, а для создания памяток внутри админ панели, позволяющие направлять менеджера на нужные настройки админ-панели и других инфоблоков/разделов.
Когда поля были созданы, внедрили их внутрь шаблона главной страницы, подтянув свойства инфоблока. Теперь каждый блок на странице был живым и мог редактироваться без участия разработчика. Также каждый раздел страницы имел возможность отключаться (скрываться) по желанию.
Динамический поиск
Для меню необходимо было внедрить отдельную иконку, по нажатию на которую открывалась бы форма поиска.
Использовался стандартный компонент Bitrix для этой задачи, мы же его только модифицировали. Так как результат поиска должен был показываться на странице, с которой он вызывается, сделали поиск асинхронным, также агрегировали результат по нужным группам — услуги, процедуры или статьи из блога. Осталось только стилизовать и адаптировать под все устройства.
Внедрение микроразметки
Не оставили и без внимания потребности поисковых систем. Для части контента микроразметка уже была настроена, основные требования были к созданию микроразметки для изображений.
Задача несложная, но муторная, шаблонов в проекте больше 30 и каждый содержит в себе сколько-то изображений, нужно не только внести микроразметку, но и не сломать логику отображения изображений.
После внедрения микроразметки пропустили всё через валидатор, заодно и поправили некоторые проблемы, не связанные с изменениями.
Редизайн сайта
Последней крупной правкой был полный редизайн сайта под новый макет.
С макетом можете ознакомиться по ссылке тут.
Основные изменения, которые были проделаны:
- Новая цветовая схема для всех элементов и при наведении на них.
- Реструктуризация основных страниц, добавление новых блоков, перемещение и удаление старых.
- Правки и создание базовых свойств разделов для части страниц, новые слайдеры, переработка страницы “Контакты” и вывод документов.
- Исправление багов отображения.
- Полностью адаптировали под разные форматы устройств.
- Редизайн меню и настройка более удобной адресации через Bitrix.
- В очередной раз провалидировали всю вёрстку через Schema.org.
- Правки/Пожелания от клиента, которые мы внесли вне основного макета.
Результаты
- Полностью переработанные основные страницы сайта.
- Отзывчивая админ-панель для максимальной кастомизации главной страницы, адаптивная под будущие изменения структуры страницы.
- Динамический поиск услуг и статей из блога.
- Для каждого изображения на сайте настроена микроразметка.
- Полный редизайн сайта с адаптивной вёрсткой.
- Большое количество правок и исправлений как функциональных, так и интерфейса.