Мир магнитов

«Мир магнитов» — наш давний клиент, которому мы создали сайт ещё в далеком 2014 году. С той поры заказчик дорабатывал его своими силами. Постепенно функционала перестало хватать — поэтому добавлялись сторонние сервисы, делались всевозможные доработки текущих решений и использовались прочие «костыльные» методы (часто — неизбежные, когда нужно быстро масштабироваться).

За годы работы старого сайта менялись команды разработчиков, сам проект покрывался слоями кода, в котором уже никто не мог разобраться. Доработок было много: в админ-панели сайта, в функционале доставки, рассылках, скидочной системе, на фронтенде. И это всё клиенту было нужно и важно. Поэтому, когда он пришел к нам снова, предстояло сначала распутать этот клубок противоречий.

Заказчик хотел запустить мощный интернет-магазин:

— с подключением разных систем оплат и нескольких служб доставок;

— реализацией сложной системы скидок;

— интеграцией с 1С;

— выгрузкой фидов;

— и триггерными рассылками.

Всё это заказчику хотелось реализовать на микросервисах.

1. Анализ и сбор требований

Мы собрали и проанализировали 98 пунктов с пожеланиями заказчика и особенностями старого сайта. Разработали архитектуру на Битриксе с дополнительными интеграциями. Отказались от полной микросервисной структуры, но реализовали их для ускорения поиска, фильтрации и обмена с ERP.

2. Главная страница

— Разработали интерактивный слайдер с эффектом «магнитов», чтобы привлечь внимание пользователей.

— Создали два каталога: основной и каталог «по применению», который ведёт прямо к нужным товарам.

— Предложили более брутальный вариант дизайна, но заказчик решил оставить фирменные цвета.

3. Каталог «по применению»

— Собрали и структурировали типичные сценарии использования магнитов.

— Реализовали лендинги для каждой категории с описанием применения и подборкой товаров.

— Создали встроенный конструктор контента, чтобы контент-менеджеры могли легко заполнять страницы.

4. Основной каталог

— Разработали мощный фильтр на ElasticSearch, который учитывает миллион параметров.

— Настроили мобильную версию, в которой фильтр вынесен на отдельную страницу.

— Добавили быстрые фильтры для мгновенного перехода к нужным категориям.

— Реализовали покупку в один клик.

— Предусмотрели возможность просмотра каталога в табличном формате для оптовиков.

5. Страница товара

— Создали интерактивную галерею с видео и зумом по ховеру.

— Разработали систему динамического пересчёта цен при изменении количества товаров.

— Интегрировали более 10 вариантов доставки с расчётом стоимости в зависимости от геолокации.

— Реализовали систему отзывов, вопросов-ответов и подборок похожих товаров.

— Настроили механизм добавления контент-блоков (как общих, так и уникальных) для подробного описания товаров.

6. Корзина и оформление заказа

— Разработали гибкую корзину, где можно выбирать, какие товары покупать, а какие оставить.

— Реализовали динамическое отображение скидок при изменении количества товара.

— Автоматизировали округление кратности упаковок.

— Настроили мгновенный перерасчёт веса заказа и стоимости доставки.

— Интегрировали агрегатор доставок, оптимизировали его работу с кэшированием данных.

— Реализовали «ленивую регистрацию», при которой личный кабинет создаётся автоматически.

— Добавили возможность редактировать заказ на последнем этапе оформления.

7. Личный кабинет

— Разработали систему личных кабинетов с автоматическим созданием.

— Перенесли историю заказов со старого сайта, чтобы пользователи не потеряли данные.

— Реализовали хранение избранного и адресов доставки.

8. Интеграция с 1С

— Настроили передачу 18 типов цен для 3,5 тысяч товаров без задержек.

— Реализовали механизм псевдоSKU, который связывает варианты товаров в торговые линейки.

— Создали API для передачи заказов, оформленных менеджерами в 1С, в личный кабинет пользователя.

9. Работа с SEO и продвижением

— Разработали систему SEO-макросов, которая автоматически подставляет города, телефоны, цены, количество отзывов и другие параметры.

