Реализация удобного выбора характеристик товаров в карточке интернет-магазина на 1С-Битрикс

Ситуация

У заказчика работал интернет-магазин на 1С-Битрикс. В 1С учет товаров не обновлялся уже много лет. Из-за этого один и тот же товар с разными характеристиками (цвет, размер, материал и другие параметры) создавался как отдельные номенклатурные позиции. Вместо одного товара заводились десятки разных.

Штатный механизм торговых предложений в Битриксе было невозможно использовать из-за устаревшей версии 1С и структуры номенклатуры.

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

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

Задача

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

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

Решение

Проанализировали структуру данных в 1С

Мы внимательно изучили XML ID товаров, которые приходят из 1С. Оказалось, что у всех вариантов одного товара эта строка имеет общую часть: одинаковый цифровой префикс и буквенный суффикс. На основе этого мы построили точную маску поиска и с помощью регулярных выражений научились автоматически находить все родственные артикулы.

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

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

Учли масштабирование и настроили динамическую подгрузку данных

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

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

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

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

Результат

Раньше покупатель видел только один вариант товара и тратил время на поиск нужной позиции по разным карточкам.

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

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

Длительность. Реализация задачи заняла 2 недели, включая анализ, разработку, тестирование и согласования.

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