Сантико — интернет-магазин сантехники

АНАЛИТИКА

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

Проблема 1 — наполнение сайта

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

Нам было важно заполучить:

Тогда мы еще слабо осознавали, с чем нам предстоит столкнуться...

Итак, из-за такого большого количества сайтов-доноров, гигантского количества элементов каталога парсинг осуществлялся с задержками в секунду между запросами в многопоточном режиме.

ОБЩЕЕ ВРЕМЯ ПАРСИНГА составило 8 СУТОК

В итоге наши мучения не были напрасны, ведь мы получили:

Проблема 2 — структура и характеристики

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

Если с иерархией каталога все было более или менее понятно (мы выбрали самую оптимальную для клиента иерархию — по категории товара), то с разделением товаров дальше стоило уже подумать. В итоге было принято решение подразделять товары по основным характеристикам, а если пользователю потребуется дальнейшая сортировка, тут вступит в игру наш супер-фильтр (о нем позднее).

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

Например, такой главный показатель, как размер, был на разных сайтах представлен по-разному:

в метрах	в сантиметрах
в миллиметрах	в дюймах и тд...

Вряд ли пользователю будет удобно сравнивать размеры одной ванны в сантиметрах с размерами другой ванной в миллиметрах.

С цветами было еще «веселее»: вариантов выбора одного параметра было больше, чем у размеров, обозначение стандартного белого цвета имело следующие синонимы:

светлый

белый

светлый белый

белый светлый

RAL 7003

RGB #FFF

SMYK 45,34,28,29.

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

ИТОГ — структура каталога была поделена на 16 основных категорий и 198 подразделов

Проблема 3 — круглогодичный подогрев интереса пользователей

Спрос в данной тематике во многом зависит от строительного и ремонтного сезонов. А они, как правило, имеют такое понятие, как сезонность. Спрос на подобные товары летом высокий, а зимой низкий. Чтобы интернет-магазин не терял прибыль в такие времена, у нас были идеи, как поддерживать спрос на сайте среди покупателей:

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

ДИЗАЙН

Левое меню

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

Решение сократить место под меню, а также сделать его визуально интересным пришло очень быстро — иконки! Минималистичные, в едином стиле, отрисованные специально для этого проекта.

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

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

Иконки

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

ВСЕГО БЫЛО ОТРИСОВАНО 220 ИКОНОК

Иконки для разделов, подразделов, преимуществ были отрисованы в современном формате SVG (векторные), что позволило добиться их быстрой загрузки (их размер существенно меньше, чем иконок в других форматах, и выводятся они в едином потоке без загрузки дополнительных файлов).

Также такой формат иконок позволяет добавить интересные эффекты:

Карточка товара

Ради чего создается интернет-магазин? Ради продажи продукции, поэтому основные страницы сайта — страницы товаров.

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

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

Настроена перелинковка с брендом с возможностью просмотра всех категорий товаров и вообще всех товаров определенного бренда.

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

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

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

Дополнительно любую карточку товара можно распечатать либо сохранить/отправить на него ссылку.

Разделы каталога

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

Для того чтобы даже после использования фильтра клиент мог определить несколько интересующих его элементов еще до этапа перехода в карточку товара, мы вывели несколько характеристик:

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

Также в данном превью пользователь может увидеть гарантию на товар, добавить товар в Избранное или Сравнение, либо оформить заказ, добавив в корзину.

Если у основного раздела имеются подразделы, они выведены над фильтром в виде SVG иконок.

Чтобы действующие акции были у пользователя всегда на виду, было добавлено поле под подобный баннер.

ФИЛЬТР

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

КАЖДЫЙ РАЗДЕЛ И ПОДРАЗДЕЛ ИМЕЕТ УНИКАЛЬНЫЙ НАБОР ПАРАМЕТРОВ ФИЛЬТРА, ОТНОСЯЩИЙСЯ ИСКЛЮЧИТЕЛЬНО К ТЕМ ЭЛЕМЕНТАМ, КОТОРЫЕ В НЕМ ПРЕДСТАВЛЕНЫ

Фильтр также полезен для дальнейшего продвижения сайта, так как каждая отфильтрованная страница имеет свой уникальный URL. На такую страницу можно добавить текст или подключить контекстную рекламу с целевым запросом. Кстати, подобный способ значительно снизит стоимость рекламной кампании благодаря повышению качества объявления.

ЗАПОЛНЕНИЕ 400 ХАРАКТЕРИСТИК ТОВАРОВ ВРУЧНУЮ МОГЛО БЫ ПОТРЕБОВАТЬ УСИЛИЙ 5-ти КОНТЕНТ-МЕНЕДЖЕРОВ И 7-ми МЕСЯЦЕВ РАБОТЫ

Как мы это обошли и сделали все быстро?