— Создали гибкий конструктор фидов, который позволяет маркетологам самостоятельно настраивать выгрузку данных.

— Перенесли все данные со старого сайта: товары, заказы, статьи, новости, вопросы и ответы.

Это если совсем коротко :D А теперь подробнее.

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

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

При этом использовать микросервисы для ускорения работы отдельных функций сайта — таких как поиск, фильтрация, обмен с ERP и т. д. — эффективно/

Главная страница в е-коммерс-проектах обычно не такая первостепенная, как каталог, ведь именного на него приходится основной интерес и поток пользователей. Но без прикольной главной при этом никак — важно зацепить пользователя с первых секунд загрузки и четко спозиционировать, где он оказался и в чем польза.

Для wow-эффекта главной страницы «Мира магнитов» мы предложили слайдер с интерактивным промо-блоком, где буквы из слов по нажатию на кнопку крепко примагничиваются к самому распространенному в сознаниии людей образу магнита: в виде подковы с красно-синими «ушками».

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

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

Мы собрали типичные сценарии применения магнитов на отдельной странице. По клику на конкретную категорию пользователь проваливается на лендинг с богатым контентом.

Здесь под каждый тип магнита — свой небольшой лендинг, где рассказывается о плюсах, сценариях использования и ключевых характеристиках. А после — показывается подборка конкретных магнитов из основного каталога, куда легко перейти по клику на понравившийся товар. Эти страницы заполняются заказчиком, для контент-менеджеров которого мы создали целый встроенный конструктор: сделали специальный инфоблок с разделами, элементами и привязками к другим сущностям. При создании элемента автоматически создается предзаполненная типовая страница каталога, которая позволяет добавлять разнообразный контент легко и гибко.

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

1. Мощный фильтр, который мы реализовали на базе ElasticSearch. Учитывает примерно миллион параметров в каждой категории: тут и размеры, и материалы, и типы, и форматы поставки, и производители, и даже тип намагничивания и срок размагничивания. Кроме того, почти по каждому параметру можно вводить запрос текстом в отдельных строках поиска внутри фильтра, чтобы сделать выдачу каталога максимально точной под потребности пользователя.

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

2. Быстрые фильтры. Сверху на странице категории каталога мы вывели подкатегории на плашках, по клику на которые можно быстро перейти к нужной. Например, если зайти в «гибкие магниты», то в один клик можно попасть в подкатегории «мягкое железо» или «магнитная бумага».

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

4. Возможность вывести данные каталога в виде таблицы. Каталог в виде таблицы вместо привычной всем плитки с товарами рассчитан на оптовых покупателей и дилеров, которые точно знают, чего хотят, и сосредоточены на быстрой покупке по четким параметрам.

Страница товара настолько информативна, что ей позавидуют даже самые матерые маркетплейсы. Здесь пользователя ждут:

— галерея с видео и зумом по ховеру;

— прозрачные цены: можно прямо в карточке отрегулировать количество товара и увидеть итоговую цену за него, с учетом всех скидок за объем покупки, плюс всегда на виду вилка оптовых цен;

— более десятка вариантов доставки, для которых выводится актуальная цена в зависимости от геолокации пользователя;

— реальные отзывы о товаре с изображениями, а также вопросы и ответы;

— детальное описание товара.

В описание товара можно добавить два типа контента. Первый — общие блоки, которые описывают базовые свойства магнитов, правила обращения с ними, кейсы использования. Блоки могут содержать текст, видео и картинки, задаются в админ-панели и привязываются к товарам или категориям товаров как штучно, так и группами.

Второй тип контента — уникальный, который касается конкретного товара и задается вручную.

Благодаря этому описание товара на детальной странице получается максимально полным и закрывает все потенциальные вопросы покупателя.

Также на странице товара пользователь видит подборки смежных категорий, похожих товаров, обзоров и статей. А ещё у него есть возможность собрать комплект с другими товарами (например, поисковый магнит + веревка + сумка + перчатки). В общем — всё для удобства пользователя и быстрой покупки.

Корзина на сайте — тоже в лучших традициях маркетплейсов с продающими фишками:

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

