Разработка и поддержка ювелирного интернет-магазина «Aurum»

О проекте

https://aurum.in.ua/ – ювелирный интернет-магазин с огромным ассортиментом. В базе представлено порядка 300 тысяч наименований. Компания продает изделия в сети и оффлайн-магазинах, сеть которых насчитывает 40+ торговых точек по Украине.

Цель – создать эффективную и многофункциональную электронную торговую площадку, которая будет полностью решать поставленные владельцем бизнеса задачи, способствовать продвижению бренда и повышению продаж.

Точка старта

Нынешний интернет-магазин – не первая попытка реализовать продажи в сети. В «Красный хамелеон» менеджеры компании KSD AURUM обратились с ресурсом на OpenCart. Однако он представлял собой простой каталог товаров и не соответствовал бизнес-целям заказчика. Площадка не позволяла посетителю купить товар онлайн. Кроме того, на сайте были:

• изрядно устаревший дизайн;
• большое количество ошибок;
• проблемы с SEO.

После длительного выбора и переговоров обо всех деталях сотрудничества и будущего ресурса проект был отдан разработчикам «Красного хамелеона». Нам предстояло с нуля разработать масштабный и производительный интернет-магазин на Битрикс с функционалом корзины, оформления заказа. Важным условием было организовать удобную структуру и поиск, чтобы посетитель мог легко и быстро найти нужный товар и заказать его.

Поставленные задачи

Для этого необходимо было реализовать ряд комплексных задач:

• Произвести верстку уникального шаблона по макетам, разработанным внешними дизайнерами, привлеченными на проект заказчиком.
• Разработать весь необходимый интернет-магазину ювелирных изделий функционал.
• Обеспечить бесперебойную интеграцию с 1С.
• Провести работы по первичной внутренней оптимизации сайта для поискового продвижения.

Сложность

4 из 5

Что было сделано

Верстка

Перед началом верстки по PSD-макетам, предоставленным дизайнерами, разработчики «Красного хамелеона» составили перечень требований по шаблону для 1С: Битрикс.

После верстки код был протестирован на предмет ошибок и проблемных мест, которые могут помешать интеграции на CMS «Битрикс». Исправлены все ошибки консоли и выявленные в процессе разработки баги.

Шаблон адаптирован для десктопных и планшетных ПК, мобильных устройств.

Разработка

После интеграции шаблона разработчики «Красного хамелеона» обеспечили интернет-магазин всем необходимым функционалом.

Главная

При наведении на кнопку «Каталог» появляется блок с основными категориями и другими ссылками каталога, а также элементом «Продукт дня» для каждого раздела. Блок редактируется из административной панели.

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

Поиск работает по наименованию, внутреннему артикулу сайта, самого производителя, названию категории и подкатегории.

Добавлен функционал обратного звонка.

Разработаны функциональные кнопки «Избранное» и «Корзина». При наведении на иконки показывается список из трех товаров из соответствующего раздела, клик переводит на страницу в личном кабинете.

Регистрация и авторизация в личном кабинете происходит нажатием на иконку ЛК в шапке. Реализован функционал регистрации, удачной и неудавшейся авторизации, функция восстановления пароля.

При нажатии на «укр»/«рус» происходит автоматическая смена языка сайта. Открывается УРЛ аналогичной страницы соответствующей языковой версии.

Добавлен баннер-слайдер под шапкой. В админпанели можно настраивать блок, добавлять текст, изображения для десктопа и мобильной версии сайта.

Если пользователь уже был на сайте и что-то смотрел, добавлял товары в «Избранное» или «Корзину», ему выводится блок «Вы смотрели».

При нажатии на кнопку «Спросите эксперта» появляется форма отправки вопроса пользователя.

Реализован настраиваемый блок визуализации категорий.

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

Внедрен блок «Популярные ювелирные украшения» с хитами, новинками, товарами со скидкой и подарками.

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

Блок «Подписка» состоит из трех частей:

• форма подписки на рассылку;
• виджет Facebook;
• ссылки на Instagram и YouTube.

В футер добавлены ссылки на основные категории каталога, адреса магазинов, контакты и форма подписки на рассылку.

Предусмотрена возможность редактирования области из административной панели (изображение, текст, ссылка).

Интеграция каталога

Добавлены «хлебные крошки». Текущая страница отображается простым текстом, все родительские – ссылками.

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

Разработаны основной и дополнительные фильтры каталога.

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

Набор дополнительных фильтров по умолчанию свернут. При нажатии на кнопку «Еще фильтры» появляется блок с альтернативными параметрами для фильтрации.

Набор параметров соответствует характеристикам для конкретных категорий каталога интернет-магазина. Страница автоматически обновляется при выборе чекбокса.

Для мобайла фильтр по умолчанию скрыт и появляется при нажатии на кнопку «Подобрать».

Основные 4 характеристики раскрыты, остальные представляются списком.

После каждого выбора параметра активными остаются лишь те, товары с которыми есть в наличии, а также происходит пересчет, сколько товаров есть с таким набором параметров в наличии.

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

При наведении на карточку товара на десктопе и клике на иконку просмотра на мобайле блок увеличивается, отображаются дополнительные параметры.

 

Товары

Интегрирована верстка карточки товаров в наличии и не в наличии.

«Хлебные крошки» на страницах товарных позиций реализованы с добавлениями названий разделов второго и третьего уровня и наименованием товара.

Добавлена возможность просмотреть изображения прямо в блоке с картинкой или в попапе, который появляется после клика на основное фото.

Реализован вывод основных характеристик разных типов товара в зависимости от принадлежности к конкретной категории.

Пример:

Для кольца - 

Для колье - 