Была разработана специальная обработка (доступная в качестве модуля к нашей системе управления almaCMS), которая в автоматическом режиме обходила весь каталог, анализировала все элементы и создавала поля фильтра (индивидуальные для каждого раздела). Таким образом, поля, не характерные для данного раздела, автоматически отбрасывались (например «функция биде» для раковин).

ИТОГ — ОТ 15 ДО 40 ПОЛЕЙ ДЛЯ КАЖДОГО РАЗДЕЛА (В СРЕДНЕМ).
ИСКЛЮЧЕНИЕ — РАЗДЕЛ АКСЕССУАРЫ И ЕГО 140 ПАРАМЕТРОВ!

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

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

Удобным, с точки зрения тематики сантехники, был вывод некоторых параметров в виде быстрых ссылок, например, «акриловые ванные 180 см».

НЕМНОГО О ТЕХНИЧЕСКИХ ВОЗМОЖНОСТЯХ САЙТА

Предупреждаем: далее будет много технических терминов.

Итак, сайт благодаря такому каталогу весит немало, а значит «железо» надо самое мощное, чтобы в один прекрасный момент все не рухнуло.
Мы выбрали самый мощный VPS от проверенного провайдера с топовыми характеристиками: 4x2200 МГц, 8 гигов памяти, устройство хранения — только SSD!

Но даже не смотря на такую мощь, после первых тестов показатели были далеки от идеальных. Самые тяжелые страницы — при отображении раздела каталога с отбором по 5-7 параметрам фильтра давали до 1 секунды на запрос к базе данных и до 3 секунд на отображение полной страницы в браузере.

Вроде не столь критично? Как говорится, и так сойдет. Но не для нас! Мы делали тесты в «стерильных» условиях, а вот в «боевом» режиме и с растущим трафиком сайт рано или поздно точно бы лёг. Возникла проблема №4.

Проблема 4 — превратить Слоупока в Флеша

Итак, задача поставлена: нужно кардинально ускорить выдачу страниц, особое значение уделить тяжелым запросам к базе данных (далее БД) при работе с фильтром.

1. Создаем справочники

Начнем с изменения структуры БД — добавим отдельные справочники для полей каталога. Но не для всех, а для тех, что во-первых, имеют текстовые данные, и во-вторых, используются в фильтрах. Для отбора таких полей воспользовались функциями анализа фильтров [almaCMS functions catalog.filtersAnalysis, catalog.fieldsCardinality] — они дают нам полную сводку сразу обо всех настроенных фильтрах всех разделов на сайте: какие поля, как выбираются данные по ним, сколько вариантов значений по полям.

2. Заполняем справочники

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

3. Индексируем каталог

Далее для еще большего ускорения работы с БД проводим индексацию полей каталога [almaCMS function catalog.fieldsIndexes]. Это чисто техническая операция, смысл которой заключается в «как бы» сортировке каталога по каждому из индексированных полей. Ведь человеку искать слово в словаре, когда слова идут по порядку, в сотни тысячи раз удобнее и быстрее.

4. Агрегирование данных

Пользователям нравится, когда напротив раздела написано количество элементов, входящих в него. Также положительно на конверсию влияет, когда у раздела есть «правдивый» размер максимальной скидки, например, «скидка на встраиваемые раковины до 35%». Само собой, вручную каждый раз при изменений в каталоге эти цифры менять — полное сумашествие, а автоматически на лету производить подсчет значений слишком затратно по ресурсам. Поэтому самое оптимальное — это сагрегировать данные, т. е. один раз автоматически рассчитать все значения и сохранить [almaCMS functions catalog.catFolderFieldAggregate, catalog.setDiscount]. А на сайте будут отображаться уже сохранные данные, что очень быстро, экономно и показывает реальные цифры. Перерасчитываться же они будут также автоматически при изменении в каталоге.

5. Кэширование данных

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

Для текущего сайта нами было реализовано три уровня кэширования:

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

6. Подгрузка полей фильтра

И самого окна фильтра осуществляется динамически по AJAX (только после нажатия на кнопку), что позволяет грузить тяжелые данные только при необходимости, именно когда они нужны пользователю, а не при каждом обновлении страницы.

Проблема 5 — привести фото из разных источников к единому формату

1. Формат

Приведение исходных изображений из разных источников к единому формату, размеру, пропорциям.

2. Оптимизация изображений

Для ускорения загрузки и отображения страницы (увеличения индекса Google PageSpeed) для каждого изображения создаем по 5 превьюшек в разных размерах и сжимаем их максимально без потери качества.

3. Наложение водяного знака

4. Синхронизация с поставщиками

Решив вышеперечисленные задачи, мы добились каталога с качественными изображениями. Но для того чтобы связать все воедино, чтобы информация на сайте обновлялась, пришлось связать готовый каталог с базами поставщиков.

Проблема 6 — синхронизация с базами поставщиков

