Кейс: создание интернет-магазина именных украшений
О проекте
К нам обратились представители компании ООО «Сильвер 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: очень тяжёлая и кропотливая работа, постоянное взаимодействие с клиентом на протяжении всего периода разработки и внедрение нового функционала на основе этого, корректировки дизайна “на лету” и многое, многое другое. В результате мы получили прекрасный, адаптивный и, что не менее важно, уже работающий и продающий сайт, что, несомненно, способствует довольству клиента и нас как разработчиков.
