Создание сайта для ювелирной компании
ЗаказчикООО «БРИЛЛИАНТ СОЮЗ» — ювелирное производство в Костромской области. Компания изготавливает ювелирные украшения под двумя брендами Diamond Union и Alvada.ЗадачаРазработать удобный в использовании интернет-магазин, ориентированный на оптовых клиентов компании. Организация единого личного кабинета покупателя на разных доменах.
О проекте
«БРИЛЛИАНТ СОЮЗ» — прогрессивное ювелирное производство Костромской области нового поколения. Компания изготавливает ювелирные украшения под двумя брендами Diamond Union и Alvada. Каждый из брендов имеет свою уникальную линейку украшений.
Перед нашей командой стояла задача в кратчайшие сроки разработать удобный в использовании интернет-магазин, ориентированный на оптовых клиентов компании. Заказчик был заинтересован в скорейшем переводе всех операций по оптовой продаже ювелирных украшений в веб пространство, чтобы минимизировать ручной труд менеджеров компании.
Задачи
- Разработать дизайн концепцию сайта на основе брендбука заказчика, внедрить фирменные цвета и стилистические решения.
- Разработать полноценный мультибрендовый оптовый ювелирный интернет-магазин
- Наладить интеграцию товаров и заказов сайта с системой учета 1С заказчика
- Карточка товара должна предоставлять пользователю выбор пробы металла и размеров изделия для добавления в корзину
- Просмотр фото изделия в карточке товара должен поддерживать эффект лупы
- Реализовать авторизацию на сайте по средствам СМС подтверждения
- Реализовать многодоменность с общей базой данных и административной панелью
- Реализовать возможность клиенту компании в личном кабинете, по каждому из его заказов, автоматически сформировать архив с промо материалами (художественными и иными фото изделий) и скачать его.
- Создать возможность добавлять ряд мобильных номеров в «Черный список» для запрета потенциальной регистрации на сайте
Сложности проекта
- По пожеланию заказчика каталоги продукции брендов Diamond Union и Alvada были разнесены на отдельные домены (diamondunion.ru и alvada.store), при этом требовалось сохранить единую для обоих доменов систему управления сайтом.
- Организация единого личного кабинета покупателя. Необходимо было сделать так чтобы пользователь в независимости от того на каком из доменов бренда он находиться в данный момент имел доступ в общий личный кабинет, который давал возможность просмотра истории заказов по обоим брендам компании.
- Кроссдоменная авторизация. Авторизовавшись на любом из доменов и перейдя на другой у пользователя, должна сохраниться его авторизация по новому адресу.
- Авторизация по номеру телефона путем ввода проверочного кода, присланного по СМС. Ввиду обширной географии клиентов компании, большая часть которых находиться за рубежом не сразу удалось реализовать проверку корректности ввода того или иного номера мобильного телефона.
Что было сделано
1. Сбор информации и материалов, подготовка структуры сайта
Нами было организовано несколько личных встреч с заказчиком, в ходе которых мы нашли наиболее эффективные пути реализации задач, стоящих перед нами. Были получены все необходимые материалы: брендбук компании, примеры файловой выгрузки товаров из системы учета 1С, фотоматериалы.
Нами была предложена следующая структура сайта:
1. Главная страница
2. Страница «Бренд»
3. Страница «События»
4. Страница «Новинки»
5. Страница «Каталог»
5.1. Страница «Карточка товара»
6. Страница «Акции»
7. Страница «Личный кабинет»
7.1. Страница «Отложенные товары»
7.2. Страница «Список заказов»
7.2.3. Страница «Отдельный заказ истории заказов»
8. Страница «Регистрация»
9. Страница «Корзина / оформление заказа»
9.1. Страница «Уведомление об успешном заказе»
10. Страница «Контакты»
2. Создание дизайн-макетов
В дизайн макетах были реализованы пожелания заказчика по внешнему виду отдельных модулей сайта, были использованы корпоративные цвета, шрифты и элементы декора. Макеты были разработаны в трех вариантах разрешения экрана: десктоп, планшет и мобильная версия. В первую очередь макеты были выполнены исходя из фирменного стиля заказчика в соответствии с предоставленным им брендбуком компании. Самой важной задачей с точки зрения UX/UI была простота и удобство использования каталога, поскольку сайт ориентирован на оптовых покупателей необходимо было разработать удобный фильтр для поиска товаров, фильтр должен был компактно вмещать в себя различные параметры ювелирных изделий и корректно отображаться на мобильных устройствах. Пользователь должен был иметь возможность видеть на одном экране большую выборку товаров при этом они не должны были сливаться или быть слишком мелкими. Другим важным пунктом была понятная и функциональная корзина покупок, поскольку оптовик заказывает очень много изделий за раз, для него было важно сделать понятный просмотр заказных им изделий в корзине, важно было отобразить основные характеристики заказанных им украшений, параметры количества и цены.
3. Разработка и интеграции сайта
Сайт разрабатывался на PHP фреймворке Yii2. Были выполнены и протестированы все технические пожелания и общий функционал интернет-магазина: каталог товаров с возможностью фильтрации по параметрам, корзина заказа, разделы личного кабинета, текстовые и промо страницы.
3.1 Каталог товаров
Как и театр который начинается с вешалки любой интернет магазин начинается с каталога. На первом этапе разработки каталога мы сформировали товарную выдачу, запрограммировали карточки товаров с возможность перехода к детальному просмотру товара и добавления его в список избранного, внедрили сортировку. Самым объемным и важным элементом на данном этапе была интеграция фильтра товаров, мы сделали группировку свойств товаров на блоки фильтрации, разработали обмен товарами с системой учета 1С таким образом, чтобы все значения свойств товаров для фильтра брались из выгрузки — автоматически добавлялись или скрывались в зависимости от того какие товары выгружаются на сайт из 1С в данный момент.
3.2 Карточка товара
Следующим по логике разработки этапом была карточка товара. Мы преследовали цель как можно более репрезентативно показать покупателю товар. В карточку были включена галерея изображений товара, чтобы пользователь мог рассмотреть товар буквально со всех сторон, была внедрена возможность подгруздки видео о товаре, добавлен функционал «лупы». Для товаров с торговыми предложениями (размерами) мы разработали удобный блок выбора количества заказываемых изделий для каждого доступного размера. Кроме того был внедрен блок вариантов данного изделия — возможность перехода к карточкам украшений, которые отличаются от текущего только видом драгоценного камня или разновидностью метала.
3.3. Корзина и оформление заказа
Далее мы приступили к разработке страницы корзины и оформления заказа. С одной стороны, для оптового интернет магазина оформление заказа несколько проще, чем для розничного — в нем отсутствуют поля для заполнения личных данных , выбора способов оплаты и доставки, поскольку все эти вопросы решаются непосредственно с персональным менеджером который и выставляет счет клиенту по итогу заказа, в нашем случае на первый план выходила именно сама корзина. Для оптового покупателя корзина покупок должна была вместить массу информации и при это выглядеть не сумбурно и легко восприниматься. Исходя из пожеланий заказчика помимо стандартных полей корзины покупок таких как фото изделия его количество и стоимость мы разместили информацию о пробе изделия, подробное описание драгоценных камней, вес украшения. Мы добавили функционал массового редактирования количества заказываемых размеров товара в корзине, сделали возможность выгрузить свой заказ в формате Excel.
3.4. Личный кабинет покупателя
Для оптового покупателя личный кабинет один из важнейших модулей сайта. Мы создали удобную страницу просмотра истории заказов, в общем списке совершенных заказов клиент может наблюдать общую информацию по каждому из его заказов, его текущий статус, кроме того, интересной особенность стал функционал, который позволяет пользователю автоматически сформировать архив фотографий всех изделий из его заказа — это требуется для проведения рекламной компании или создания промо материалов покупателем. Важным функционалом стала возможность повторить заказ пользователем, по нажатию на кнопку повторить заказ покупатель автоматически формирует идентичный заказ в своей текущей корзине — это особенно важно для оптовика который тратит много времени на подбор украшений и формирование своей корзины покупок. Помимо этого личный кабинет включает в себя и стандартный набор модулей таких как просмотр и редактирование персональных данных, страницу просмотра отложенных товаров.
Для удобства коммуникации покупателей с заказчиком в административном разделе сайта был создан модуль привязки пользователя к персональному менеджеру, таким образом все заказы пользователя дублируются его персональному менеджеру, а сам покупатель в шапке сайта всегда может наблюдать контактную информацию своего персонального менеджера для обращений
Сайт был в кратчайшие сроки опубликован и начал работать в «боевом» режиме.
4. Интеграции
Была разработана и реализована логика обмена товарами и заказами между сайтами заказчика и системой учета 1С. Заказчик выгружает актуальные остатки и товары в формате CommerceML 2 в определенную папку на сервере, были настроены cron обработчики для автоматического разбора присланной заказчиком информации и обновления данных о товарах на сайте. Выполнена интеграция с сервисом смс рассылки bytehand для возможности авторизации на сайте с помощью смс подтверждения.
Результат
В результате нашей работы, на сайте практически в день публикации пользователи начали формировать и оформлять заказы. Мы оптимизировали бизнес-процессы заказчика, избавив менеджеров от дополнительных консультаций и звонков клиентам. Ранее все заказы формировались менеджером компании вручную, исходя из письменных пожеланий заказчика и так же вручную заносились в систему учета 1С. Нам удалось автоматизировать эти процессы как со стороны заказчика, так и со стороны его клиентов. Теперь клиенты могли наглядно при помощи веб каталога подобрать украшения пользуясь фильтром и оформить заказ, который автоматически попадал в систему учета 1С заказчика, клиенту не было необходимости запоминать логины и пароли от сайта, мы упростили процедуру авторизации сведя ее к вводу номера телефона.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