— «Убедительная математика»: наглядно показываем пользователям, сколько ещё магнитов нужно купить, чтобы получить скидку.

— Возможность отрегулировать количество каждой позиции: можно сразу увидеть, как пересчитывается общая сумма и, главное, цена за штуку при добавлении количества — «Мир магнитов» предлагает весьма приятные скидки за объем заказа.

— Ограничения: некоторые позиции невозможно купить штучно — только в определенном количестве (упаковкой): в этом случае в корзине появится предупреждение вроде «товар продается кратно 70 шт». Причем, корзина сама подставит ближайшее нужное значение при вводе: например, если при кратности в 70 шт ввести 130, она округлит до нужных 140, а если ввести 250 — округлит до 280.

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

Мы реализовали сложную логику «порогов цен»: для каждого товара из 1С получаем «пороги» и цену. Например, при покупке от 1 до 3 шт — цена 100 рублей, от 4 до 7 шт уже 90 рублей. Таких порогов у каждого товара может быть от 4 до 8.

Причем, при изменении количества товара в корзине, на лету считается и отображается:

— общая стоимость всех товаров;

— стоимость за единицу (зависит от пороговой цены);

— зачеркнутая старая цена;

— сколько нужно добавить единиц товара до следующего порога;

— экономия в рублях на следующем пороге цены.

Также корзина «на лету» пересчитывает общий вес товаров и стоимость доставки, а ещё показывает, сколько нужно докупить, чтобы доставка стала бесплатной.

На этапе оформления заказа пользователь может выбрать тип доставки (самовывоз из ПВЗ или адресная доставка) и город. Когда пользователь выбирает доставку в ПВЗ или на конкретный адрес, сайт за секунды подтягивает несколько вариантов служб доставки, сроки и стоимость в каждой.

При этом, чтобы на сайте было с десяток доставок на любой вкус, надо было или интегрироваться с каждой службой отдельно, или найти агрегатор доставки, который обеспечил бы высокую скорость обмена данными. А когда служб доставки больше 3–4, интеграция с каждой — отдельный вид мазохизма. И с агрегаторами свои загвоздки: каждый раз, когда пользователь открывает страницу товара или оформляет заказ, нужно передавать в агрегатор данные пользователя и товара, чтобы получить список и стоимость доставок. При этом агрегатор может отдавать данные со значительной задержкой.

Чтобы этого избежать, мы кешируем данные по стоимостям доставок на сайте на сутки. А чтобы первый пользователь, решивший сделать заказ, не ждал долго, мы «прогреваем» кеш: скачиваем список и стоимость доставок по популярным направлениям и тоже кешируем его.

Такое решение сокращает количество обращений к API агрегатора (а ведь каждое ещё и стоит денег), а пользователь при этом — сразу получает актуальную цену доставки.

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

Cледом сайт предлагает добавить в заказ приятные мелочи: да, с уже сформированным заказом, так тоже можно!. Кстати, позиции в заказе тоже можно поменять на этом этапе: например, изменить количество товара или убрать его из списка вовсе. «На сладкое» остается только выбрать вариант оплаты.

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

Кстати, историю заказов мы бережно перенесли со старого сайта, чтобы ничего не потерялось. Поэтому пользователь всегда может просмотреть список всех когда-либо купленных товаров.

1С «Мира магнитов» хранит все типы цен (основные и те, что со скидкой от количества, например) и пороги для пересчета цен по каждому товару. В каталоге около 3,5 тысяч товаров — и у каждого за счет таких ценовых вариаций можно насчитать до 18 типов цен. Мы настроили всё так, чтобы любое их количество передавалось на сайт без задержек.

В 1С клиента варианты одного и того же товара (SKU) хранятся как отдельные позиции каталога. Но пользователям сайта так — неудобно. Поэтому важно было гибко связать варианты товаров между собой. Лучше всего делать это на стороне 1С, но по историческим причинам это было невозможным.

Поэтому мы реализовали «псевдоSKU» на стороне сайта — торговые линейки, в которые через заданные свойства можно объединить несколько товаров. Благодаря этому решению на детальной странице каждого из таких товаров отображаются и остальные товары линейки с учетом их наличия — пользователю очень удобно выбирать.

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

