Канистра

Автоцентр «Канистра» занимается продажей автозапчастей, автохимии, масла, авто аксессуаров и расходных материалов, сезонных товаров для отдыха, для рыбалки. В ассортименте магазина присутствует порядка 20 000 товарных позиций.

Задача

Задач было несколько, на фоне остальных можно выделить следующие:

— Создать лаконичный, легкий, современный дизайн сайта, который будет хорошо выглядеть на десктопе и на мобильных устройствах; — Организовать поиск на сайте, добавить понятные фильтры по категориям товаров; — Добавить возможность онлайн оплаты на сайте; — Написать скрипт для выгрузки каталога на Яндекс.Маркет, для увеличения объема продаж.

Техническое задание

Реализацию проекта начали с написания Технического задания. По ТЗ были накиданы первые прототипы страниц сайта.

Прототипы

В магазине Канистра присутствует более 100 товарных категорий. Наша первоочередная задача определить локомотивные направления компании. После анализа и выявления основных категорий делаем наброски главной страницы.

Дизайн

Требования к дизайну были довольно простыми: лаконичность, минимализм, один активный цвет – красный. Чтобы сориентировать пользователей на сайте, среди множества товарных категорий на передний план выведен поиск. Он предложит разные варианты товаров, которые есть в наличии.

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

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

Каталог

Мы создали привычный для пользователя интерфейс: сортировки, фильтры, товары плиточками.

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

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

В карточке товара, также есть возможность выбрать другие варианты упаковки и размеров:

Синхронизация с 1С

Между сайтом и 1С реализовано 2 вида синхронизации: по товарам и заказам

— Синхронизация по товарам, версия 1 Синхронизацию, по просьбе клиента, настроили таким образом, чтобы товары выгружались из 1С раз в сутки. Все 20 000 товаров. При этом, на сайте должны показываться лишь товары, которые находятся в наличии. В результате, синхронизация происходила порядка 7ми часов по времени. Товары, которых нет в наличии выгружались на сайт, и мы их принудительно скрывали. Факап: излишняя функциональность, длительная синхронизация. — Синхронизация по товарам, версия 2 На втором релизе перенастроили саму выгрузку из 1С, теперь она передает только необходимые товары. Как результат: синхронизация происходит быстрее, сайт работает быстрее, потому что не проверяет каждый товар на наличие. — Синхронизация по заказам Реализован обмен заказами с 1С. При создании нового заказа на сайте – заказ записывается в базу данных, с определенным интервалом заказы с сайта подгружаются в базу 1С. В свою очередь при изменении статусов в 1С информация передается на сайт и отправляются e-mail уведомления об изменении статусов клиентам.

Адаптивность

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

Ускорение

"При разработке интернет-магазина "Канистра" мы столкнулись с тем, что некоторые категории каталога загружались более 20 секунд. Надо отметить, что сам магазин довольно большой, его ассортимент насчитывает около 20 000 товаров. Для увеличения скорости загрузки каталога мы провели исследование скорости работы кода php и базы данных, а затем провели их оптимизацию. Это дало свои результаты и теперь среднее время загрузки страницы каталога в среднем - 1,5 секунды, чем очень доволен наш заказчик."

Антон Банников

Back-end разработчик

Что мы сделали?

Для увеличения скорости загрузки каталога мы провели исследование скорости работы кода php и базы данных, а затем провели их оптимизацию:

— Мы замеряли скорость генерации страниц каталога и выявили наиболее тормозящие блоки. Ими оказались фильтры товаров; — Мы замерили скорость генерации каждой категории каталога и их структуру. Выяснилось, что товары разбиты по категориям неэффективно. Например, присутствовала категория из 3000 товаров, только 10 из которых можно было отфильтровать по указанным параметрам, а для других товаров фильтров не было. При этом загрузка страницы шла около 20 секунд. На этом шаге мы разбили самые большие категории на подкатегории и убрали в них ненужные и несущественные фильтры; — Мы сделали серверное кэширование сайдбара - блока со всеми фильтрами. Проблема заключалась в том, что сайдбар постоянно меняется. Он - разный в каждой категории, и при каждом сочетании свойств товара меняется (скрываются лишние пункты). После оптимизации сайдбар генерируется только для первого пользователя. Второй пользователь видит кешированную версию, которая загружается 1-2 секунды; — Мы изменили логику импорта товаров из 1С (а заказчик логику экспорта на сайт), чтобы на сайте появлялись только те товары, что есть в наличии. Прежде администратор мог выбрать какие товары показывать, а какие скрывать в каталоге. Это излишний функционал, от которого заказчик легко отказался.

Мнение клиента!!!

"Обратились к компании студия "Флаг" для разработки нового интернет магазина по продаже автоаксессуаров и автозапчастей, так как наш старый сайт сильно устарел. Плюсы нового сайта: - стильный дизайн; - автоматическое обновление товара; - удобный поиск с подсказками; - удобный фильтр товара." Весь отзыв на Фламп

Андрей Солоницын

Интернет-магазин «Канистра»

Результат

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