Сравнение товаров
Карточка товара описывает один объект, но посетитель часто принимает решение между несколькими. Если заставить его запоминать характеристики на разных страницах, сравнение превращается в упражнение на память. В этом уроке построим общую таблицу двух цепей из магазина «ВелоМастер» и отделим различие моделей от различия предложений.
Продолжаем вымышленный каталог предыдущего урока: пять SKU и четыре модели. У VM-C9 цена 1290 RUB и остаток 12, у VM-C10 — 1590 RUB и нулевой остаток. Указанные цены и характеристики придуманы для обучения, состояние относится к учебному снимку 11 октября 2026 года. Реальные изделия, продажи и поисковые показатели не исследовались. Исходники главы находятся в lesson-17 архива курса.
Общие поля делают различие видимым
Сначала определим вопрос сравнения. Посетитель хочет подобрать цепь для уже имеющейся трансмиссии. Ему нужны совместимость, комплектация, длина и возможность заказа. Фраза «премиальная цепь» не отвечает на эти вопросы. Не будем добавлять такую оценку в таблицу только потому, что одна модель дороже.
| Поле | VM-C9 | VM-C10 |
|---|---|---|
| Учебное назначение | 9-скоростная трансмиссия | 10-скоростная трансмиссия |
| Число звеньев | 116 | 116 |
| Комплектация | Замок включён | Замок включён |
| Цена товара | 1290 RUB | 1590 RUB |
| Состояние предложения | Можно заказать после подтверждения | Временно нет, заказ не принимается |
Таблица использует одинаковые единицы и названия. Если одна карточка говорит «116», а другая «стандартная длина», сравнение теряет смысл: неизвестное значение начинает выглядеть эквивалентным известному. Для отсутствующей характеристики укажите «нет подтверждённых данных» и поставьте редакционную задачу. Не заполняйте пробел догадкой из названия модели.
Наша таблица не является техническим заключением о совместимости реальных цепей. Число скоростей здесь — заданное свойство учебного товара. В настоящем каталоге потребуются сведения производителя и ограничения конкретной системы. Если пользователь не знает свой комплект, следующим действием может стать уточнение или диагностика, а не автоматическая покупка самого дешёвого столбца.
Разница в цене составляет 300 RUB. Она сама по себе не означает лучший ресурс, меньший вес или более надёжную работу. Для таких выводов нужны сопоставимые данные, которых в нашей модели нет. Поэтому объяснение под таблицей связывает выбор с назначением, а не превращает ценовой порядок в рейтинг качества.
Модель и предложение обновляются отдельно
Назначение и комплектация принадлежат описанию изделия. Цена, остаток и возможность заказа принадлежат текущему предложению. Это различие помогает сопровождать страницу: изменение остатка не должно заставлять редактора переписывать техническую часть сравнения.
В исходниках сохраним правила строк отдельным документом. Пример не является форматом поисковой системы:
{
"comparison": "chains",
"skus": ["VM-C9", "VM-C10"],
"fields": ["speeds", "links", "included", "price_rub", "stock_units"],
"selection_rule": "confirm drivetrain before purchase"
}Такой список задаёт предмет сравнения и порядок полей. Значения читаются из того же реестра, что питает карточки. Отдельная вручную набранная цена в таблице создала бы второй источник истины: прайс обновили бы, а сравнение осталось прежним. Для небольшого статического сайта допустима ручная публикация, но тогда связь страниц и ответственность за повторную сверку должны быть записаны.
Рассмотрим ошибочный вариант: рядом с VM-C10 стоит кнопка «Купить», хотя заказ при нулевом остатке не принимается. Таблица характеристик остаётся верной, а предложение становится ложным. Исправление должно затронуть кнопку и соседний текст, а не только красный значок наличия. Нужен понятный следующий шаг: вернуться позже или уточнить подходящий вариант, без обещанного срока поставки.
Сравнение возвращает к карточкам
Каждый столбец должен иметь ссылку на подробную страницу. Она даёт комплектацию, условия получения и другие сведения, которые неудобно помещать в узкую таблицу. На самостоятельной странице сравнения ссылки оформляются обычными элементами HTML:
<a href="https://velomaster.example/shop/products/vm-c9/">Цепь VM-C9</a>
<a href="https://velomaster.example/shop/products/vm-c10/">Цепь VM-C10</a>Это только фрагмент учебного документа; домен .example не является работающим магазином. Реестр ссылок в архиве позволяет редактору связать будущий макет с известными карточками. В нашем уроке навигация не выполнялась и техническая доступность страниц магазина не подтверждалась запросами.
Google рекомендует делать товары достижимыми по ссылкам из структуры магазина. Руководство по навигации. Решение добавить именно сравнение двух цепей — наша редакционная рекомендация: оно помогает заданной задаче посетителя, но не гарантирует отдельный поисковый спрос или индексацию документа.
Не создавайте автоматически страницу для каждой возможной пары SKU. Пять товаров уже дают несколько комбинаций, а тысяча — сотни тысяч. Многие пары бессмысленны: цепь и шлем не являются альтернативами одного выбора. Даже две похожие цепи могут не требовать отдельного постоянного URL, если таблицы на странице категории достаточно.
Проверка смысла сравнения
Перенесём тот же приём на шлем VM-H1. У вариантов M и L одинаковая цена 2990 RUB, но разные диапазоны размера: 54–58 и 58–62 сантиметра. Здесь сравнение должно помочь увидеть размер и выбранный SKU, а не создать две конкурирующие страницы с разными обещаниями. Для нашей модели достаточно одной карточки с явно выбранным вариантом. Остаток четыре для M нельзя складывать с двумя для L и сообщать покупателю, что его конкретный размер есть в шести экземплярах.
Для длинной таблицы сначала оставьте существенные строки, а подробные описания перенесите в карточки. Отдельный общий столбец «лучший выбор» потребовал бы критериев, которых мы пока не определили. Просмотрите текст без выделения цветом: должно быть понятно, какой столбец описывает какой SKU и к чему относится слово «недоступна». Одна подсветка зелёным не заменяет названия состояния.
Для самостоятельного чтения возьмите посетителя с известной 9-скоростной системой. Таблица должна вести к уточнению совместимости VM-C9 и её карточке. Посетителю с 10-скоростной системой нельзя предложить VM-C9 только потому, что VM-C10 закончилась. Дешевизна и наличие не отменяют исходную техническую потребность.
Теперь представим, что человек ищет установку, а не только деталь. Цена 1290 RUB относится к товару; работа из предыдущих глав стоит отдельно 1200 RUB. Согласованный учебный заказ с VM-C9 даёт 2490 RUB без дополнительной диагностики. Сравнение не должно молча включать труд в один столбец и исключать из другого.
Проверяемый редакционный результат — обе карточки и таблица называют одни модели, одинаковые характеристики и текущие условия. Ни один неизвестный параметр не подменён рекламной оценкой. Это основание для следующего урока: таблица показывает варианты, а руководство по выбору объяснит, какие сведения человеку нужно узнать о своей задаче, прежде чем сравнивать предложения.