Особенно удобно, что весь процесс как на ладони: в реальном времени видно, какие товары пойдут в линейку, какие уже привязаны к другой и в эту не попадут, а также ссылки на сами товары.

Отдельный контур — работа с заказами. В истории в личном кабинете должны выводиться все-все заказы клиента. Это просто, когда заказы делают только пользователи на сайте, но у «Мира магнитов» заказы часто создают менеджеры прямо в 1С. Чтобы такие заказы также были видны пользователям, мы специально написали отдельное API для работы с 1С заказчика.

Переезд со старого сайта на новый для многих компаний — огромный стресс и страх. В частности потому, что на старом сайте была вложена масса времени, сил и денег в SEO-оптимизацию, которая стабильно приносит трафик. Из-за этого «переезд» часто усложняется, ведь важно не сломать особенную SEO-логику и не потерять ни единой ссылки.

У «Мира магнитов» было отдельное ТЗ для SEO-оптимизации, которое описывало SEO-настройки для старого сайта, но для нового проекта оно, ожидаемо, не подходило. Поэтому мы разобрали его построчно: что-то взяли в работу, что-то усовершенствовали.

Для некоторых SEO-решений заказчика нам приходилось дополнительно и максимально въедливо работать с логикой — ведь на первый взгляд, кроме магии, их ничем нельзя было объяснить.

В итоге настройка от запутанного ТЗ до последних штрихов потребовала множества созвонов с SEO-специалистами заказчика — такого щепетильного подхода к SEO мы не видели ни на одном проекте.

Заказчик сразу запросил по SEO значительно больше, чем может дать Битрикс из коробки: различные падежи текущего города, разные тексты в зависимости от поддомена сайта и от города, выбранного пользователем, вставку номеров телефонов для этого города, количества отзывов, указания нестандартных цен и т. п. Чтобы все это реализовать, мы разработали специальную систему макросов, которая скорее похожа на псевдоязык программирования. Но главное — всё это работает во всех SEO-полях сайта.

Ещё один инструмент продвижения «Мира магнитов» — фиды. Это файлы с информацией о товарах: их названиями, техническими характеристиками и фото. Фиды нужны для автонастройки рекламы в е-коммерс, передачи товаров в маркетплейсы и не только.

За базу мы взяли старые фиды заказчика (которых в ТЗ заказчика было 18 типов), но после двух итераций работы с ними стало ясно — нужен конструктор :) Так маркетологам и контент-менеджерам будет легко самостоятельно создать нужный фид, который учитывает все необходимые в конкретном случае параметры товаров. В итоге получился конструктор, который позволяет очень тонко настраивать неограниченное количество фидов.

И пожалуй, это самая гибкая выгрузка каталога в фид в нашей практике. Сначала мы создали визуальный конструктор фида, но через несколько итераций добавления функционала он стал напоминать кабину истребителя: с кучей чекбоксов, выпадашек и донастроек на нескольких табах административной части.

В итоге мы всё перевели на уже обкатанный к тому моменту функционал макросов с SEO-контура. Он позволяет настраивать не только различные условия, но и циклы и разные операции с цифрами. Вдобавок к этому мы составили подробную инструкцию для заказчика, как пользоваться этим функционалом для новых фидов.

Кроме SEO-настроек мы провели огромную работу по переносу данных со старого сайта: это были и данные пользователей, и заказы, и описания товаров, и статьи, и новости, и вопросы с ответами. Это позволило сохранить всё то, что было наработано на старом сайте, и сделать «переезд» на новый сайт комфортным.

✔ Спроектировали и реализовали удобный, современный сайт с мощными функциями.

✔ Разработали продвинутый каталог с умным поиском и фильтрацией.

✔ Оптимизировали процесс покупки: от каталога до оформления заказа.

✔ Реализовали сложную систему интеграций с 1С, SEO-оптимизацию и автоматизированный контент-менеджмент.

✔ Создали сайт, который повышает продажи и удобство для пользователей.