Mobile development

Mobile Version for Online Shop Orgazm.by

I redesigned and developed a mobile version for an online sexshop on OpenCart
Mobile Version for Online Shop Orgazm.by

Tools are being used in this project

BOOTSTRAP

Верстка выполнена на основе Bootstrapa

WEBPACK

Использовался для более удобной работы, контроля версий и сборки

jQuery

Использовался для интерактивных элементов (например, меню)

OpenCart (old)

Для полноценной оптимизации вносился код в бэкэнд часть сайта

Photoshop

Для создания макета и работы с изображениями

Gallery

Few words about the project

Ужасный с точки зрения разработчика кейс - исправить чужой код. Во-первых, использовалась абсолютно устаревшая версия OpenCarta 1.5. Во-вторых, в эту и без того неактуальную CMS был внесен неподдерживаемый кривой говнокод. В результате чего большая часть работы сводилась к разбору и пониманию существующего кода.?

Бэкэнд?

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

В точке входа я прописал определение юзер-агента с помощью библиотеки mobile_detect и далее в контроллерах сделал разделение на десктоп и мобильную версию соответственно. Таким образом уже в контроллерах мы грузили только те данные, которые были действительно необходимы. А после этого view брался полностью отдельный, потому что править существующий код было невозможно и нецелесообразно.?

Фронтэнд?

Поскольку view был полностью отделен, это позволило мне сверстать шаблон с нуля. Были сделаны все страницы и это потребовало намного больше времени, но в результате дало свой результат.?

Было сделано slide-меню, карусель с категориями и прочие удобные для мобильных девайсов элементы.

Новое боковое меню
Слайдер подкатегорий

Отмечу и такой момент: на сайте есть блок с категориями, у которых есть небольшик иконки...?

Слева категории имеют свои иконки...

Так вот эти иконки - это отдельные картинки. И вот так + 35 лишних запросов. Для мобильной версии я склеил эти иконки в одну и разделил бэкграундом.

В итоге показатель Google PageSpeed был изменен с 26 до 76 баллов.

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

Страница оформления заказа в десктоп версии