Склейка карточек товара с разными характеристиками на vivatek.ru

Задача

На vivatek.ru каждый вариант товара заводился отдельной карточкой: iPhone 15 в чёрном, белом и синем цвете — это три разные позиции каталога, MacBook на 256 и 512 ГБ — ещё две. Для контент-менеджера так проще заводить, но покупатель попадает в тупик: он открывает «iPhone 15 чёрный», видит нужную модель не в том цвете и вынужден возвращаться в листинг, чтобы вручную искать соседнюю карточку с тем же телефоном. Ощущение единого товара с выбором цвета и памяти рассыпается на десяток почти одинаковых страниц, между которыми нет никакой связи.

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

Что такое склейка карточек

Склейка — это объединение карточек товара с разными характеристиками в одну группу. Вместо десяти отдельных карточек iPhone разных цветов покупатель видит одну карточку с выбором цвета и памяти, а переключение свойства не уводит его на другую страницу, а перестраивает текущую. Важно, что физически в InSales товары остаются отдельными позициями — со своими остатками, ценами и складским учётом; склейка добавляет над ними логический слой группировки, не ломая привычную работу с каталогом в админке.

Как реализовали

Первым делом нужно было понять, как система должна догадываться, что «iPhone 15 чёрный» и «iPhone 15 синий» — это один и тот же товар в разных исполнениях. Универсального признака в каталоге не было, поэтому мы заложили не один жёсткий способ сопоставления, а три взаимодополняющих — под разную структуру данных, которая уже сложилась у разных групп товаров на vivatek.ru.

Три способа склейки

• По артикулу — товары с похожими артикулами объединяются (например, iPhone-15-BLK, iPhone-15-WHT)
• По дополнительному полю — создается поле "Группа" с одинаковым значением для склейки
• По параметрам — товары с одинаковыми параметрами (модель, бренд) объединяются

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

Автоматическое обновление

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

• Название товара
• Код товара
• URL в адресной строке
• Характеристики в карточке

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

Результат

• Товары с разными характеристиками объединены в группы
• Удобный выбор цвета и памяти в одной карточке
• Автоматическое обновление названия, кода, URL
• Применяется к новым товарам автоматически