Добработки и создание адаптивного дизайна для интернет-магазина Mandarishka.by

Заказчик обратился с уже готовым интернет-магазином, сделанным на Joomla и Virtuemart.

Первоначально сайт находился в плачевном состоянии:

• Устаревшие Joomla 2.5 и Virtuemart
• Большое количество коммерческих расширений, которые давно не обновлялись
• Отсутствие фильтрации на сайте
• Сайтом практически невозможно было пользоваться на мобильных устройствах

Работа над сайтом проходила в несколько этапов

Первый этап. Аудит расширений

На первом этапе был проведен аудит всех расширений, установленных на сайте. Заказчику была предоставлена сводная таблица расширений, с указанием таких параметров, как:

• Название расширения Joomla
• Описание расширения Joomla (для чего должно использоваться)
• Платное/бесплатное расширение
• Необходимость применения расширения на сайте
• Необходимость и стоимость обновления расширения

После детального анализа таблицы, выяснилось, что ~60% сторонних расширений Joomla, установленных на сайте, не используются. Некоторые из них были платными, и практически все требовали обновления.

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

Второй этап. Переход на Joomla 3 + Virtuemart 3

На втором этапе интернет-магазин был обновлен до Joomla 3 и Virtuemart 3. Были внесены правки в шаблон, которые потребовались после обновления.

Все оставшиеся на сайте расширения также были обновлены до последних версий.

Третий этап. Переработка меню каталога товаров

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

После окончания работ по данному этапу каталог товаров открывается в два уровня по клику. Это работает как для больших мониторов, так и для мобильных устройств.

Четвертый этап. Создания фильтра по параметрам товаров

На данном этапе был установлен, настроен и оформлен фильтр по параметрам Custom Filters Pro.

Оформление фильтра вы можете видеть на рисунке ниже:

Пятый этап. Создание адаптивной версии сайта для мобильных устройств

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

Если вы хотите лучше понять, о чем идет речь, посмотрите на эту картинку:

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

Для мобильных устройств дизайнером было разработано отдельное оформление. Моей задачей было внедрить его на сайт таким образом, чтобы сохранить оригинальный дизайн для больших экранов.

Соответственно,  для одних и тех же макетов требовалось создать 2 совершенно разных стиля оформления средствами только стилизации CSS.

Чтобы лучше понимать, о чем я говорю, сравните, к примеру шапку для большого экрана и для маленького:

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

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