Вжух, и маркетплейс
Что нового у «Орматек» в 2021 году: рассказываем о свежих масштабных переделках проекта, с которым мы вместе уже 6-й год
Вжух, и маркетплейс
Вжух, и маркетплейс
Что нового у «Орматек» в 2021 году: рассказываем о свежих масштабных переделках проекта, с которым мы вместе уже 6-й год
После событий 2020-го, кажется, уже всем стало ясно, что онлайн-торговля никогда не будет прежней. Теперь пользователи ждут ещё больше заботы, выше скорость работы сайтов, невероятного удобства поиска и оформления заказов. Не дождутся — тут же откроют сайт конкурентов, и поминай, как звали. А тут ещё маркетплейсы наступают на пятки, и бизнесу в онлайне приходится соответствовать. Прибавьте то, что после пандемии покупка вообще всего в онлайне — уже абсолютно стандартный сценарий, и требования всё суровее. В результате всех факторов получится вот что: отставать нельзя. Никак. Вообще.
Поэтому с начала 2021-го мы с «Орматек» планомерно продолжили улучшать (и гибко менять и адаптировать) интернет-проект там, где это особенно важно.
Поэтому с начала 2021-го мы с «Орматек» планомерно продолжили улучшать (и гибко менять и адаптировать) интернет-проект там, где это особенно важно.
«Орматек» — крупнейший производитель товаров для сна и отдыха с 600+ фирменными салонами в России и по всему миру. Собственное производство полного цикла, 20-летний опыт на рынке и 10 миллионов довольных крепким сном покупателей — сильные стороны бренда. А мощный и функциональный интернет-магазин — одно из его преимуществ.
Микросервисы для скорости
У «Орматек» — очень объёмный каталог товаров за счёт множества комбинаций: разные размеры и параметры создают до 4000+ вариантов одно и того же товара. Такой объем каталога создавал трудности при импорте товаров товаров на сайт из 1С — процесс был слишком долгим (до 8 часов).
Другая трудность — медленный поиск по сайту (иногда мог занимать до 10 секунд). Дело в том, что при таком объёме товаров в каталоге Битрикс создавал слишком тяжелые запросы. А если к поиску подключались многочисленные параметры из фильтра, ситуация становилась только хуже.
Решение обеих бед — перенос поиска, фильтрации, сортировок и импорта товаров в микросервисы.
Другая трудность — медленный поиск по сайту (иногда мог занимать до 10 секунд). Дело в том, что при таком объёме товаров в каталоге Битрикс создавал слишком тяжелые запросы. А если к поиску подключались многочисленные параметры из фильтра, ситуация становилась только хуже.
Решение обеих бед — перенос поиска, фильтрации, сортировок и импорта товаров в микросервисы.
Евгений
Разработчик
Чтобы решить проблему с тяжелым импортом цен из-за объёма данных, мы не стали придумывать никаких космических технологий, а просто распараллелили задачу импорта на 4 потока с помощью сервиса очередей RabbitMQ.
Микросервис — как джинн, исполняет желания сайта по запросу. Фактически это отдельный контейнер, куда выносятся тяжелые процессы. Работает сам по себе, в фоновом режиме. Но если сайту вдруг понадобятся его данные, он просто попросит их у микросервиса:
— Покажи пользователю кровати с тканевым основанием серого цвета размером 200×200 см в комплекте с матрасом средней жесткости.
— Слушаюсь и повинуюсь!
И вот перед пользователем на странице поиска ровно то, что тот хотел, да ещё и меньше, чем за 3 секунды.
Процессы сортировки и фильтрации мы перенесли в Elasticsearch — топовую поисковую систему в комплекте с масштабируемым нереляционным хранилищем данных (возможно, вы привыкли к более типичной аббревиатуре такого хранилища — NoSQL).
Заодно получили на сайте поисковый движок Elasticsearch. Он умный и шустрый — угадывает желания пользователя буквально на лету: покажет и подборку подходящих товаров, и потенциально подходящие категории, и похожие запросы. Пользователю останется только выбрать нужное.
— Покажи пользователю кровати с тканевым основанием серого цвета размером 200×200 см в комплекте с матрасом средней жесткости.
— Слушаюсь и повинуюсь!
И вот перед пользователем на странице поиска ровно то, что тот хотел, да ещё и меньше, чем за 3 секунды.
Процессы сортировки и фильтрации мы перенесли в Elasticsearch — топовую поисковую систему в комплекте с масштабируемым нереляционным хранилищем данных (возможно, вы привыкли к более типичной аббревиатуре такого хранилища — NoSQL).
Заодно получили на сайте поисковый движок Elasticsearch. Он умный и шустрый — угадывает желания пользователя буквально на лету: покажет и подборку подходящих товаров, и потенциально подходящие категории, и похожие запросы. Пользователю останется только выбрать нужное.
Как всё работает:
- В базе данных сайта MySQL и в Elasticsearch есть все SKU (это — единица учета товаров, складской номер или попросту артикул).
- Когда мы ищем конкретные SKU с нужными свойствами на сайте, эти параметры передаются в Elasticsearch.
- Elasticsearch моментально выдаёт список ID для искомых SKU.
- ID отдаются базе данных MySQL, и она по команде выводит соответствующие им SKU на странице запроса.
Как работает поиск на сайте «Орматек»
Дополнительно мы прописали для каждого параметра фильтрации и сортировки свои запросы в Elastic. Это позволило ускорить поиск по сложным пользовательским параметрам в каталоге.
Товары партнёров на площадке
«Орматек» теперь — немножко маркетплейс: с 2021 года у заказчика появился новый контур бизнес-процессов. В привычном пользователям интернет-магазине появились товары магазинов-партнёров с расширенным ассортиментом мебели, диванов и прочих позиций, которых у «Орматек» нет (а пользователям купить очень хотелось бы).
Для этого мы решали сразу несколько задач:
- разместить ассортимент партнёров так, чтобы тот не смешивался с ассортиментом «Орматек» и в идеале — вообще не передавался в 1С-ку нашего заказчика;
- разделить заказ в корзине на два и более (один — товары бренда, второй и последующие — товары магазинов-партнёров);
- реализовать одновременное оформление разных заказов (учитывая разницу в процессе и принципах оформления);
- реализовать какой-то функционал для магазинов-партнёров, чтобы те могли задавать информацию о доставке и оплате собственных товаров на сайте заказчика.
Для начала мы продумали механизм разделения заказов: в админ-панели сохраняем несколько заказов, разделяя их на разные юрлица. Например, «Орматек» — это основной заказ, «Магазин 1» — второй заказ, «Магазин 2» — третий и так далее. Количество заказов вообще не ограничено. Под каждого парнёра мы завели раздел в админке, в котором задаётся вся информация по товару (цена и сроки доставки). Дополнительно мы прописали требования к формированию фидов, с помощью которых партнёры могут загружать и обновлять товары на сайте — за счёт этого они не будут смешиваться с товарами «Орматек».
Схема понятна — казалось бы, бери и делай. Но старый функционал корзины такие выкрутасы не потянул бы. А это значило лишь одно — да здравствует рефакторинг! По факту нам пришлось переписать корзину чуть ли не полностью: рефакторили и бэкэнд, и фронтэнд.
Евгений
Разработчик
Фронтенд переписывали заново из-за того, что нарисовали новый дизайн корзины, учитывающий новые требования. Бэкенд был сложным и запутанным из-за многократных доработок — теперь же он сложный, но чёткий. По факту, логика корзины сейчас — вообще самая сложная часть сайта.
Новый интерфейс корзины и оформления заказа
Где рефакторинг — там и новый интерфейс. В нём мы учли кучу нюансов. Во-первых, визуально разделили в корзине товары бренда и магазинов-партнёров.
Во-вторых, мы учли многовариантность способов доставки:
- собственная доставка «Орматек»,
- два варианта самовывоза для «Орматек» (забрать в физическом магазине или со склада),
- доставка транспортной компанией — ПЭК и DPD,
- доставка в пункты вывоза 5Post.
Елена
Руководитель проекта
Достаточно много заморочек было на этапе подключения нового API 5Post и настроек характеристик товара при отправке. Пришлось вспоминать уроки геометрии 8-го класса, чтобы понять, как нам рассчитать габариты товара и скомпоновать их так, чтобы тот поместился в одну ячейку или разделился на несколько.
Здесь было несколько итераций, каждую из которых мы по месяцу тестировали в режиме реального времени на живом сайте с реальными пользователями, проверяя свои теории совместно со специалистами 5Post.
Здесь было несколько итераций, каждую из которых мы по месяцу тестировали в режиме реального времени на живом сайте с реальными пользователями, проверяя свои теории совместно со специалистами 5Post.
Евгений
Разработчик
Техническая сложность была в выборе места хранения/печати штрихкода: на стороне 1С или сайта. Мы дважды меняли его из-за тестирования логики работы с 5Post: сначала штрихкод формировался на сайте, затем на стороне 1С, потом — снова на сайте.
Дополнительно мы сгруппировали все варианты по типу доставки — самовывоз или, собственно, доставка. Для заботы о пользователе все пункты самовывоза (будь то физические магазины «Орматек» или склады) мы отметили на карте во всплывающем попапе.
Также нужно было учесть варианты оплаты и то, как они связаны с вариантами доставки (для разных способов доставки доступные варианты оплаты могут отличаться). Для этого мы сделали в админке настройку оплат, где можно указать, к какому способу доставки какая оплата допустима.
Вариантов немало:
Вариантов немало:
- оплата картой на сайте,
- оплата картой при получении,
- оплата наличными при получении,
- банковская рассрочка,
- рассрочка от Сбербанка (отдельно),
- банковский кредит,
- оплата с помощью QR-кода,
- оплата для юридических лиц.
 |  |
