Kherson Development Team

inen.ru (Миграция на Joomla-Virtuemart с самописной CMS, разработка ПО, настройка модулей, оптимизация Virtuemart по быстродействию)

Сайт института эффективности, расположенный по адресу inen.ru, реализуется CMS Joomla, компонентом Virtuemart, а также набором модифицированных либо созданных нами для этого сайта, модулей.

Разработка сайта была достаточно длительной — порядка 2 месяцев; первоначально сайт базировался на самописной CMS. C учетом очень большего количества заведенных в БД товаров, первоначально необходимо было разработать скрипт — конвертер самописная CMS — Virtuemart. Назовем это этапом 0.

Затем, на этапе 1, была выполнена верстка шаблона под CMS Joomla, установка и настройка стандартных модулей. Стандартные модули предстояло интегрировать по дизайну, а затем — дописать для соответствия требованиям заказчика. Кроме того, поскольку посетители сайта привыкли к интерфейсу самописной CMS, необходимо было основательно поработать над интерфейсом CMS Joomla, оптимизировать его юзабилити с тем, чтобы переход на новое программное обеспечение прошел гладко и незаметно для конечного пользователя.

inen.ru - Главная страница сайта

Первоначально были установлены следующие модули и компоненты: mod_ppc_fastfont (изменение размера текста страницы без ее перезагрузки), mod_virtuemart_search (специализированный поиск товара Virtuemart), mod_vendor (вывод списка производителей-брендов), mod_mainmenu (вывод главного меню), mod_product_categories (иерархический вывод категорий Virtuemart), mod_acajoom (подписки на рассылки).

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

Следующий, второй, этап имел основной целью приведение установленных модулей и компонентов к требованиям заказчика, для этого часто требовалось менять части ядра Joomla, которое обычно остается неизменным, а также доустановку и написание некоторых модулей и компонентов. Этот этап занял большую часть отведенного под проект времени.

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

Далее панель адресной информации была разделена на части, для каждой из которых установлены свои правила при нажатии. Так, при щелчке по логотипу сайта происходит переход на главную страницу, при щелку на телефонах — запускается Skype, адрес электронной почты запускает почтового клиента, а на номера ICQ установлены тэги, предотвращающие их автоматический сбор.

Рядом, размещена панель быстрых ссылок с 4 ссылками. Каждая из них меняет цвет при наведении, сохраняет красный цвет после щелчка и теряет его только после перезагрузки страницы или нажатию на соседние кнопки. Для обеспечения нормальной работы панели пришлось разработать механизм предзагрузки изображений сайта.

Далее было перенастроено оформление модулей mod_virtuemart_search и mod_ppc_font, был серьезно отредактирован модуль mod_mainmenu. Прежде всего, Joomla была «отучена» делать выбранным пункт меню при загрузке сайта, и, кроме того, была внесена модификация, снимающая гиперссылку и изменяющая курсор на выделенном пункте меню. Планировалась реализация пункта меню в виде ромбов, однако она была признана неудачной. Мы опубликуем описание модификации на нашем сайте позже.

Затем был практически полностью переписан стандартный модуль Virtuemart mod_product_categories. В оригинале, модуль служит для иерархического отображения дерева категорий товаров Virtuemart. При этом поддерживается вывод категорий товаров в порядке, указанном в админ. панели сайта.

Мы оставили эту часть исходного кода модуля, а затем создали еще 2 сортировки: по алфавиту и средам. Дополнительно было реализовано переключение между классификациями без перезагрузки страницы, выполненное с помощью стандартное компонента Joomla Jpane, широко применяющегося в админ. панели.

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

Установка порядка поддерживается для 2 из 3 вкладок модуля — по популярности и по алфавиту. Для улучшения юзабилити пользовательского интерфейса, для оформления заголовков и списка категорий были выбраны привычные цвета гиперссылок — синий и красный. Цвет гиперссылок и элементов управления меняется при наведении, что создает интерактивность интерфейса.

Следующей задачей было доработать Virtuemart таким образом, чтобы можно было реализовывать новую возможность — группировку категорий по средам, например, водоснабжение, отопление и т.д. Для этого была изменена база данных, написан компонент Joomla для создания списка систем и отредактирован интерфейс Virtuemart, который позволил отнести каждую категорию товаров к любому количеству систем.

Интерфейс администратора Virtuemart. Привязка категории к списку систем.

В дальнейшем на основании установленного перечня связей, автоматически строится список систем, который и выводится на вкладке «Системы» измененного модуля.

Ниже размещен информер онлайн-консультанта. Онлайн консультант был нами реализован в отдельном домене — online-support.com.ua, при помощи специализированного программного обеспечения. В ближайшее время, по указанному адресу будет создан сайт и онлайн-консультанты будут распространятся нами как сервис. В ближайшее время в нашем корпоративном блоге появится статья, описывающая технологическое решение.

Главной особенностью подхода нашего сервиса является возможность использовать в качестве рабочего места консультанта утилиты под управлением ОС MS Windows, и возможность обслуживания одним консультантом-человеком неограниченного количества сайтов.

Еще ниже слева размещен модуль тэгов для Virtuemart на базе JVClouds. О нем мы писали раньше, почитать можно здесь и здесь.

Центральная часть сайта — это область для вывода контента из компонентов. Особых правок в эту область не вносилось. Единственным нестандартным разработанным компонентом является com_receipts, привязанный к пункту меню «Выписать счет / Оформить заявку». Компонент, в зависимости от юридического статуса посетителя и указанных им настроек, позволяет генерировать произвольные счета на оплату по безналичному расчету либо размещение заявок для обратной связи с администрацией сайта. Основой компонента выступила наша более ранняя разработка printDraft.

Справа размещен еще один модуль, подвергшийся серьезной переработки. Построен он на базе mod_vendors — стандартного модуля из поставки Virtuemart для отображения продавцов / поизводителей в зависимости от настроек. Причем постановка задачи оговаривало то, что при щелчке на логотип вендора, должна открыться страничка с его описанием и всеми товарами вендора, представленными в магазине. Ниже показан модуль где это требование уже выполнено.

Для генерации списка товаров используется модифицированная страница shop.infopage, которая изначально отображает только информацию по вендору. Вывод информации о вендоре тоже сохранен, но размещен в самом конце страницы.

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

Далее, оригинальный механизм был вынесен во вкладку «Производители по популряности», а затем было добавлено еще 2 вкладки: «Производители по алфавиту» и «Производители по стране». И, на последнем этапе правок, была добавлена сортировка по всем трем критериям по возрастанию и убыванию с помощью разработанного ранее алгоритма. Дополнительно были разработаны JavaScript функции, отвечающие за реакцию логотипа при наведении на него курсора.

В октябре 2010 года был завершен третий этап правок сайта. Центральным его элементом была оптимизация быстродействия сайта, поскольку связка Joomla-Virtuemart ощутимо «подтормаживала»  на большом количестве товаров (сайт содержит их порядка 7,5 тыс.). Описание проведенных работ по оптимизации опубликовано тут. Описание остальных работ этапа будет опубликовано чуть позже.

Итого: несмотря на то, что сайт inen.ru использует стандартный вобщем-то движок на базе связки Joomla-Virtuemart и не использует большого количества крутящихся — переливающихся — подпрыгивающих модулей (чем страдает множество магазинов), сайт выглядит проработанным и интерактивным.