Web-агентство Red Chameleon
+38 095 520-30-05 hello@redchameleon.com.ua EnUaRu
Замовити зворотній дзвінок
Про нас
  • Відгуки
  • Наші клієнти
  • Вакансії
Портфоліо
Створення сайтів
  • Розробка сайтів на Laravel
  • Розробка сайтів на YII2
  • Розробка сайтів на Symfony
  • Створення сайту на Wordpress
  • Створення інтернет-магазину
  • Розробка інтернет-магазину на PrestaShop
Підтримка сайту
  • Доопрацювання сайту
  • Перенесення сайту з Бітрікс на інші CMS
Контакти
Блог
Ещё
    +38 095 520-30-05 hello@redchameleon.com.ua EnUaRu
    • Про нас
      • Назад
      • Відгуки
        • Наші клієнти
          • Вакансії
          • Портфоліо
          • Створення сайтів
            • Назад
            • Розробка сайтів на Laravel
              • Розробка сайтів на YII2
                • Розробка сайтів на Symfony
                  • Створення сайту на Wordpress
                    • Створення інтернет-магазину
                      • Розробка інтернет-магазину на PrestaShop
                      • Підтримка сайту
                        • Назад
                        • Доопрацювання сайту
                          • Перенесення сайту з Бітрікс на інші CMS
                          • Контакти
                          • Блог
                          • Веб-студія
                          • Проекти
                          • Розробка та підтримка ювелірного інтернет-магазину 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 характеристики розкрито, інші є списком.

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

                          Фільтри Фільтри

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

                          Рекламний блок

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

                          Карточки товару 

                          Перегляд параметрів

                          Товари

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

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

                          Хлібні крихти

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

                          Зображення товару

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

                          Приклад:

                          Для кільця - 

                          Характеристики

                          Для кольє - 

                          Характеристики

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

                          Карточка товару

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

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

                          Ціна

                          «Купити» та «Вибране» додають товар у відповідний список. При натисканні «Купити в 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 продовжує співпрацю з "Червоним хамелеоном". Ми вирішуємо завдання, що виникають по сайту, і доробляємо необхідний замовнику функціонал інтернет-магазину.


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

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

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

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



                          Давайте обговоримо ваш проєкт
                          Залишіть заявку, і ми зв'яжемося з вами

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

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

                          Карта сайту
                          Оплата та розрахунки
                          Гарантії
                          Наші контакти


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