Эти же характеристики выводятся в карточке товара в каталоге, на главной, странице блога с товарами и прочих, где есть карточка товара.

Вес изделия меняется автоматически при выборе конкретного размера украшения.

Блок цены и заказа. Реализован выбор размера с динамическим изменением стоимости.

«Купить» и «Избранное» добавляют товар в соответствующий список. При нажатии на «Купить в 1 клик» появляется модальное окно с формой для внесения телефонного номера для обратной связи.

Интегрирован функционал премодерируемых отзывов о товарах. Выводится количество и средняя оценка конкретного наименования.

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

Для товаров, отсутствующих на складе, вместо кнопки «Купить» выводится «Сообщить о наличии». Форма с возможностью вписать телефон для уведомления.

Реализована фильтрация товаров по наличию фотографий. Если на сайт выгружены товары без фотографий:

• они не выводятся в каталоге и визуальных блоках;
• индексируются и доступны при переходе из поисковой выдачи (добавляются в XML-карту сайта).

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

При выводе товаров реализован оригинальный механизм: сначала появляется наиболее дешевое SKU из каталога на сайте. Например, если в перечне товаров есть кольца 17 размера, то первым в карточке товара выводится изделие наименьшего веса и, соответственно, стоимости.

Корзина и заказ

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

При оформлении заказа рассчитывается общая сумма покупки. Если цена заказа:

• до 5000 грн – доставка указывается «По тарифам перевозчика»;
• больше – доставляется бесплатно.

Предусмотрен функционал расчета скидки при наличии промо-кода или дисконтной карты (вместо промо-кода вносится номер карточки). Код скидки – поле, куда клиент может ввести промо-код или номер своей дисконтной карты. При этом показывается процент и сумма скидки, а также пересчитывается стоимость заказа. Если код не найден в базе, выводится сообщение об ошибке.

Для доставки доступны способы: Новая Почта, Курьер по Киеву, Самовывоз из магазина. Для Новой почты отделения с адресами получаются по API. Если выбрана курьерская доставка, выбор города становится неактивным. Для самовывоза предлагаются города, в которых есть магазины заказчика и их адреса.

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

При подтверждении заказа добавлена опция «Распечатать». Выводится основная информация о покупке и доставке.

Блог

Предусмотрена возможность добавлять и менять категории для статей блога через административную область.

Ссылки с миниатюры анонса и кнопки «Читать полностью» реализованы в виде JavaScript.

В «хлебных крошках» отображаются ссылки на главную, блог и страницу категории.

1C

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

Чтобы обеспечить корректную связь с базой данных товаров, специалисты «Красного хамелеона» консультировали и помогали программисту 1С компании заказчика. Работа длилась 3 месяца. В результате база была настроена так, чтобы выгрузки на сайт осуществлялись без ошибок и проблем.

Обеспечили обновление товаров на сайте после выгрузки: все новые позиции попадают в группу «Новинка» и получают соответствующие плашки. Товар считается новинкой в течение 30 дней после создания.

SEO

Проведена первичная внутренняя оптимизация сайта для успешного индексирования и продвижения в поисковых системах. Среди реализованных задач по SEO:

• Настроены понятные УРЛы (ЧПУ) – читаемые адреса страниц сайта. Пример: /catalog/product/zolotye-sergi-s-sapfirami-i-brilliantami-s2471b/.
• На всех страницах сгенерирован тег rel="canonical", в котором указывается основная каноническая страница.
• Перенастроен файл robots.txt, согласно рекомендациям SEO-специалистов.
• На страницах пагинации налажена генерация тегов, запрещающих индексацию страницы <meta name="robots" content="noindex,follow"/>, а также rel=«next» и rel=«prev».
• Настроена индексация фильтров: из одной категории только один параметр, максимум 2 категории. Остальное варианты поиска и фильтрации закрыты от индексации. Предусмотрена возможность открывать нужные варианты при необходимости. Например, золотые кольца с бриллиантом 585 пробы.

Примеры:
1) на странице выбраны два значения фильтра из различных категорий (такая страница индексируется);

2) на странице выбраны два параметра из одного фильтра (не индексируется);

3) выбраны 3 и более категорий фильтров (не индексируется).

• Сгенерированы теги rel="alternate" hreflang="x", где указана страница альтернативного языка.
• Внедрена микроразметка для таких элементов: контактная информация, «хлебные крошки», подразделы, карточка товара.

Для учета статистики и ведения аналитики посещаемости сайта и конверсий установлен код Google Analytics.

Скорость загрузки

Разработчики «Красного хамелеона» провели анализ кода для оптимизации скорости загрузки страниц. В результате исследования было обнаружено, что главная причина недостаточно быстрой работы ресурса – в обработке большого количества свойств (на сайте более 300 тысяч товарных предложений).

Среди решений для оптимизации предложено:

• убрать мусор (лишние свойства) и рекомендовать клиенту не загружать на сервер лишнее из 1С (с пустой или ненужной информацией);
• увеличить возможности сервера, доведя их хотя бы до эталонных для Битрикс.

Решить проблему скорости загрузки сайта при таком количестве товаров и недостаточно мощном хостинге настройкой компонентов не удастся.

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

Выводы

Разработка https://aurum.in.ua/ оказалась весьма трудоемкой и непростой задачей. Но мы успешно справились и:

• обеспечили сайт уникальным шаблоном, работающим без ошибок;
• реализовали сложный функционал (кастомные вертикальные фильтры, персональное решение для оформления заказа, индивидуализированная интеграция с 1С);
• провели мероприятия по оптимизации ресурса под требования поисковых систем.

Компания KSD AURUM продолжает сотрудничество с «Красным хамелеоном». Мы решаем возникающие по сайту задачи и доделываем необходимый заказчику функционал интернет-магазина.