Интернет-магазин «Серый Лис»
О проекте
«Серый Лис» — сеть магазинов, которая занимается продажей широкого ассортимента товаров: одежда / обувь, аксессуары, бытовая техника, товары для детей и многое другое. У компании возникла потребность в создании интернет-магазина, поэтому они обратились к нам.
Учитывая поставленные задачи и большое количество товаров (около 50 000 шт.) было принято решение использовать наиболее подходящий движок — CMS Битрикс. Webnauts является официальным партнёром сервиса и обладает большим опытом в разработке сайтов на этой системе управления.
Дизайн
По желанию заказчика мы использовали комбинацию бирюзового и белого цветов. Бирюзовый помогает расставить необходимые акценты, от верхнего меню и подвала сайта до кнопок и интерфейсных надписей. Белый цвет выбран чтобы не отвлекать внимание посетителя от фотографий и описаний товара.
Первый экран встречает нас ярким набором баннеров, которые рассказывают посетителю о текущих скидках. Подобные баннеры используются и в рамках определённой категории товаров, вместе с фильтрами помогая посетителю ориентироваться в каталоге.
Карточка товара сочетает лаконичность с информативностью: на одной странице помещается достаточно важной информации, при этом нет ощущения перегруженности.
Большую часть экрана занимает фотография товара, под которой находится его описание и отзывы. Справа размещен блок с ценой, основными характеристиками и приблизительным количеством на складе (помогает оценить насколько стоит поспешить с покупкой). Здесь же немного ниже находятся рекомендуемые товары, которые помогут увеличить средний чек.
Для некоторых позиций реализована функция «Торговое предложение», которая позволяет выбирать разновидности одного и того же товара. Например, если клиент выбирает туфли, то он может выбрать их размер непосредственно в карточке товара.
Каталог товаров
Так как общее количество позиций в магазине достигает практически 50 000 штук, необходимо помочь покупателю найти нужный ему товар. Для этого был разработан многоуровневый каталог с продуманной системой фильтрации и динамическими разделами.
Например, при переходе в раздел «Бытовая техника» сразу после баннеров отображается раздел «Новинки». Алгоритм заносит сюда последние товары, ориентируясь на дату загрузки позиции на сайт. Менеджеру не нужно указывать особое свойство, процессы происходят полностью автоматически.
Под новинками расположен раздел «Акции». Сюда товар попадает уже по наличию заполненного свойства скидки.
Кстати, на сайте есть отдельный раздел со всеми акционными товарами. Написанный нами скрипт получает свежие данные из 1С каждую ночь, обновляя содержимое этой категории. Для быстрой навигации слева расположена фильтрация по разделам.
Интеграция с 1С
При разработке «Серого Лиса» перед нами была поставлена следующая задача: при оформлении заказов у менеджеров должна остаться возможность работать исключительно с 1С, не производя никаких действий в админке сайта. Следовательно, было нужно настроить интеграцию с 1С.
Первоначально много времени занял импорт товаров из 1С в Битрикс. Хотя на сайте отображаются только те товары, которые на данный момент в наличии, импортировать пришлось все 50 000 позиций. Такой перенос данных занимает много времени, поэтому мы оптимизировали процесс таким образом, чтобы минимально нагружать сервера.
Важной задачей был правильный импорт товаров одного типа, но с разными цветами и размерами. Как уже упоминалось, в Битриксе эта функциональность реализована через «Торговое предложение». Однако мы наладили правильный процесс объединения при первоначальном переносе и дальнейшей синхронизации.
Сейчас все заказы с сайта отправляются в напрямую 1С, откуда менеджеры могут управлять процессом оформления товара. Любые изменения в 1С также будут отображены на сайте: от новых цен до наличия товара на складе.
Как происходит процесс покупки
Покупка в интернет-магазине всегда сопровождается регистрацией. Регистрация и авторизация происходит через телефон, по одноразовому паролю. Но при желании для авторизации можно использовать классические логин/пароль — форма авторизации позволяет ввести оба типа данных.
«Серый Лис» предлагает своим клиентам дисконтную программу с накопительной скидкой, размер которой определяется при авторизации пользователя. Размер скидки отображается в корзине персонально для каждого товара.
Более подробно эту систему мы уже описывали в нашем кейсе.
Форма оформления заказа была настроена нами под локальную специфику: указаны два вида доставки курьером и два адреса для самовывоза. При заказе от 1000 рублей доставка курьером бесплатная, что и отражается в интерфейсе.
Для возможности оплатой картой подключён интернет-эквайринг от Сбербанка. После оплаты покупатель будет получать смс о каждом изменении статуса заказа: от подтверждения оплаты до выезда курьера для доставки.
Адаптивность
С каждым годом на мобильных устройствах растёт не только посещаемость сайтов, но и количество заказов товаров и услуг. В некоторых случаях интернет-магазины должны быть даже больше ориентированы на удобное управление со смартфонов, чем на десктопах. В случае с «Серым Лисом» сайт работает одинаково превосходно на всех девайсах. Нам не пришлось отказываться от работы некоторых элементов на планшетах и смартфонах: вся функциональность поддерживается, а блоки интерфейса аккуратно перестраиваются под диагональ экрана.
Итоги
При разработке интернет-магазина нам удалось решить все поставленные задачи. Дизайн был разработан с учётом всех пожеланий заказчика, импортирован внушительный каталог товаров, настроены различные сценарии при оформлении заказа. Импорт с 1С позволяет ежедневно обновлять сведения о товарах, а менеджерам работать в привычном для себя интерфейсе. Сайт полностью адаптивен и отлично работает на всех размерах экрана.
Посмотреть на результат можете здесь — Серый Лис.
Комментарии