Amber Sea —
интернет-магазин изделий из янтаря

Новый дизайн без повреждения кода платформы

Amber Sea — бренд, который каждый день создает изысканные украшения, сувениры и предметы декора. В умелых руках мастеров янтарь превращается в роскошные картины и эксклюзивные произведения ювелирного искусства. Сырье для будущих изделий поставляется из АО «Калининградский янтарный комбинат» — единственного в мире предприятия, где в промышленных масштабах добывают янтарь. Камень обрабатывается вручную — так рождаются изделия высочайшего качества и оригинального внешнего вида.

Проблема клиента и задачи

Интернет-магазин Amber Sea работал на платформе CS-Cart версии 4.8. Некоторое время назад клиент решил обновить внешний вид сайта. С макетами страниц он обратился к подрядчику, который изменил дизайн через файлы ядра платформы. Для CS-Cart это недопустимо: контроллеры, функции, шаблоны, структуру базы данных и другие элементы рекомендуется изменять с помощью модулей. Внесение изменений в ядро может привести к конфликтам при будущих обновлениях. Так и произошло: при обновлении магазина до версии 4.9. разметка страниц «уехала», шаблоны темы перестали работать, внешний вид интернет-магазина был испорчен.

Обновление версии до 4.10.2
Редизайн
Доработка функциональности
Работа над юзабилити чекаута

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

Чтобы избежать возможных ошибок в процессе работы, мы сразу обновили магазин до версии CS-Cart 4.10.2 (последней на тот момент).

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

Товар и категории

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

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

Мы доработали разделы «Избранное» и «Сравнение товаров»: количество выбранных товаров подгружается с помощью ajax и отображается возле соответствующих иконок.

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

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

Корзина

Кастомизировали корзину: отображается не только дефолтная информация, но и размер скидки в процентах и количество бонусных баллов. Это позволяет покупателю лучше ориентироваться в ценообразовании интернет-магазина.

Оформление заказа

До версии 4.9 система оформления заказа в CS-Cart состояла из четырех шагов. Такой чекаут требовал немало времени на выполнение, поэтому его упрощение и оптимизация значительно бы увеличили конверсию. После обновления до версии 4.10.2 чекаут стал одностраничным, но мы не остановились на этом и доработали его. Мы сделали правый блок «ползающим», чего нет в дефолте, добавили наш модуль «Физические и юридические лица», который позволяет создавать разные аккаунты отдельно для физических и юридических лиц. Блоки регистрации и чекаута меняются в зависимости от выбранного варианта.

Личный кабинет покупателя

Внешний вид любой страницы в CS-Cart можно менять через редактор макетов: достаточно поработать с блоками. Тот личный кабинет, который хотел получить клиент, так сильно отличался от дефолтного, что невозможно было привести его к макету, просто настраивая блоки. Мы сверстали личный кабинет с нуля по желаниям клиента, не привязываясь к стандартному виду CS-Cart.

Для удобства покупателей вся информация личного кабинета разделена на 5 вкладок.

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