https://aurum.in.ua/ – ювелирный интернет-магазин с огромным ассортиментом. В базе представлено порядка 300 тысяч наименований. Компания продает изделия в сети и оффлайн-магазинах, сеть которых насчитывает 40+ торговых точек по Украине.
Цель – создать эффективную и многофункциональную электронную торговую площадку, которая будет полностью решать поставленные владельцем бизнеса задачи, способствовать продвижению бренда и повышению продаж.
Нынешний интернет-магазин – не первая попытка реализовать продажи в сети. В «Красный хамелеон» менеджеры компании KSD AURUM обратились с ресурсом на OpenCart. Однако он представлял собой простой каталог товаров и не соответствовал бизнес-целям заказчика. Площадка не позволяла посетителю купить товар онлайн. Кроме того, на сайте были:
После длительного выбора и переговоров обо всех деталях сотрудничества и будущего ресурса проект был отдан разработчикам «Красного хамелеона». Нам предстояло с нуля разработать масштабный и производительный интернет-магазин на Битрикс с функционалом корзины, оформления заказа. Важным условием было организовать удобную структуру и поиск, чтобы посетитель мог легко и быстро найти нужный товар и заказать его.
Для этого необходимо было реализовать ряд комплексных задач:
4 из 5
Перед началом верстки по PSD-макетам, предоставленным дизайнерами, разработчики «Красного хамелеона» составили перечень требований по шаблону для 1С: Битрикс.
После верстки код был протестирован на предмет ошибок и проблемных мест, которые могут помешать интеграции на CMS «Битрикс». Исправлены все ошибки консоли и выявленные в процессе разработки баги.
Шаблон адаптирован для десктопных и планшетных ПК, мобильных устройств.
После интеграции шаблона разработчики «Красного хамелеона» обеспечили интернет-магазин всем необходимым функционалом.
При наведении на кнопку «Каталог» появляется блок с основными категориями и другими ссылками каталога, а также элементом «Продукт дня» для каждого раздела. Блок редактируется из административной панели.
Добавлен «живой» поиск: после введения в поисковую строку трех символов предлагается 6 (для мобайл-версии – 5) товаров с фото, ценой и ховер-эффектом, подходящих под наиболее вероятные результаты.
Поиск работает по наименованию, внутреннему артикулу сайта, самого производителя, названию категории и подкатегории.
Добавлен функционал обратного звонка.
Разработаны функциональные кнопки «Избранное» и «Корзина». При наведении на иконки показывается список из трех товаров из соответствующего раздела, клик переводит на страницу в личном кабинете.
Регистрация и авторизация в личном кабинете происходит нажатием на иконку ЛК в шапке. Реализован функционал регистрации, удачной и неудавшейся авторизации, функция восстановления пароля.
При нажатии на «укр»/«рус» происходит автоматическая смена языка сайта. Открывается УРЛ аналогичной страницы соответствующей языковой версии.
Добавлен баннер-слайдер под шапкой. В админпанели можно настраивать блок, добавлять текст, изображения для десктопа и мобильной версии сайта.
Если пользователь уже был на сайте и что-то смотрел, добавлял товары в «Избранное» или «Корзину», ему выводится блок «Вы смотрели».
При нажатии на кнопку «Спросите эксперта» появляется форма отправки вопроса пользователя.
Реализован настраиваемый блок визуализации категорий.
Из админпанели можно добавлять и изменять фотографии разделов, заголовки, адрес для перехода при клике и очередность вывода.
Внедрен блок «Популярные ювелирные украшения» с хитами, новинками, товарами со скидкой и подарками.
Блок расположен на разных страницах сайта, и в зависимости от выбранной категории в нем выводятся соответствующие товары.
Блок «Подписка» состоит из трех частей:
В футер добавлены ссылки на основные категории каталога, адреса магазинов, контакты и форма подписки на рассылку.
Предусмотрена возможность редактирования области из административной панели (изображение, текст, ссылка).
Добавлены «хлебные крошки». Текущая страница отображается простым текстом, все родительские – ссылками.
Реализована логика блока «Преимущества и консультация». Если для категории заданы свои преимущества, они вытесняют с первых мест стандартный набор из 4, заданных по умолчанию. В админпанели можно добавлять и изменять текст преимуществ.
Разработаны основной и дополнительные фильтры каталога.
Для фильтрации добавлены категории и подкатегории, металл, проба, цена. Для последнего цены разбиты на диапазоны и реализован бегунок для выбора конкретных цифр.
Набор дополнительных фильтров по умолчанию свернут. При нажатии на кнопку «Еще фильтры» появляется блок с альтернативными параметрами для фильтрации.
Набор параметров соответствует характеристикам для конкретных категорий каталога интернет-магазина. Страница автоматически обновляется при выборе чекбокса.
Для мобайла фильтр по умолчанию скрыт и появляется при нажатии на кнопку «Подобрать».
Основные 4 характеристики раскрыты, остальные представляются списком.
После каждого выбора параметра активными остаются лишь те, товары с которыми есть в наличии, а также происходит пересчет, сколько товаров есть с таким набором параметров в наличии.
В основной выдаче каталога предусмотрена возможность выводить рекламный баннер вместо одной из карточек товара, указывать место вставки для каждой подкатегории.
При наведении на карточку товара на десктопе и клике на иконку просмотра на мобайле блок увеличивается, отображаются дополнительные параметры.
Интегрирована верстка карточки товаров в наличии и не в наличии.
«Хлебные крошки» на страницах товарных позиций реализованы с добавлениями названий разделов второго и третьего уровня и наименованием товара.
Добавлена возможность просмотреть изображения прямо в блоке с картинкой или в попапе, который появляется после клика на основное фото.
Реализован вывод основных характеристик разных типов товара в зависимости от принадлежности к конкретной категории.
Пример:
Для кольца -
Для колье -
Эти же характеристики выводятся в карточке товара в каталоге, на главной, странице блога с товарами и прочих, где есть карточка товара.
Вес изделия меняется автоматически при выборе конкретного размера украшения.
Блок цены и заказа. Реализован выбор размера с динамическим изменением стоимости.
«Купить» и «Избранное» добавляют товар в соответствующий список. При нажатии на «Купить в 1 клик» появляется модальное окно с формой для внесения телефонного номера для обратной связи.
Интегрирован функционал премодерируемых отзывов о товарах. Выводится количество и средняя оценка конкретного наименования.
Добавили блок «С этим товаром покупают», в который динамически подгружаются карточки товаров, которые заказывали вместе с просматриваемой позицией.
Для товаров, отсутствующих на складе, вместо кнопки «Купить» выводится «Сообщить о наличии». Форма с возможностью вписать телефон для уведомления.
Реализована фильтрация товаров по наличию фотографий. Если на сайт выгружены товары без фотографий:
При переходе пользователя в корзину на сайте меняется дизайн шапки. Отображаются: логотип, количество добавленных в корзину товаров, возможность добавить позиции из «Избранного», координаты для связи и переключатель языка.
При выводе товаров реализован оригинальный механизм: сначала появляется наиболее дешевое SKU из каталога на сайте. Например, если в перечне товаров есть кольца 17 размера, то первым в карточке товара выводится изделие наименьшего веса и, соответственно, стоимости.
Если в «Корзине» присутствует товар, которого нет в наличии на складе, появляется кнопка «Подобрать в наличии», которая ведет на подкатегорию с аналогичными товарами с учетом выбранных параметров: тип металла, цвет, проба, вставка.
При оформлении заказа рассчитывается общая сумма покупки. Если цена заказа:
Предусмотрен функционал расчета скидки при наличии промо-кода или дисконтной карты (вместо промо-кода вносится номер карточки). Код скидки – поле, куда клиент может ввести промо-код или номер своей дисконтной карты. При этом показывается процент и сумма скидки, а также пересчитывается стоимость заказа. Если код не найден в базе, выводится сообщение об ошибке.
Для доставки доступны способы: Новая Почта, Курьер по Киеву, Самовывоз из магазина. Для Новой почты отделения с адресами получаются по API. Если выбрана курьерская доставка, выбор города становится неактивным. Для самовывоза предлагаются города, в которых есть магазины заказчика и их адреса.
Реализована возможность предоплаты с банковской карты, после чего клиент получает СМС с номером заказа.
При подтверждении заказа добавлена опция «Распечатать». Выводится основная информация о покупке и доставке.
Предусмотрена возможность добавлять и менять категории для статей блога через административную область.
Ссылки с миниатюры анонса и кнопки «Читать полностью» реализованы в виде JavaScript.
В «хлебных крошках» отображаются ссылки на главную, блог и страницу категории.
Команда «Красного хамелеона» организовала корректный двусторонний обмен данными с 1С. Выгрузки неоднократно тестировались, чтобы выявить ошибки и вероятные проблемы, которые тут же исправлялись программистами.
Чтобы обеспечить корректную связь с базой данных товаров, специалисты «Красного хамелеона» консультировали и помогали программисту 1С компании заказчика. Работа длилась 3 месяца. В результате база была настроена так, чтобы выгрузки на сайт осуществлялись без ошибок и проблем.
Обеспечили обновление товаров на сайте после выгрузки: все новые позиции попадают в группу «Новинка» и получают соответствующие плашки. Товар считается новинкой в течение 30 дней после создания.
Проведена первичная внутренняя оптимизация сайта для успешного индексирования и продвижения в поисковых системах. Среди реализованных задач по SEO:
Примеры:
1) на странице выбраны два значения фильтра из различных категорий (такая страница индексируется);
2) на странице выбраны два параметра из одного фильтра (не индексируется);
3) выбраны 3 и более категорий фильтров (не индексируется).
Для учета статистики и ведения аналитики посещаемости сайта и конверсий установлен код Google Analytics.
Разработчики «Красного хамелеона» провели анализ кода для оптимизации скорости загрузки страниц. В результате исследования было обнаружено, что главная причина недостаточно быстрой работы ресурса – в обработке большого количества свойств (на сайте более 300 тысяч товарных предложений).
Среди решений для оптимизации предложено:
Решить проблему скорости загрузки сайта при таком количестве товаров и недостаточно мощном хостинге настройкой компонентов не удастся.
Для поддержания актуальности каталога товаров и снижения нагрузки на сервер написан скрипт, который удаляет все торговые предложения с нулевым остатком.
Разработка https://aurum.in.ua/ оказалась весьма трудоемкой и непростой задачей. Но мы успешно справились и:
Компания KSD AURUM продолжает сотрудничество с «Красным хамелеоном». Мы решаем возникающие по сайту задачи и доделываем необходимый заказчику функционал интернет-магазина.
Благодарим команду «Красного хамелеона» за большой комплекс работ по преобразованию нашего сайта aurum.in.ua. Мы получили полностью обновленный интернет-магазин: сменили CMS, сверстали новый оригинальный шаблон, обеспечили большие возможности для поиска и покупки товара, добавили удобные функции для администрирования сайта.
С менеджерами комфортно работать. Ребята умеют соблюдать договоренности и реагировать на просьбы и приоритеты заказчика.
Разработчики реализовали все наши задумки по проекту. Мы получили по-настоящему современный функциональный интернет-магазин, удовлетворяющий нашим требованиям и запросам наших клиентов.