Главная → Новости → 03.08.2016 →

Модернизация сайта инженерного центра «ТеплоСервис»

Задача

U-CMS В работу нам достался сайт инженерного центра «Buderus» (компания «ТеплоСервис»), сделанный на некоей системе управления «UCMS», описание которой мы нигде не нашли. Ресурс представлял собой сайт с небольшим количеством страниц и, соответственно, малым количеством размещенной на нем информации. Небогатый (практически отсутствующий) функционал, одноуровневая структура, отсутствие перекрестных ссылок — вот всего лишь некоторые его особенности.

В качестве задач нам предстояли работы по технической модернизации нашего нового «пациента», добавлению информации, функционала, развитию многоуровневой структуры сайта и прочие доработки.

Компания «ТеплоСервис» с 2008 года оказывает услуги в области построения инженерных коммуникаций для частных домов и коттеджей Москвы и Московской области. Из всего многообразия существующих на сегодняшний день производителей котельного оборудования и комплектующих в качестве основы используются изделия немецкого бренда «Buderus».

Итак, когда мы увидели сайт в первый раз, его главная страница выглядела вот так:

Главная страница сайта — БЫЛО

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

Решение

Как происходит практически в каждом случае при модернизации сайтов или в процессе их технической поддержки, начали мы с верстки уже имеющихся текстов. Верстка текста, переопределение стилей заголовков, абзацев, приведение в порядок внешнего вида с «читательской» точки зрения. Также настоятельно рекомендуем отказаться от присутствовавшего в некоторых разделах выравнивания текста одновременно по левому и правому краям. Вновь сверстанный текст выравниваем только влево. Аргумент — отсутствие в современных веб-браузерах и CMS функции автоматического переноса слов. Хотя, справедливости ради стоит заметить, что WordPress это-таки умеет:-)

Забегая вперед, представим читателю финальный вариант главной страницы:

Главная страница сайта — СТАЛО

Шаблоны разделов сайта строятся на основе TPL-файлов. Визуальный редактор, используемый в CMS, даже в режиме редактирования HTML-кода не предоставляет всех возможностей по развитию функционала интернет-ресурса. Он (редактор) попросту вырезает ненужные с его точки зрения теги и куски исходного кода или заключает их в комментарии. Например, в контент страницы нельзя вставить какой-нибудь исполняемый PHP- или JavaScript-код, который оказался нам чрезвычайно необходим для разработки функциональных нововведений.

Как быть в этом случае? К счастью, редактор позволяет использовать конструкцию {include file="file.tpl"}, при помощи которой в страницу можно вставить любой TPL-файл с абсолютно любым кодом. Выход из ситуации: в TPL-файлах прописываем функционал и используем его в шаблонах разделов сайта.

Такой подход мы используем для разработки следующих элементов, которых прежде на сайте не было:

«Хлебные крошки»

«Хлебные крошки» (навигационная цепочка, breadcrumbs) — очень важный элемент навигации с точки зрения юзабилити сайта и SEO-оптимизации. Она показывает структуру ресурса и удаленность текущей страницы от главной (по аналогии со структурой папок и подпапок на диске персонального компьютера). При помощи навигационной цепочки можно всегда легко вернуться на один или несколько уровней выше в структуре страниц и разделов.

«Хлебные крошки»

Выделение активных пунктов меню

Дополнительное удобство предоставляет функция подсвечивания активного пункта верхнего меню. Посетитель сайта всегда видит, в каком разделе или подразделе он находится.

Выделение активных пунктов меню

Кнопка «Заказать»

На новых страницах сайта с описаниями и техническими характеристиками изделий теперь есть кнопка «Заказать», при нажатии на которую открывается всплывающее окно с формой заказа выбранного устройства.

Кнопка «Заказать»

В форму автоматически передается название изделия (заголовок текущей страницы браузера), потенциальному покупателю остается только заполнить контактные данные, комментарии и нажать на кнопку «Заказать». Письмо с заполненной формой приходит администратору сайта.

Всплывающее окно с формой заказа продукции

Формы заказа расчета стоимости и каталогов на главной странице и в разделе «Продукция»

Аналогичные формы теперь присутствуют на главной странице сайта и в разделе «Продукция». Посетители могут заказать расчет полной стоимости объекта или запросить каталоги и прайс-лист продукции в электронном виде.

Форма заказа расчета стоимости на главной странице

Форма заказа каталога и прайс-листа в разделе «Продукция»

«Карусель» объектов

«Карусель» объектов в разделе «Монтаж» — это прокручивающаяся полоска с миниатюрами фотографий объектов и их названиями. В карусели можно предварительно просмотреть все портфолио работ компании и, при необходимости, перейти к описанию выбранного объекта.

«Карусель» объектов

Новые разделы и страницы

Фрагмент обновленной страницы «Монтаж», состоящей теперь из обновленной, переработанной и дополненной фотогалереи готовых объектов и описания этапов работы компании при установке оборудования:

Фрагмент обновленной страницы «Монтаж»

Страница «Продукция» полностью переделана. Существенно расширена номенклатура, оборудование разделено на тематические блоки по типам, рядом с каждым изделием находится информация о его стоимости и краткие технические характеристики:

Страница «Продукция»

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

Страница подробного описания изделия

Сравнение страниц сайта в режиме «БЫЛО-СТАЛО»

Главная страница

Главная страница сайта — БЫЛО

Главная страница сайта — СТАЛО

Страницы описания дымоходных систем

Страницы описания дымоходных систем — БЫЛО	Страницы описания дымоходных систем — СТАЛО
Страницы описания дымоходных систем — БЫЛО	Страницы описания дымоходных систем — СТАЛО