Web-агентство Red Chameleon
+38 095 520-30-05 hello@redchameleon.com.ua EnUaRu
Заказать обратный звонок
О нас
  • Отзывы
  • Партнеры
  • Наши клиенты
  • Вакансии
Портфолио
Создание сайтов
  • Создание интернет-магазина
  • Разработка интернет-магазина на PrestaShop
  • Разработка сайтов на Laravel
  • Создание сайта на Wordpress
  • Разработка сайтов на YII2
  • Разработка сайтов на Symfony
Поддержка сайта
  • Доработка сайта
Контакты
Блог
Ещё
    +38 095 520-30-05 hello@redchameleon.com.ua EnUaRu
    • О нас
      • Назад
      • Отзывы
        • Партнеры
          • Наши клиенты
            • Вакансии
            • Портфолио
            • Создание сайтов
              • Назад
              • Создание интернет-магазина
                • Разработка интернет-магазина на PrestaShop
                  • Разработка сайтов на Laravel
                    • Создание сайта на Wordpress
                      • Разработка сайтов на YII2
                        • Разработка сайтов на Symfony
                        • Поддержка сайта
                          • Назад
                          • Доработка сайта
                          • Контакты
                          • Блог
                          • Веб-студия
                          • Проекты
                          • Разработка и поддержка ювелирного интернет-магазина «Aurum»

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

                          Aurum-case

                          О проекте

                          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 продолжает сотрудничество с «Красным хамелеоном». Мы решаем возникающие по сайту задачи и доделываем необходимый заказчику функционал интернет-магазина.


                          Отзыв клиента
                          Отзыв Александра Базалукова
                          Отзыв Александра Базалукова
                          Директор e-commerce

                          Благодарим команду «Красного хамелеона» за большой комплекс работ по преобразованию нашего сайта aurum.in.ua. Мы получили полностью обновленный интернет-магазин: сменили CMS, сверстали новый оригинальный шаблон, обеспечили большие возможности для поиска и покупки товара, добавили удобные функции для администрирования сайта.

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

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



                          Давайте обсудим ваш проект
                          Оставьте заявку, и мы свяжемся с вами

                          Сайт защищен reCAPTCHA, используются
                          Политика конфиденциальности и Условия пользования Google.

                          О веб-студии
                          Портфолио
                          Вакансии
                          Контакты
                          Блог
                          Создание сайтов
                          Разработка сайтов на Laravel
                          Разработка сайтов на Symfony
                          Разработка сайтов на YII2
                          Создание сайта на WordPress
                          Разработка интернет-магазинов
                          Создание интернет-магазина на Prestashop
                          Разработка b2b-сайтов и порталов
                          Разработка личного кабинета
                          Поддержка сайтов
                          Доработка сайтов
                          Перенос сайтов с Битрикс на другую платформу
                          Синхронизация с ERP-системами

                          Карта сайта
                          Оплата и расчеты
                          Гарантии
                          Наши контакты


                          +38 (095) 520-30-05
                          hello@redchameleon.com.ua
                          Украина, г. Киев, ул. Беломорская, д. 1А
                          • Facebook
                          • Telegram
                          • Viber
                          • WhatsApp
                          WEB-агентство Красный Хамелеон
                          WEB-агентство Красный Хамелеон. Разработка, поддержка, продвижение сайтов и интернет-магазинов
                          в Украине (Киев, Харьков, Одесса, Днепр, Львов) и других странах.
                          © 2013-2022, Красный хамелеон.