Інтернет-магазин іменних прикрас
Про проект
До нас звернулися представники компанії ТОВ «Сільвер 24», яка спеціалізується на створенні іменних ювелірних прикрас із опрацюванням авторських виробів до найдрібніших деталей. Продукція виконується в золоті та сріблі, з різними заготовленнями та додатковими елементами, гравіюванням, з інкрустацією фіанітами та діамантами. Головне, що потрібно реалізувати в інтернет-магазині, — це можливість відвідувачам сайту самим конструювати ювелірні вироби для подальшого замовлення. За результатами обговорення завдання нашими фахівцями було запропоновано варіант створення інтернет-магазину прикрас на «движку» WordPress і WooCommerce.
Чому WordPress?
На основі CMS WordPress у мережі базується приблизно 30% сайтів, а майже третина всіх наявних інтернет-магазинів – на взаємній інтеграції WordPress і WooCommerce. Основними доказами на користь цієї платформи було:
- Простота. У плані налаштувань та управління WordPress та WooCommerce рівних немає.
- Надійність та безвідмовність. Грамотно налаштовані сайти на WordPress працюють як годинник.
- Безплатність. Базовий, але досить повний інструмент доступний вам повністю, незалежно від виторгу, кількості товарів та інших характеристик.
- Розвинена екосистема. Для WordPress і WooCommerce створено величезну кількість безплатних плагінів і тем для конкретних практичних завдань.
- Широка функціональність.WooCommerce «з коробки» забезпечує вас базовим функціоналом інтернет-магазину, а за допомогою плагінів (безплатних та платних) функціональність платформи можна розширити, а сайт адаптувати до потреб конкретного проєкту.
Виходячи з цих переваг та доступного бюджету, було зроблено вибір на користь розробки інтернет-магазину прикрас на WordPress+Woocommerce. Також були сформульовані основні вимоги до майбутнього сайту: «легкість», приємний дизайн, user-friendly функціонал інтернет-магазину, наявність конкретних модулів доставки та платіжних систем, а також просунута форма попереднього замовлення та онлайн-конструктор прикрас. Проаналізувавши всі нюанси та прикинувши приблизні терміни розробки, ми приступили до щільної роботи.
Докладніше про розробку:
Послуги з розробки сайтів на WordPressСтруктура та функціонал
Для нормальної роботи інтернет-магазину потрібен шаблон інтернет-магазин, який повністю сумісний з WooCommerce. За підсумками обговорення обрано варіант, що влаштовував обидві сторони, під подальшу розробку. На його основі нами був розроблений простий та інтуїтивний інтерфейс навігації з мінімумом переходів по сайту, що не дозволяє «загубитися» при навігації: шлях з головної сторінки до оформлення замовлення складає всього 5 кліків!
Важливим моментом є наявність варіативності в товарах — це дозволяє покупцеві вибрати з наданих варіантів прикраси той, який найбільше йому підходить. Для глибшого «налаштування» існують конструктор і форма попереднього замовлення, про які ми розповімо трохи пізніше.
Дизайн та зовнішній вигляд
Клієнта, який не поспішає здійснювати так швидко покупку, а охочого спершу подивитися на сам сайт, безперечно порадує слайдер з професійними тематичними фотографіями виробів клієнта та приємними анімаціями. Будь-який товар, що сподобався, можна закинути в список бажаного, а щоб не упустити кількість доданого — у верхньому правому меню ми розмістили відповідну іконку:
Для тих, хто любить попередньо розглядати товар у найдрібніших подробицях передбачено збільшення зображення за наведенням на прев’ю товару:
Адаптивність
Раніше якість сайту оцінювалася насамперед на основі версії для комп’ютерів. Оскільки більшість користувачів зараз відкривають Google Пошук на мобільних пристроях, сканування та індексування сторінок тепер виконує насамперед робот Googlebot для смартфонів. Звідси з’явилася парадигма Mobile First. Наша команда завжди намагається відповідати сучасним стандартам розробки, тому було проведено багато робіт з покращення адаптивності сайту до мобільних пристроїв.
Форма замовлення
Важливим моментом у розробці інтернет-магазину іменних ювелірних прикрас було створення форми замовлення з варіативністю вибору. Дана форма, на думку замовника, необхідна для клієнтів, яким не хочеться занурюватися в конструктор прикрас (про яке нижче) і хочеться все «трохи простіше». У результаті, у реалізованій нами формі клієнт має:
- Вибір тематики прикраси;
- Вибір матеріалу вибір типу прикраси;
- Можливість робити замовлення на кілька однакових фігурок;
- Можливість вибору додаткового тематичного елемента;
- Вибір довжини браслета або ланцюжка;
- Вибір вставок;
- Вказівка для гравіювання;
- Вказати додаткові побажання до замовлення.
Конструктор прикрас
Так само важливим моментом було створення конструктора прикрас. Це – розробка наших програмістів, створена на AngularJS з варіативністю та підтримкою Drag’n’Drop (з десктопних та мобільних пристроїв), а також інтеграцією у функціонал WooCommerce. Конструктор організований у 3 простих кроки:
- Клієнт вибирає матеріал прикраси, фігурки (можна розташовувати в довільному порядку і вибирати скільки завгодно) і вставки;
- Клієнт вибирає довжину браслета та вказує написи для гравіювання;
- Перевіряє коректність свого вибору та переходить до оформлення замовлення.
Натомість для зручності адміністрування товари, тобто. фігурки, що підтягуються в конструктор зі стандартного функціонала WooCommerce, підтримуючи динамічне ціноутворення безпосередньо від товару, минаючи будь-які зміни в самому конструкторі. Замовлення з конструктора «падає» до стандартного для WooCommerce розділу «Замовлення», звідки подальше адміністрування доступне всім відповідальним за конфігурування замовлень співробітникам.
Інтеграція з Бітрікс24
Однією з найважливіших умов створення інтернет-магазину іменних прикрас була інтеграція сайту на платформі WordPress із CRM Бітрікс24. З використанням наявних плагінів та власних розробок нами було реалізовано такі сценарії створення лідів:
- під час реєстрації на сайті;
- при оформленні замовлення у Woocommerce;
- при заповненні контактної форми замовлення;
- при використанні онлайн-конструктора товару;
- при оформленні «швидкого» замовлення у картці товару.
Таким чином, будь-яка взаємодія користувача з сайтом із заповнення контактних даних призводила до створення ліда в Бітрікс24. А значить – до швидкої та зручної обробки заявок менеджерами компанії.
Підсумок
Даний проєкт був справжнім викликом для команди Webnauts: дуже важка та копітка робота, постійна взаємодія з клієнтом протягом усього періоду розробки та впровадження нового функціоналу на основі цього, коригування дизайну «на льоту» та багато іншого. В результаті ми отримали прекрасний, адаптивний і, що не менш важливо, сайт, що вже працює і продає, що, безсумнівно, сприяє задоволенню клієнта і нас як розробників.
О проекте
К нам обратились представители компании ООО «Сильвер 24», которая специализируется на создании именных ювелирных украшений с проработкой авторских изделий до мельчайших деталей. Продукция выполняется в золоте и серебре, с различными заготовками и дополнительными элементами, гравировкой, с инкрустацией фианитами и бриллиантами. Главное, что требовалось реализовать в интернет-магазине, – это возможность посетителям сайта самим конструировать ювелирные изделия для последующего заказа. По результатам обсуждения задачи нашими специалистами был предложен вариант создания интернет-магазина украшений на «движке» WordPress и WooCommerce.
Почему WordPress?
На основе CMS WordPress в сети базируется примерно 30% сайтов, а почти треть всех существующих интернет-магазинов – на взаимной интеграции WordPress и WooCommerce. Основными доводами в пользу этой платформы было:
- Простота. В плане настроек и управления WordPress и WooCommerce равных нет.
- Надежность и безотказность. Грамотно настроенные сайты на WordPress работают как часы.
- Бесплатность. Базовый, но достаточно полный инструмент доступнен вам полностью, независимо от выручки, количества товаров и других характеристик.
- Развитая экосистема. Для WordPress и WooCommerce создано огромное количество бесплатных плагинов и тем для конкретных практических задач.
- Широкая функциональность. WooCommerce «из коробки» обеспечивает вас базовым функционалом интернет магазина, а с помощью плагинов (бесплатных и платных) функциональность платформы можно расширить, а сайт адаптировать к потребностям конкретного проекта.
Исходя из этих преимуществ и доступного бюджета был сделан выбор в пользу разработки интернет-магазина украшений на WordPress+Woocommerce. Также были сформулированы основные требования к будущему сайту: “лёгкость”, приятный дизайн, user-friendly функционал интернет-магазина, наличие конкретных модулей доставки и платёжных систем, а также продвинутая форма предварительного заказа и онлайн-конструктор украшений. Проанализировав все нюансы и прикинув примерные сроки разработки, мы приступили к плотной и кропотливой работе.
Подробнее о разработке:
Услуги по разработке сайтов на WordPressСтруктура и функционал
Для нормальной работы интернет-магазина требуется шаблон интернет-магазин, который полностью совместим с WooCommerce. По итогам обсуждения выбран устраивавший обе стороны вариант под дальнейшую разработку. На его основе нами был разработан простой и интуитивный интерфейс навигации с минимумом переходов по сайту, не позволяющий «потеряться» при навигации: путь с главной страницы до оформления заказа составляет всего 5 кликов!
Немаловажным моментом является наличие вариативности в товарах — это позволяет покупателю выбрать из предоставленных вариантов украшения тот, который больше всего ему подходит. Для более же глубокой «настройки» существуют конструктор и форма предварительного заказа, о которых мы расскажем чуть позже.
Дизайн и внешний вид
Клиента, который не спешит совершать столь быстро покупку, а желающего сперва посмотреть на сам сайт, определённо порадует слайдер с профессиональными тематическими фотографиями изделий клиента и приятными анимациями. Любой понравившийся товар можно забросить в список желаемого, а чтобы не упустить количество добавленного — в верхнем правом меню мы разместили соответствующую иконку.
Для тех, кто любит предварительно рассматривать товар в мельчайших подробностях предусмотрено увеличение изображения по наведению на превью товара.
Адаптивность
Раньше качество сайта оценивалось в первую очередь на основе версии для компьютеров. Поскольку большинство пользователей сейчас открывают Google Поиск на мобильных устройствах, сканирование и индексирование страниц теперь выполняет в первую очередь робот Googlebot для смартфонов. Отсюда и появилась парадигма Mobile First. Наша команда всегда старается соответствовать современным стандартам разработки, поэтому было проведено множество работ по улучшению адаптивности сайта к мобильным устройствам.
Форма заказа
Важным моментом в разработке интернет-магазина именных ювелирных украшений было создание формы заказа с вариативностью выбора. Данная форма, согласно мнению заказчика, необходима для клиентов, которым не хочется погружаться в конструктор украшений (о котором ниже) и хочется всё “немного попроще”. В итоге, в реализованной нами форме у клиента есть:
- Выбор тематики украшения;
- Выбор материала выбор типа украшения;
- Возможность делать заказ на несколько одинаковых фигурок;
- Возможность выбора дополнительного тематического элемента;
- Выбор длины браслета или цепочки;
- Выбор вставок;
- Указание данных для гравировки;
- Указание дополнительных пожеланий к заказу.
Конструктор украшений
Не менее важным моментом было создание конструктора украшений. Это – разработка наших программистов, созданная на AngularJS с вариативностью и поддержкой Drag’n’Drop (с десктопных и мобильных устройств), а также интеграцией в функционал WooCommerce. Конструктор организован в 3 простых шага:
- Клиент выбирает материал украшения, фигурки (можно располагать в произвольном порядке и выбирать сколь-угодное количество) и вставки;
- Клиент выбирает длину браслета и указывает надписи для гравировки;
- Проверяет корректность своего выбора и переходит к оформлению заказа.
В свою очередь, для удобства администрирования товары, т.е. фигурки, подтягиваются в конструктор из стандартного функционала WooCommerce, поддерживая динамическое ценообразование напрямую от товара, минуя какие-либо изменения в самом конструкторе. Заказ с конструктора «падает» в стандартный для WooCommerce раздел «Заказы», откуда дальнейшее администрирование доступно всем ответственным за конфигурирование заказов сотрудникам.
Интеграция с Битрикс24
Одним из важнейших условий создания интернет-магазина именных украшений была интеграция сайта на платформе WordPress с CRM Битрикс24. С использованием существующих плагинов и собственных разработок нами были реализованы следующие сценарии создания лидов:
- при регистрации на сайте;
- при оформлении заказа в Woocommerce;
- при заполнении контактной формы заказа;
- при использовании онлайн-конструктора товара;
- при оформлении “быстрого” заказа в карточке товара.
Таким образом, любое взаимодействие пользователя с сайтом с заполнение контактных данных приводило к созданию лида в Битрикс24. А значит – к быстрой и удобной обработке заявок менеджерами компании.
Итог
Данный проект был настоящим вызовом для команды Webnauts: очень тяжёлая и кропотливая работа, постоянное взаимодействие с клиентом на протяжении всего периода разработки и внедрение нового функционала на основе этого, корректировки дизайна “на лету” и многое, многое другое. В результате мы получили прекрасный, адаптивный и, что не менее важно, уже работающий и продающий сайт, что, несомненно, способствует довольству клиента и нас как разработчиков.
Комментарии