Как настроить парсинг сайта

Парсинг

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

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

Таким образом, выделяются три основных типа страниц для парсинга:

• Общая страница со списком категорий
• Страница категории каталога со списком товаров
• Страница товаров с параметрами товара

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

Быстрый старт

Парсинг будем настраивать на демо-каталоге https://kitnet.ru/parser/demo/. На странице Профили создаем новый профиль, выбираем обработчик парсер. На общих вкладках выбираем инфоблок для загрузки и переходим к основным настройкам на вкладке Основные настройки. Указываем первую страницу для парсинга (страницу товара) https://kitnet.ru/parser/demo/product/zagruzka-tovarov-parser-saytov-import.html в поле Путь страницы для парсинга.

Пропуская вкладку Разделы и пагинация, на вкладке Элемент указываем обязательное поле для названия элемента Селектор названия элемента h1:text. Это наиболее частый селектор для имени на страницах товара.

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

Товар не появляется

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

Настройки для страницы товара

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

Детальное описание

Открываем страницу товара в браузере. С помощью клавиши F12 открываем Инструменты разработчика для просмотра html кода страницы. С помощью кнопки поиска в коде, находим блок описания. Для этого нажимаем на кнопку в виде стрелки, после этого на странице кликаем на описание товара.

Описание находится в теге с классом card-desc Его и нужно будет указать, но таких тегов может быть несколько. Что бы с большей вероятностью получить именно тег с описанием, укажем классы его родительских тегов card-tabs и container

Итоговое значение селектора для поля Селектор детального описания будет .container .card-tabs .card-desc:html Здесь перед именем класса мы указали точку ".card-desc". Это обозначает, что это имя именно класса тега. Для конструкций вида class="card-desc".

Так же бывают конструкции вида id="product_price", это указанно имя идентификатора тега, не класса. В этом случае указывается символ решетки #, селектор будет #product_price

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

В следующем поле Тип детального описания выбираем html, так как мы сохраняем текст детального описания с html кодом, для форматирования текста.

Детальное изображение

Переходим к настройке парсинга детального изображения. Изображение для анонса пропускаем, так как по задумке оно будет создаваться сразу на сайте из детального изображения. Находим тег, в котором отображается изображение на странице товара. Тег img находится в теге с классом zoom

Селектором для выбора изображения будет .card-prod-left .zoom img:[src] Здесь img указан без точки в начале, так как это название самого тега. Для конструкций вида <img >, <div > селектор указывается без дополнительных символов. Селектор контента [src] после двоеточия, указан в квадратных скобках. Это указывает, что выбран источником данных один из атрибутов тега.

Пример: <img role="presentation" alt="info" src="/parser/demo/assets/img/product-im1.jpg" class="zoomImg" >, здесь атрибутами являются role, alt, src.

Определение товара в каталоге

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

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

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

В большинстве случаев достаточно указать определение по url, что бы парсинг происходил корректно.

Разделы товара

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

Селектором для выбора названий категорий будет .breadcrumbs .bx-breadcrumb-item a:text

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

Свойства

В свойства инфоблока можно сохранять любые данные. Добавим в товар его артикул. На вкладке Свойства выбираем свойство инфоблока в которое будет сохраняться артикул.

На странице товара находим тег в котором выводится значение артикула.

Селектором для парсинга артикула будет .card-prod .card-prod-right-sku b:text

Дополнительные изображения

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

Селектор дополнительных изображений .card-prod .card-prod-left-image-list a:[href] Конечным тегом мы указали a:[href], то есть ссылку на изображение, так как в списке изображений выводится предварительные изображения, и они чаще всего меньше по размеру.

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

Список свойств

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

Находим таблицу параметров и общий тег для одного свойства, объединяющий и название, и значение свойства. Нужно указать его селектор .characteristic table tr в поле Селектор списка свойств.

Важно тут не указывать контентную часть в конце :text, так как нужен тег целиком и с название, и с значением.

Для поля Селектор названия свойства указываем селектор для выбора имени параметра .name:text

Для поля Селектор значения свойства указываем селектор для выбора значения параметра .val:text

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

Цены товара

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

У тега цены указан идентификатор, в отличии от класса идентификатор обязательно должен быть уникальным для каждого тега. Поэтому для цены достаточно указать селектор только с идентификатором #product_price:text

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

Страница категории каталога со списком товаров

Ссылки на товары

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

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

Приступим к настройке. Первым делом, укажем как первоначальный источник данных страницу категории сайта - https://kitnet.ru/parser/demo/internet-magaziny/, вместо указанной ранее страницы товара.

Теперь парсер будет открывать эту страницу и искать там данные товара, как и ранее. Что бы ему указать искать ссылки на товары, нужно заполнить поле Селектор ссылок на элемент Открываем страницу https://kitnet.ru/parser/demo/internet-magaziny/, находим на ней теги ссылок на товар.

И указываем селектор .category-main-list .prod-item-title a:[href] в поле Селектор ссылок на элемент.

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

Пагинация

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

Селектор для ссылки будет .bx-pagination .bx-pag-next a:[href]. Его указываем в поле Селектор ссылок на следующую страницу.

Теперь парсер будет собирать товары со всех страниц раздела.