Из каталога — в готовую таблицу

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

Интерактивная демонстрация · вымышленные товары

Как это устроено

Демонстрация на вымышленных данных

От карточек товаров к списку изменений

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

Сначала соберите таблицу из шести карточек каталога

Здесь появятся названия, цены и наличие

Данные извлекаются из встроенного HTML в вашем браузере

Исходные данные

<section class="catalog">
  <article data-product="linen-napkins">
    <h3 data-name>Салфетки   из льна, 2 шт</h3>
    <span data-price>1 290 ₽</span>
    <span data-stock>Нет в наличии</span>
  </article>
  <article data-product="ceramic-cup">
    <h3 data-name>Керамическая кружка</h3>
    <span data-price>790,00 руб.</span>
    <span data-stock>В наличии</span>
  </article>
  <article data-product="glass-vase">
    <h3 data-name>Ваза из стекла</h3>
    <span data-price>2 190 ₽</span>
    <span data-stock>В наличии</span>
  </article>
  <article data-product="wooden-tray">
    <h3 data-name>Деревянный поднос</h3>
    <span data-price>1 690 руб.</span>
    <span data-stock>В наличии</span>
  </article>
  <article data-product="wax-candle">
    <h3 data-name>Свеча в стекле</h3>
    <span data-price>990 ₽</span>
    <span data-stock>В наличии</span>
  </article>
  <article data-product="tea-towel">
    <h3 data-name>Кухонное полотенце</h3>
    <span data-price>640,00 ₽</span>
    <span data-stock>В наличии</span>
  </article>
</section>

Задача

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

Что я сделал

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

Результат

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

Польза для похожей задачи

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

Статус и границы демонстрации

Это самостоятельная демонстрация, не клиентский проект. К внешним сайтам она не обращается. Сбор по расписанию и доставка результата здесь не подключены; экономия времени не измерялась.