А ещё — теперь прямо в корзине можно менять цвет и размер выбранного товара и просматривать все его характеристики, не возвращаясь в карточку. Это особенно удобно, если в заказе много позиций, и в заходить на страницу каждой из них не слишком-то хочется.
Елена
Руководитель проекта
С момента запуска новой корзины прошло порядка 4-х месяцев. Обкатали этот контур, работа с партнёрами вышла на новый уровень.
Впереди — задача ещё интереснее: сделать кабинет вендора, в котором партнёры смогут самостоятельно размещать товары на сайте «Орматек». Но это — уже совсем другая история.
Впереди — задача ещё интереснее: сделать кабинет вендора, в котором партнёры смогут самостоятельно размещать товары на сайте «Орматек». Но это — уже совсем другая история.
Совершенно новая адаптивная версия
Классически адаптивные версии повторяют десктопные: те же блоки, только вместо нескольких колонок — одна. Это существенно удешевляет разработку (потому что нет дополнительных затрат на дизайн, верстальщики просто аккуратно перекомпоновывают разделы макета под другие разрешения), но пользователям — бывает скучно. Они уже привыкли к приложениям, где всё заточено под мобильный UX, и ждут подобного и в адаптивных версиях.
На сайте «Орматек» пользователь получает почти приложение: внизу, по классике, строка меню. Каждый блок мы заботливо проработали так, чтобы можно было скроллить по горизонтали и вертикали, удобно кликать селекты и кнопки, легко и быстро просматривать содержимое страниц, шустро выбирать характеристики товаров — в общем, покупать товары так же легко и удобно, как в версии для ПК.
На сайте «Орматек» пользователь получает почти приложение: внизу, по классике, строка меню. Каждый блок мы заботливо проработали так, чтобы можно было скроллить по горизонтали и вертикали, удобно кликать селекты и кнопки, легко и быстро просматривать содержимое страниц, шустро выбирать характеристики товаров — в общем, покупать товары так же легко и удобно, как в версии для ПК.
Обновлённый проект
