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

Про проєкт

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

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

Точка старту

Нинішній інтернет-магазин – це не перша спроба реалізувати продажі в мережі. До «Червоного хамелеону» менеджери компанії KSD AURUM звернулися з ресурсом на OpenCart. Однак він був простим каталогом товарів і не відповідав бізнес-цілям замовника. Майданчик не дозволяв відвідувачеві купити товар онлайн. Крім того, на сайті були:

• застарілий дизайн;
• велика кількість помилок;
• проблеми з SEO.

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

Поставлені завдання

Для цього необхідно було реалізувати низку комплексних завдань:

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

Складність

4 из 5

Що було зроблено

Верстка

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

Після верстки код був протестований на предмет помилок та проблемних місць, які можуть стати на заваді інтеграції на CMS «Бітрікс». Виправлені всі помилки консолі та виявлені в процесі розробки баги.

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

Розробка

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

Головна

При наведенні на кнопку "Каталог" з'являється блок з основними категоріями та іншими посиланнями каталогу, а також елементом "Продукт дня" для кожного розділу. Блок редагується з адміністративної панелі.

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

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

Доданий функціонал зворотного дзвінка.

Розроблено функціональні кнопки «Вибране» та «Кошик». При наведенні на іконки показується список із трьох товарів із відповідного розділу, клік переводить на сторінку в особистому кабінеті.

Реєстрація та авторизація в особистому кабінеті відбувається натисканням на іконку ОК у шапці. Реалізовано функціонал реєстрації, вдалої та невдалої авторизації, функція відновлення пароля.

При натисканні на укр/рус відбувається автоматична зміна мови сайту. Відкривається УРЛ аналогічної сторінки відповідної мовної версії.

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

Якщо користувач вже був на сайті і щось дивився, додавав товари до «Вибраного» або «Кошик», йому виводиться блок «Ви дивилися».

При натисканні на кнопку «Запитайте експерта» з'являється форма надсилання запитання користувача.

Реалізовано блок візуалізації категорій, що настроюється.

З адмінпанелі можна додавати та змінювати фотографії розділів, заголовки, адресу для переходу при кліку та черговість виводу.

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

Блок розташований на різних сторінках сайту, та в залежності від обраної категорії в ньому виводяться відповідні товари.

Блок «Підписка» складається із трьох частин:

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

У футер додані посилання на основні категорії каталогу, адреси магазинів, контакти та форма підписки на розсилку.

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

Інтеграція каталогу

Додані «хлібні крихти». Поточна сторінка відображається простим текстом, всі батьківські – посиланнями.

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

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

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

Набір додаткових фільтрів за замовчуванням згорнуто. При натисканні на кнопку "Ще фільтри" з'являється блок з альтернативними параметрами для фільтрації.

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

Для мобайла стандартний фільтр прихований і з'являється при натисканні на кнопку «Підібрати».

Основні 4 характеристики розкрито, інші є списком.

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

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

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

 

Товари

Інтегрована верстка картки товарів в наявності та не в наявності.

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

Додано можливість переглянути зображення прямо в блоці з картинкою або в попапі, який з'являється після натискання на основне фото.

Реалізовано висновок основних параметрів різних типів товару залежно від належності до конкретної категорії

Приклад:

Для кільця - 

Для кольє - 

Ці ж характеристики виводяться в картці товару в каталозі, на головній сторінці блогу з товарами та інших, де є картка товару.

Вага виробу змінюється автоматично при виборі конкретного розміру прикраси.

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

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

Інтегрований функціонал премодерованих відгуків про товари. Виводиться кількість та середня оцінка конкретного найменування.

Додали блок «З цим товаром купують», до якого динамічно підвантажуються картки товарів, які замовили разом із позицією, що переглядається..

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

Реалізовано фільтрацію товарів за наявністю фотографій. Якщо на сайт вивантажено товари без фотографій:

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

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

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

Кошик та замовлення

Якщо в «Кошику» є товар, якого немає на складі, з'являється кнопка «Підібрати в наявності», яка веде на підкатегорію з аналогічними товарами з урахуванням обраних параметрів: тип металу, колір, проба, вставка.

Під час оформлення замовлення розраховується загальна сума покупки. Якщо ціна замовлення:

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

Передбачено функціонал розрахунку знижки за наявності промо-коду або дисконтної картки (замість промо-коду вноситься номер картки). Код знижки – поле, куди клієнт може ввести промо-код або номер дисконтної картки. При цьому відображається відсоток та сума знижки, а також перераховується вартість замовлення. Якщо код не знайдено в базі, відображається повідомлення про помилку.

Для доставки доступні способи: Нова Пошта, Кур'єр по Києву, Самовивіз з магазину. Для Нової пошти відділення з адресами отримуються через API. Якщо вибрано кур'єрську доставку, вибір міста стає неактивним. Для самовивезення пропонуються міста, в яких є магазини замовника та їх адреси.

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

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

Блог

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

Посилання з мініатюри анонсу та кнопки «Читати повністю» реалізовані як JavaScript.

У «хлібних крихтах» відображаються посилання на головну, блог та сторінку категорії.

1C

Команда "Червоного хамелеона" організувала коректний двосторонній обмін даними з 1С. Вивантаження неодноразово тестувалися, щоб виявити помилки та ймовірні проблеми, які відразу виправлялися програмістами.

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

Забезпечили оновлення товарів на сайті після вивантаження: всі нові позиції потрапляють до групи «Новинка» та отримують відповідні плашки. Товар вважається новинкою протягом 30 днів після створення.

SEO

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

• Налаштовані зрозумілі УРЛи (SEF) – адреси сторінок сайту, що читаються. Приклад: /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 продовжує співпрацю з "Червоним хамелеоном". Ми вирішуємо завдання, що виникають по сайту, і доробляємо необхідний замовнику функціонал інтернет-магазину.