Чтобы упростить задачу менеджерам заказчика, мы решили синхронизировать полученный и «причесанный» каталог с базами поставщиков. В противном случае, если бы менеджеру поступал какой-либо заказ, ему бы пришлось просматривать каталоги поставщиков вручную, связываться с ними, уточнять о наличии товара и сроках поставки. Если сайт в сутки принимает максимум заказов 10, то возможно, автоматическая синхронизация тут и не понадобится, менеджер и вручную справится: за сутки, но выполнит заказы. А если заказов будет в разы больше?

Было принято решение помочь заказчику и облегчить ему жизнь в обработке заказов

Мы не думали, что обрекаем себя на великие мучения. Мы просто не могли представить, что большинство поставщиков, причем крупных компаний, которые по идее должны использовать только современные технологии в своем бизнесе, хранят свои каталоги в Excel!
В Excel, Карл, в 2020 году!!! У кого-то свои форматы XML, у кого есть самописные учетные системы с api — в общем, «зоопарк» форматов, ни о каком едином, типа СommerceML или Яндекс.XML, мечтать и не приходилось.

Разбиваем задачу на два этапа

1. Загрузка разнородных прайсов из прайс-листов и api поставщиков

Основная проблема загрузки прайсов заключается в том, что все они имеют абсолютно разную структуру данных, мало того структура данных может кардинальным образом меняться от одного листа к другому в одном прайсе! Вся идея заключается в том, что каким-то образом надо единожды описать правила для обработки структуры данных каждого прайса (и при необходимости для разных листов ИНДИВИДУАЛЬНО), а затем просто ежедневно или еженедельно закидывать прайсы в общую папку и система автоматически будет по заданным правилам читать данные. Проанализировав сотни прайсов поставщиков, мы определили функционал модуля [almaCMS function catalog.multiprice_priceconfig]:

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

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

2. Связь элементов из прайсов с элементами каталога сайта

Здесь вся загвоздка — также в количестве элементов:

Если в каталоге на сайте их 45 000, то из прайсов было загружено под 1 000 000 — многие позиции дублируются у поставщиков, также загружено много того, чего нет на сайте.

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

Что делать? Конечно, пишем модуль автоматизации синхронизации [almaCMS function catalog.multiprice_sync]. Первым делом пробуем связать элементы по общим полям типа артикула, штрихкода EAN, производителя и т. д. Да, эти поля есть не у всех элементов, но только по ним удалось автоматически и практически без усилий связать около 70% элементов. Далее пытаемся уже в полуавтоматическом режиме связать элементы по названию — оно есть у всех элементов, но у одного элемента может значительно различаться в разных прайсах и базе сайте.

Модуль пытается в интеллектуальном режиме сопоставить названия элементов друг с другом и результат сопоставления отображает пользователю (контент-менеджеру) в интерефейсе. И уже менеджер принимает решение, правильно ли они сопоставлены, и если нет, отменяет сцепку. Таким образом в итоге удалось связать еще 20% элементов затратами усилий одного контент-менеджера в один рабочий день.
Для оставшихся 10% был разработан специальный интерефейс, в котором для ускорения поиска нужных элементов использовались «умные» фильтры, поиск и выборки. Использование этого интуитивного, но функционального интерфейса позволило одному контент-менеджеру, мало разбирающемуся в данной тематике, полностью связать оставшиеся элементы за один месяц!

УРА! Каталог сайта полностью синхронизирован с поставщиками!

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

Что это дало:

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

Но номенклатура у поставщиков тоже все время меняется, добавляются новые позиции, в этом случае при очередной синхронизации система уведомляет менеджера либо об изменении формата прайса, либо о появлении новых позиций (особенно, если не удалось их автоматически связать с существующими на сайте). И далее менеджер уже самостоятельно принимает решение, что требует несоизмеримо мало времени по сравнению с остальной работой по синхронизации.

ГОТОВЫЙ ПРОЕКТ

santiko.ru

Каталог готов, осталось заполнить информационные страницы.
Наши копирайтеры взяли короткие интервью у нашего заказчика и написали статьи для разделов:

Но на этом наша работа не закончилась! Осталось еще пара важных пунктов!

ПРОДВИЖЕНИЕ

Итак, что же мы делали для оптимизации сайта?

МОБИЛЬНАЯ ВЕРСИЯ

Половина трафика в интернет магазинах (и не только) — это мобильный трафик. Поэтому правильное и удобное отображение сайта на смартфонах и планшетах очень важно.

Навигация по сайту (меню) — работает аналогично левому меню на ПК-версии.
Фильтры и сортировки при клике открываются аналогично меню во весь экран мобильного устройства.

ПЛАНЫ НА БУДУЩЕЕ

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

План включает:

СЕО-оптимизацию (семантическое ядро составило 1,5 миллиона запросов);
контекстную рекламу;
добавление дополнительного функционала на сайт.