https://aurum.in.ua/ – ювелірний інтернет-магазин із величезним асортиментом. У базі представлено близько 300 тисяч найменувань. Компанія продає вироби в мережі та офлайн-магазинах, мережа яких налічує 40+ торгових точок по Україні.
Мета – створити ефективний та багатофункціональний електронний торговий майданчик, який повністю вирішуватиме поставлені власником бізнесу завдання, сприятиме просуванню бренду та підвищенню продажів.
Нинішній інтернет-магазин – це не перша спроба реалізувати продажі в мережі. До «Червоного хамелеону» менеджери компанії KSD AURUM звернулися з ресурсом на OpenCart. Однак він був простим каталогом товарів і не відповідав бізнес-цілям замовника. Майданчик не дозволяв відвідувачеві купити товар онлайн. Крім того, на сайті були:
Після тривалого вибору та переговорів про всі деталі співпраці та майбутнього ресурсу проєкт було віддано розробникам «Червоного хамелеону». Нам потрібно було з нуля розробити масштабний та продуктивний інтернет-магазин на Бітрікс з функціоналом кошика, оформлення замовлення. Важливою умовою було організувати зручну структуру та пошук, щоб відвідувач міг легко та швидко знайти потрібний товар та замовити його.
Для цього необхідно було реалізувати низку комплексних завдань:
4 из 5
Перед початком верстки за PSD-макетами, наданими дизайнерами, розробники «Червоного хамелеону» склали перелік вимог щодо шаблону для 1С: Бітрікс.
Після верстки код був протестований на предмет помилок та проблемних місць, які можуть стати на заваді інтеграції на CMS «Бітрікс». Виправлені всі помилки консолі та виявлені в процесі розробки баги.
Шаблон адаптований для десктопних та планшетних ПК, мобільних пристроїв.
Після інтеграції шаблону розробники «Червоного хамелеону» забезпечили інтернет-магазин усім необхідним функціоналом.
При наведенні на кнопку "Каталог" з'являється блок з основними категоріями та іншими посиланнями каталогу, а також елементом "Продукт дня" для кожного розділу. Блок редагується з адміністративної панелі.
Доданий «живий» пошук: після введення в пошуковий рядок трьох символів пропонується 6 (для мобільної версії – 5) товарів з фото, ціною та ховер-ефектом, що ймовірно відповідають запиту користувача.
Пошук працює за найменуванням, внутрішнім артикулом сайту, самого виробника, назвою категорії та підкатегорії.
Доданий функціонал зворотного дзвінка.
Розроблено функціональні кнопки «Вибране» та «Кошик». При наведенні на іконки відображається список трьох товарів з відповідного розділу, клік переводить на сторінку в особистому кабінеті.
Натиснувши на іконку(кнопку) “OK” у верхній панелі сайту є можливість авторизуватися чи зареєструватися на сайті. Реалізовано функціонал реєстрації, вдалої та невдалої авторизації, функція відновлення пароля.
При натисканні на “укр/рус” відбувається автоматична зміна мови сайту. Відкривається URL-адреса аналогічної сторінки відповідної мовної версії.
Додано банер-слайдер під шапкою. В адмінпанелі можна налаштовувати блок, додавати текст, зображення для робочого столу та мобільної версії сайту.
Якщо користувач вже був на сайті і щось дивився, додавав товари до «Вибраного» або «Кошик», йому виводиться блок «Ви дивилися».
При натисканні на кнопку «Запитайте експерта» з'являється форма надсилання запитання користувача.
Реалізовано блок візуалізації категорій, що налаштовується.
З адмінпанелі можна додавати та змінювати фотографії розділів, заголовки, адресу для переходу при кліку та черговість виводу.
Впроваджено блок «Популярні ювелірні прикраси» з хітами, новинками, товарами зі знижкою та подарунками.
Блок розташований на різних сторінках сайту, та в залежності від обраної категорії в ньому виводяться відповідні товари.
Блок «Підписка» складається із трьох частин:
У нижній секції (футері) додані посилання на основні категорії каталогу, адреси магазинів, контакти та форма підписки на розсилку.
Передбачено редагування області з адміністративної панелі (зображення, текст, посилання).
Додані «хлібні крихти». Поточна сторінка відображається простим текстом, всі батьківські – посиланнями.
Реалізовано логіку блоку «Переваги та консультація». Якщо для категорії задані свої переваги, вони витісняють з перших місць стандартний набір із чотирьох, заданих за замовчуванням. В адмінпанелі можна додавати та змінювати текст переваг.
Розроблено основний та додаткові фільтри каталогу.
Для фільтрації додані категорії та підкатегорії: “Метал”, “Проба”, “Ціна”. Для останнього ціни розбиті на діапазони та реалізований бігунок для вибору конкретних цифр.
Набір додаткових фільтрів за замовчуванням згорнуто. При натисканні на кнопку "Ще фільтри" з'являється блок з альтернативними параметрами для фільтрації.
Набір параметрів відповідає характеристикам конкретних категорій каталогу інтернет-магазину. Сторінка автоматично оновлюється при виборі чекбоксу.
Для мобільної версії стандартний фільтр прихований і з'являється при натисканні на кнопку «Підібрати».
Основні 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, зверстали новий оригінальний шаблон, забезпечили більші можливості для пошуку та купівлі товару, додали зручні функції для адміністрування сайту.
З менеджерами комфортно працювати. Хлопці вміють дотримуватися домовленостей і реагувати на прохання і пріоритети замовника.
Розробники реалізували всі наші задуми щодо проєкту. Ми отримали по-справжньому сучасний функціональний інтернет-магазин, що задовольняє наші вимоги і запити наших клієнтів.