Меню

Кейс: создание интернет-магазина именных украшений

О проекте

К нам обратились представители компании ООО «Сильвер 24» из Санкт-Петербурга, которая специализируется на создании именных ювелирных украшений с проработкой авторских изделий до мельчайших деталей. Продукция выполняется в золоте и серебре, с различными заготовками и дополнительными элементами, гравировкой, с инкрустацией фианитами и бриллиантами. Главное, что требовалось реализовать в интернет-магазине, — это возможность посетителям сайта самим конструировать ювелирные изделия для последующего заказа. По результатам обсуждения задачи нашими специалистами был предложен вариант создания интернет-магазина украшений на «движке» WordPress и WooCommerce.

разработка интернет-магазина именных авторских украшений

Почему WordPress?

На основе CMS WordPress в сети базируется примерно 30% сайтов, а почти треть всех существующих интернет-магазинов — на взаимной интеграции WordPress и WooCommerce. Основными доводами в пользу этой платформы было:

  • Простота. В плане настроек и управления WordPress и WooCommerce равных нет.
  • Надежность и безотказность. Грамотно настроенные сайты на WordPress работают как часы.
  • Бесплатность. Базовый, но достаточно полный инструмент доступнен вам полностью, независимо от выручки, количества товаров и других характеристик.
  • Развитая экосистема. Для WordPress и WooCommerce создано огромное количество бесплатных плагинов и тем для конкретных практических задач.
  • Широкая функциональность. WooCommerce «из коробки» обеспечивает вас базовым функционалом интернет магазина, а с помощью плагинов (бесплатных и платных) функциональность платформы можно расширить, а сайт адаптировать к потребностям конкретного проекта.

Исходя из этих преимуществ и доступного бюджета был сделан выбор в пользу разработки интернет-магазина украшений на WordPress+Woocommerce. Также были сформулированы основные требования к будущему сайту: «лёгкость», приятный дизайн, user-friendly функционал интернет-магазина, наличие конкретных модулей доставки и платёжных систем, а также продвинутая форма предварительного заказа и онлайн-конструктор украшений. Проанализировав все нюансы и прикинув примерные сроки разработки, мы приступили к плотной и кропотливой работе.

Структура и функционал

Для нормальной работы интернет-магазина требуется шаблон интернет-магазин, который полностью совместим с WooCommerce. По итогам обсуждения выбран устраивавший обе стороны вариант под дальнейшую разработку. На его основе нами был разработан простой и интуитивный интерфейс навигации с минимумом переходов по сайту, не позволяющий «потеряться» при навигации: путь с главной страницы до оформления заказа составляет всего 5 кликов!

Немаловажным моментом является наличие вариативности в товарах — это позволяет покупателю выбрать из предоставленных вариантов украшения тот, который больше всего ему подходит. Для более же глубокой «настройки» существуют конструктор и форма предварительного заказа, о которых мы расскажем чуть позже.

Дизайн и внешний вид

Клиента, который не спешит совершать столь быстро покупку, а желающего сперва посмотреть на сам сайт, определённо порадует слайдер с профессиональными тематическими фотографиями изделий клиента и приятными анимациями. Любой понравившийся товар можно забросить в список желаемого, а чтобы не упустить количество добавленного — в верхнем правом меню мы разместили соответствующую иконку.

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

Адаптивность

Раньше качество сайта оценивалось в первую очередь на основе версии для компьютеров. Поскольку большинство пользователей сейчас открывают Google Поиск на мобильных устройствах, сканирование и индексирование страниц теперь выполняет в первую очередь робот Googlebot для смартфонов. Отсюда и появилась парадигма Mobile First. Наша команда всегда старается соответствовать современным стандартам разработки, поэтому было проведено множество работ по улучшению адаптивности сайта к мобильным устройствам.

На смартфонах

На планшетах

2

Форма заказа

Важным моментом в разработке интернет-магазина именных ювелирных украшений было создание формы заказа с вариативностью выбора. Данная форма, согласно мнению заказчика, необходима для клиентов, которым не хочется погружаться в конструктор украшений (о котором ниже) и хочется всё «немного попроще». В итоге, в реализованной нами форме у клиента есть:

  • Выбор тематики украшения;
  • Выбор материала выбор типа украшения;
  • Возможность делать заказ на несколько одинаковых фигурок;
  • Возможность выбора дополнительного тематического элемента;
  • Выбор длины браслета или цепочки;
  • Выбор вставок;
  • Указание данных для гравировки;
  • Указание дополнительных пожеланий к заказу.
конструктор ювелирных украшений разработка веб

Конструктор украшений

Не менее важным моментом было создание конструктора украшений. Это — разработка наших программистов, созданная на AngularJS с вариативностью и поддержкой Drag’n’Drop (с десктопных и мобильных устройств), а также интеграцией в функционал WooCommerce. Конструктор организован в 3 простых шага:

  • Клиент выбирает материал украшения, фигурки (можно располагать в произвольном порядке и выбирать сколь-угодное количество) и вставки;
  • Клиент выбирает длину браслета и указывает надписи для гравировки;
  • Проверяет корректность своего выбора и переходит к оформлению заказа.

В свою очередь, для удобства администрирования товары, т.е. фигурки, подтягиваются в конструктор из стандартного функционала WooCommerce, поддерживая динамическое ценообразование напрямую от товара, минуя какие-либо изменения в самом конструкторе. Заказ с конструктора «падает» в стандартный для WooCommerce раздел «Заказы», откуда дальнейшее администрирование доступно всем ответственным за конфигурирование заказов сотрудникам.

Подробнее о конструкторе товаров читайте в кейсе в блоге нашего сайта!

Интеграция Wordpress+Woocommerce с Битрикс24

Интеграция с Битрикс24

Одним из важнейших условий создания интернет-магазина именных украшений была интеграция сайта на платформе WordPress с CRM Битрикс24. С использованием существующих плагинов и собственных разработок нами были реализованы следующие сценарии создания лидов:

  • при регистрации на сайте;
  • при оформлении заказа в Woocommerce;
  • при заполнении контактной формы заказа;
  • при использовании онлайн-конструктора товара;
  • при оформлении «быстрого» заказа в карточке товара.

Таким образом, любое взаимодействие пользователя с сайтом с заполнение контактных данных приводило к созданию лида в Битрикс24. А значит — к быстрой и удобной обработке заявок менеджерами компании.

Итог

Данный проект был настоящим вызовом для команды Webnauts: очень тяжёлая и кропотливая работа, постоянное взаимодействие с клиентом на протяжении всего периода разработки и внедрение нового функционала на основе этого, корректировки дизайна «на лету» и многое, многое другое. В результате мы получили прекрасный, адаптивный и, что не менее важно, уже работающий и продающий сайт, что, несомненно, способствует довольству клиента и нас как разработчиков.

Над сайтом работали:

Андрей Калинин

Front-end разработчик
Разработка и наполнение сайтов на WordPress. HTML / CSS / PHP / JavaScript / SQL. Основы C++

Алексей Шептура

CEO, партнер
Разработчик мобильных приложений для Android, веб-программист, разработчик сайтов на Wordpress. Владеет HTML, CSS, JS, PHP, Java.

Олег Фролов

CEO, партнер
Продажи. Управление проектами. SEO. Разработка сайтов на CMS Wordpress и Битрикс.

Дмитрий Белобородов

Front-end разработчик
Разработка, наполнение и сопровождение сайтов на WordPress.

Оставить комментарий

avatar
  Подписаться  
Уведомление о