Як ми створили інтернет-магазин Столичної ювелірної фабрики

Мета – створити сайт, що продає, на CMS Bitrix з унікальним дизайном, орієнтованим на ювелірну продукцію, з широким функціоналом та синхронізацією з індивідуалізованою версією 1С.

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

Точка старту

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

Але перша спроба зробити сайт затягнулася та закінчилася безрезультатно. Тому до «Червоного хамелеону» представники Столичної Ювелірної Фабрики прийшли з уже розпочатим проєктом. Це зумовило особливість кола завдань, із якими мали впоратися наші розробники.

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

• Доопрацювання дизайну
• Тестування роботи шаблону та вже створеного функціоналу
• Доопрацювання відсутніх та некоректно працюючих функцій
• Організація зручної структури та деталізованих фільтрів
• Забезпечення зручного та інтуїтивно зрозумілого виведення товарів
• Опрацювання форми замовлення, функціональності кошика та особистого кабінету

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

Як ми створювали ювелірний інтернет-магазин: Що було зроблено

Дизайн

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

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

При виведенні позицій на сторінках каталогу організовано прапорці: «Хіт», «Новинка», «Акція -ххх грн», відсоток знижки. Передбачено можливість додавання та редагування елементів через адмінку.

Додані банери, які можна легко створювати та настроювати в адміністративній панелі.

Розроблено та налаштовано блоки попереджень про некоректне введення даних під час реєстрації в особистому кабінеті та оформлення замовлення на сайті.

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

Виведення товару

Сторінку виведення товару створено з урахуванням досвіду користувача. Передбачені:

• зображення товару;
• візуальний блок із характеристиками виробу;
• до 4 кнопок для покупки позиції («Купити», «Плати пізніше», «Купити в кредит» та «Купити в 1 клік») або додавання до «Вибраного»;
• доступ до інформації про доставку та оплату, а також можливість отримати консультацію;
• візуальний блок переваг покупки в інтернет-магазині Столичної Ювелірної Фабрики;
• вкладки з описом, докладними характеристиками та відгуками;
• блок із переглянутими товарами.

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

Комплект формується товарознавцем на стороні 1С і вивантажується з бази в HighLoad-блоки, після чого створюються комплекти Бітрікс. У кожну вибірку може входити до 4 товарів.

У представленому блоці можна відразу вказати розмір кільця та оформити покупку всього комплекту.

Пошук та фільтри

На сайті реалізований повнотекстовий пошук, де легко знайти потрібний товар за ключовим словом, описом або артикулом. Розроблено зручну інтерактивну форму для введення запиту. Встановлено пріоритет виведення результатів пошуку на сторінку:

• товари за релевантністю (від 100% відповідності запиту та нижче);
• статті.

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

Особистий кабінет

Опрацьовано функціонал персональної області інтернет-магазину. Тут користувач може:

• оформити замовлення;
• керувати товарами у «Вибраному»;
• не пропустити позицію, що сподобалася, завдяки збереженню історії переглядів;
• відстежувати наявність виробів.

Замовлення товару

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

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

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

Розроблено дизайн листів-оповіщень про оформлення замовлення на сайті.

1. Работа с уже начатым проектом. Требует времени и больших усилий для понимания чужого кода, тестирования всех уже внедренных функций и правки многочисленных багов. Проблема решается только многократными тестами шаблона и абсолютно всего функционала.
2. Синхронизация с кастомизированной версией «1С: Предприятие». Столкнулись с проблемами при выгрузке и обновлении ассортимента товаров из системы учета, экспорте заказов из административной панели сайта в 1С. Все выявленные проблемы, связанные с индивидуализацией решения, были устранены программистами, создавшими код специально под него.

Висновки

Для розробників «Червоного хамелеону» нормальна практика – брати складні проєкти та якісно їх реалізовувати.

У підсумку ми реалізували те, що компанія не могла отримати протягом досить довгого часу, - створили сучасний крутий сайт з унікальним і 100% адаптивним дизайном. Інтернет-магазин https://stolychnashop.com.ua повністю відповідає вимогам та баченню замовників, а головне – максимально комфортно забезпечує потреби відвідувачів та постійних клієнтів.