Микроразметка Schema.Org типового решения АСПРО Крутойшоп для 1С-Битрикс


типовое решение АСПРО Крутойшоп и микроразметка Schema.Org

В данной статье мы поговорим о внедрении микроразметки Schema.Org (с помощью модуля) в самое популярное платное типовое решение Маркета 1С-Битрикс среди интернет-магазинов (по состоянию на 23 июля) - Крутойшоп от АСПРО ( http://marketplace.1c-bitrix.ru/solutions/aspro.kshop/).

Внедрение производилось на версию магазина 1.0.28.

Внедрение проходило практически сразу после того как мне довелось внедрить микроразметку в TopShop, так что есть с чем сравнивать.

Во-первых, я хотел бы высказать своё личное впечатление от данного типового решения. CCatalogMeasure::getList и CIBlockElement::GetList в ШАБЛОНЕ компонента - это по-моему мнению зло если и не абсолютное, то уж очень к оному близкое.

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

Поэтому отбросим в сторону снобизм, закатаем рукава и займёмся своей задачей - микроразметкой.


Начнём с того, что есть 2 вида задач микроразметки:

  • Статические (1 раз положили компонент на страницу или в шаблон, настроили, заполнив параметры компонента, наслуждаемся)
  • Динамические (компонент должен использоваться в динамически формирующихся страницах, включая те, которые ещё не созданы, например новости и товары. Компонент должен принимать на вход данные из других компонентов/шаблонов и корректно их выводить. Должны обрабатываться ситуации, если каких-то данных нет)

Очевидно, что реализация статической микроразметки проще, поэтому мы начнём с неё, а потом полученные знания будем использоват ьв том числе в динамической микроразметке.


Статическая микроразметка

Адрес организации и Хлебные крошки

Наиболее подходящее место для размещение статической микроразметки - одна из включаемых областей шаблона. Так разместив 1 раз компоненты мы отобразим их на всём сайте.

Идеально подойдёт включаемая область с копирайтом в подвале сайта:

редактируем включаемую область копирайта в подвале сайта АСПРО Крутойшоп

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

Адрес файла включаемой области (для опытных пользователей) - /include/copyright.php

В открывшееся окно разделено на 2 части: левую рабочую область и правую панель компонентов. В Правой области в списке компонентов выбираем пункт "Компоненты Кофе-Дизайн", внутри "schema.org" и в открывшемся списке выбираем нужные нам компоненты Адреса и Хлебных Крошек. Перетаскиваем мышью компоненты из правой области компонентов в левую рабочую:

Добавляем в режиме визуального редактора 2 компонента: Адрес и Хлебные крошки

При двойном нажатии на компоненте откроется диалог редактирования параметров, в котором нам необходимо будет настроить оба компонента:

параметры компонента микроразметки Schema.Org Хлебных Крошек в визуальном редакторе

Для заполнения параметров компонента воспользуемся документацией (обратим внимание на выделенные красными значками пункты - они обязательны для заполнения):

  • Спецификация и документация для Адреса (заполняем все поля, какие сочтём нужным. Кашу маслом не испортишь, как не испортишь сайт микроразметкой)
  • Документация для Хлебных крошек (ничего особенного, компонент выводит данные автоматически, нужно лишь проверить правильность формирования цепочки, которая генерируется на основе файловой структуры и данных от компонентов на странице).

После настройки компонентов добавляем галочку "Не отображать на сайте":

параметр Не отображать на сайте

Она добавит компоненту параметр:

"SHOW" => "Y",

Это универсальный параметр, имеющийся у всех компонентом модуля "Микроразметка Schema.org". Значение Y говорит компоненту, что параметр не следует показывать обычным пользователям, но отдавать поисковым системам. Это позволяет вписать компонент в любой сайт без изменения его внешнего вида.

Микроразметка Адреса и Хлебных крошек готова.


Динамическая микроразметка

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

Схема действий всегда будет одинаковой:

  1. Берём пустую страницу (например создаём её в административной разделе) и открываем в визуальном редакторе;
  2. Размещаем на странице компонент микроразметки (аналогично тому как выше сделано для Адреса);
  3. Заполняем те параметры, которые в дальнейшем будут нами использоваться в динамическом компоненте, статическими заглушками (например #NAME# для параметра с названием товара, #PRICE# для цены и т.д.);
  4. Переключаемся в режим исходного кода для получения кода вызова компонента с нашими заглушками (см скриншот ниже);
    код вызова компонента микроразметки в режиме php
  5. Находим шаблон компонента, отвечающего за вывод в публичной части той сущности, которую мы хотим разметить (например, детальной страницы товара), копируем его (иначе наша правка может быть затёрта при обновлении решения) и открываем копию для редактирования в режиме php;
  6. Выбираем место для вставки вызова нашего компонента;
  7. Используя отладочный код (выводится незаметно для пользователей, так что не забываем в отладчике убирать display:none, а после завершения работ убрать отладку):
    <div style="display:none;">
    <? echo "<pre>"; print_r($arResult); echo "</pre>";?>
    </div>

    Выводим массив с данными компонента. Выбираем те ключи, которые содержат интересующие нас данные (например, название товара или его цену);
  8. Заменяем заглушку (#NAME#, #PRICE# и т.д.) на переменные с данными, использующимися шаблоном.


Товары и Цены

Зайдём в детальную страницу товара и в режиме редактирования нажимаем на стрелочку рядом с шестерёнкой, вызывающей параметры компонента над областью товара: получаем список компонентов, среди которых мы видим компоненты Каталога и Элемента Каталога Детально, это даёт нам понять, что в решении используется комплексный компонент каталога (внутри которого уже вызываются компоненты списка элементов каталога, детальной, фильтра и т.п.).

параметры компонента каталог на детальной странице товара

Рекомендуется скопировать шаблон перед внесением в него правок. Для этого скопируйте шаблон комплексного компонента "Каталог" (шаблон элемент каталога детально скопируется вместе с ним). Иначе комплексный компонент не будет знать о вашем кастомном компоненте детальной.

В нашем случае путь в шаблону компонента Элемент Каталога Детально будет выглядеть /bitrix/templates/aspro_kshop/components/bitrix/catalog.element/main_ito_15/

  • Зелёным - название шаблона сайта
  • Оранжевый - название компонента (Элемент каталога Детально)
  • Синий - название шаблона компонента

В процессе изучения решения было выявлено несколько видов товаров:

  1. 1 товар с 1 ценой и валютой
  2. 1 товар с несколькими товарными предложениями (в поле PRICE основного товара стоит минимальная цена одного из товарных предложений, валюта основного товара указана)
  3. 1 товар с несколькими товарными предложениями (в поле PRICE основного товара стоит НЕ минимальная цена одного из товарных предложений, валюта основного товара НЕ указана)

При этом у товара есть такой массив данных (в свойствах), как MINIMUM_PRICE. Валюты товарных предложений указаны всегда.

Наличие товара и товарных предложений рассчитывается по следующей формуле:

  • 1 товар "в наличии", если его остаток больше 0.
  • 1 товар "в наличии", если сумма его товарных предложений больше 0.
  • 1 товара "нет на складе", если его остаток 0, и сумма остатков его товарных предложений равна 0.
  • Товарное предложение "в наличии", если его остаток больше 0.
  • Товарного предложения "нет на складе", если его остаток 0.

Способы оплаты всегда фиксированы.

Рейтинг может быть, а может отсутствовать. Однако в массиве хранятся только суммарная оценка и количество голосов! Это означает, что среднюю оценку всегда необходимо вычислять (делить сумму баллов на число голосов).

К сожалению, это означает, что нам необходимо провести небольшую обработку данных. Для этого мы воспользуемся файлом /bitrix/templates/aspro_kshop/components/bitrix/catalog.element/main_ito_15/result_modifier.php шаблона компонента. Код, который в него будет помещён элементарен для разработчика (заранее извиняюсь перед бывалыми за мой code-style), однако боюсь даже с моими пояснениями будет абсолютно бесполезен для "не программистов". Прошу прощения. Вы можете воспользоваться моей наработкой "как есть", но не забудьте сперва сделать резервную копию!

Добавим в конце:

<?// Schema.Org START
$SchemaOrgRATINGVALUE = $arResult['PROPERTIES']['vote_sum']['VALUE']/$arResult['PROPERTIES']['vote_count']['VALUE'];
$arResult["SchemaOrg"]["RATINGVALUE"] = $SchemaOrgRATINGVALUE;

$totalCount = CKShop::GetTotalCount($arResult);
if ($totalCount=="0"){
   $SchemaOrgITEMAVAILABILITY = "OutOfStock";
}
else {
   $SchemaOrgITEMAVAILABILITY = "InStock";
}
$arResult["SchemaOrg"]["ITEMAVAILABILITY"] = $SchemaOrgITEMAVAILABILITY ;

if (!empty($arResult['OFFERS'])) {
$arResult["SchemaOrg"]["AGGREGATEOFFER"] = "Y";
$arResult["SchemaOrg"]["LOWPRICE"] = $arResult["PROPERTIES"]["MINIMUM_PRICE"]["VALUE"];
foreach($arResult["OFFERS"] as $key => $offer)
{
$arResult["SchemaOrg"]["AGGREGATEOFFER_PRICE"][$key] = $offer["CATALOG_PRICE_1"];
$arResult["SchemaOrg"]["AGGREGATEOFFER_PRICECURRENCY"][$key] = $arResult["OFFERS"][$key]["CATALOG_CURRENCY_1"];
}
if (empty($arResult['CATALOG_CURRENCY_1'])) 
{
$arResult["SchemaOrg"]["PRICECURRENCY"] = $arResult["OFFERS"][$key]["CATALOG_CURRENCY_1"];
}
else
{
$arResult["SchemaOrg"]["PRICECURRENCY"] = $arResult["CATALOG_CURRENCY_1"];
}
}
else {
$arResult["SchemaOrg"]["AGGREGATEOFFER"] = "N";
$arResult["SchemaOrg"]["PRICE"] = $arResult['CATALOG_PRICE_1'];
}
// Schema.Org END
?>

Тогда в шаблоне компонента /bitrix/templates/aspro_kshop/components/bitrix/catalog.element/main_ito_15/template.php в конце достаточно будет добавить вызов компонента:

<?$APPLICATION->IncludeComponent( "coffeediz:schema.org.Product",
"",
Array(
"COMPONENT_TEMPLATE" => ".default",
"SHOW" => "Y",
"AGGREGATEOFFER" =>  $arResult["SchemaOrg"]["AGGREGATEOFFER"],
"NAME" => $arResult['NAME'],
"DESCRIPTION" => $arResult['DETAIL_TEXT'],
"LOWPRICE" => $arResult["SchemaOrg"]["LOWPRICE"],
"AGGREGATEOFFER_PRICE" => $arResult["SchemaOrg"]["AGGREGATEOFFER_PRICE"],
"AGGREGATEOFFER_PRICECURRENCY" => $arResult["SchemaOrg"]["AGGREGATEOFFER_PRICECURRENCY"],
"PRICE" => $arResult["SchemaOrg"]["PRICE"],
"PRICECURRENCY" => $arResult["SchemaOrg"]["PRICECURRENCY"],
"ITEMAVAILABILITY" => $arResult["SchemaOrg"]["ITEMAVAILABILITY"],
"ITEMCONDITION" => "NewCondition",
"PAYMENTMETHOD" => array("VISA", "MasterCard", "ByBankTransferInAdvance", "Cash", "COD"),
"PARAM_RATING_SHOW" => "Y",
"RATING_SHOW" => "Y",
"RATINGVALUE" => $arResult["SchemaOrg"]["RATINGVALUE"],
"RAITINGCOUNT" => $arResult['PROPERTIES']['vote_count']['VALUE'],
"REVIEWCOUNT" => "",
"BESTRATING" => "5",
"WORSTRATING" => "1"
),
            false,
            array('HIDE_ICONS' => 'Y')

);?>


Изображения (товаров)

В отличие от предыдущего разобранного нами решения TopShop здесь все изображения уже собраны в 1 массив $arImages и мы можем пройти по нему в цикле, выбрав все картинки для микроразметки:

<?foreach($arImages as $i => $arImage){
$APPLICATION->IncludeComponent(
"coffeediz:schema.org.ImageObject",
"",
Array(
"COMPONENT_TEMPLATE" => ".default",
"SHOW" => "Y",
"CONTENTURL" => $arImage["BIG"]["src"],
"NAME" => $arImage["TITLE"],
"CAPTION" => $arImage["TITLE"],
"DESCRIPTION" => $arImage["DESCRIPTION"],
"HEIGHT" => $arImage["BIG"]["heigh"],
"WIDTH" => $arImage["BIG"]["width"],
"TRUMBNAIL_CONTENTURL" => $arImage["SMALL"]["src"],
"ITEMPROP" => "",
"REPRESENTATIVEOFPAGE" => "True",
"PARAM_RATING_SHOW" => "N"
),
            false,
            array('HIDE_ICONS' => 'Y')
);
}

?>

Заметьте, мы использовали практически все поля микроразметки, включая миниатюту! Уверен, Яндекс и Google будут довольны.


Новости и Статьи

Материалы этих 2 типом использую один и тот же компонент, но расположены в разных разделах:

  • /info/articles/
  • /company/news/

параметры комплексного компонента на странице с детальной новостью

Как мы видим, для вывода новостей/статей используется комплексный компонент "Новости", а для детальной страницы "Новость Детально". Скопируем комплексный компонент (по аналогии с комплексным компонентом каталога в предыдущем разделе).

копируем шаблон комплексного компонента новостей

Перейдём к редактированию шаблона компонента новости детально:

переход к редактированию шаблона детальной страницы новостей/статей

В нашем случае это будет файл /bitrix/templates/aspro_kshop/components/bitrix/news.detail/main_template/template.php

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

<?$APPLICATION->IncludeComponent( "coffeediz:schema.org.Article",
"",
Array(
"COMPONENT_TEMPLATE" => ".default",
"SHOW" => "Y",
"TYPE" => "",
"LEARNING_RESOURCE_TYPE" => "",
"NAME" => $arResult['NAME'],
"ARTICLEBODY" => $arResult['DETAIL_TEXT'],
"ABOUT" => $arResult['PREVIEW_TEXT'],
"GENRE" => "",
"ARTICLE_SECTION" => array(""),
"KEYWORDS" => array(""),
"IN_LANGUAGE" => "ru",
"DATA_PUBLISHED" => "",
"AUTHOR_TYPE" => "",
"IMAGEURL" => $arResult['DETAIL_PICTURE']['SRC'],
"PARAM_RATING_SHOW" => "N",
"IMAGE_NAME" => $arResult['DETAIL_PICTURE']['TITLE'],
"IMAGE_CAPTION" => $arResult['DETAIL_PICTURE']['TITLE'],
"IMAGE_DESCRIPTION" => $arResult['DETAIL_PICTURE']['TITLE'],
"IMAGE_HEIGHT" => $arResult['DETAIL_PICTURE']['HEIGHT'],
"IMAGE_WIDTH" => $arResult['DETAIL_PICTURE']['WIDTH'],
"IMAGE_TRUMBNAIL_CONTENTURL" => ""
)

);?>

Обратите внимание, в отличие от решения TopShop мы не выводим ДАТУ публикации. Это очень важное свойство (его наличие требуется для НОВОСТЕЙ, хотя и не обязательно для статей). Однако, к сожалению, дата уже выводится в публичной части и нам пришлось бы переформировать её запись в result_modifier.php, что добавило бы сложности и работы.


Заключение

В данной статей было описано полное внедрение универсальных типов микроразметки Schema.Org в типовое решение "Крутойшоп" от АСПРО 5 видов:

  • Хлебные крошки (Data-Vocabulary.org/Breadcrumb), только для Google
  • Адрес организации и контакты (schema.org/Organization), для Google и Яндекс
  • Изображения товаров (schema.org/ImageObject), для Яндекс.Картинок и Google.Изображений
  • Статьи (schema.org/Article), в первую очередь для Яндекса. Для Статей и Новостей.
  • Товары с товарными предложениями, ценами и рейтингом (schema.org/Product), для Google и Яндекс (но с учётом того, что если вы выгружаете YML для Яндекс.Маркета, то он получит приоритет перед микроразметкой!)

Результаты валидации страницы с 4 видами Микроразметки с помощью модуля Микроразметка Schema.org для 1С-Битрикс

Теперь на любой странице сайта могут встречаться от 2 до 4 типов микроразметки одновременной в зависимости от её контента. Это значительно увеличит шансы на красивый и привлекательный сниппет в поисковой выдаче для сайта!



Задойный А.В.


высшее образование дистанционное

Микроразметка Schema.Org типового решения АСПРО Крутойшоп для 1С-Битрикс

<p class="" style="text-align: left;"> <img width="270" alt="типовое решение АСПРО Крутойшоп и микроразметка Schema.Org" src="/upload/medialibrary/5ca/5caac6d1a0f7c057ff88a726fa52686c.png" height="135" style="margin-right: 10px;" title="типовое решение АСПРО Крутойшоп и микроразметка Schema.Org" align="left"> </p> <p class="" style="text-align: left;"> В данной статье мы поговорим о внедрении микроразметки Schema.Org (с помощью модуля) в самое популярное платное типовое решение Маркета 1С-Битрикс среди интернет-магазинов (по состоянию на 23 июля) - Крутойшоп от АСПРО ( <!--noindex--><a href="http://marketplace.1c-bitrix.ru/solutions/aspro.kshop/" rel="nofollow" target="_blank">http://marketplace.1c-bitrix.ru/solutions/aspro.kshop/</a><!--/noindex-->). </p> <p class="" style="text-align: left;"> Внедрение производилось на версию магазина 1.0.28. </p> <p class="" style="text-align: left;"> Внедрение проходило практически сразу после того как мне довелось <a href="http://xn--80ahcjeib4ac4d.xn--p1ai/information/microdesmidae_schema_org_standard_solutions_for_topshop_1c_bitrix/">внедрить микроразметку в TopShop</a>, так что есть с чем сравнивать. </p> <p class="" style="text-align: left;"> <i>Во-первых, я хотел бы высказать своё личное впечатление от данного типового решения. CCatalogMeasure::getList и CIBlockElement::GetList в ШАБЛОНЕ компонента - это по-моему мнению зло если и не абсолютное, то уж очень к оному близкое.</i> </p> <p class="" style="text-align: left;"> <i>Во-вторых, важно понимать, что несмотря на то что лично мне решение показалось чудовищной кашей, но тот громадный функционал, которое оно предоставляет пользователю (и то огромное количество позитивных отзывов и платных установок, что мы видим в маркете) явно говорит нам о том насколько решение востребовано.</i> </p> <p class="" style="text-align: left;"> Поэтому отбросим в сторону снобизм, закатаем рукава и займёмся своей задачей - микроразметкой. </p> <p class="" style="text-align: left;"> <br> </p> <p class="" style="text-align: left;"> Начнём с того, что есть 2 вида задач микроразметки: </p> <p class="" style="text-align: left;"> </p> <ul> <li class="" style="text-align: left;"> <b>Статические</b> (1 раз положили компонент на страницу или в шаблон, настроили, заполнив параметры компонента, наслуждаемся) </li> <li class="" style="text-align: left;"> <b>Динамические</b> (компонент должен использоваться в динамически формирующихся страницах, включая те, которые ещё не созданы, например новости и товары. Компонент должен принимать на вход данные из других компонентов/шаблонов и корректно их выводить. Должны обрабатываться ситуации, если каких-то данных нет) </li> </ul> <p class="" style="text-align: left;"> </p> <p class="" style="text-align: left;"> Очевидно, что реализация статической микроразметки проще, поэтому мы начнём с неё, а потом полученные знания будем использоват ьв том числе в динамической микроразметке. </p> <p class="" style="text-align: left;"> <br> </p> <h2 style="text-align: left;">Статическая микроразметка</h2> <h3 style="text-align: left;">Адрес организации и Хлебные крошки</h3> <p class="" style="text-align: left;"> Наиболее подходящее место для размещение статической микроразметки - одна из включаемых областей шаблона. Так разместив 1 раз компоненты мы отобразим их на всём сайте. </p> <p class="" style="text-align: left;"> Идеально подойдёт включаемая область с копирайтом в подвале сайта: </p> <p class="" style="text-align: left;"> <img width="262" alt="редактируем включаемую область копирайта в подвале сайта АСПРО Крутойшоп" src="/upload/medialibrary/ef1/ef10cb9f4618993b10c1e7764e031f74.png" height="181" title="редактируем включаемую область копирайта в подвале сайта АСПРО Крутойшоп"><br> </p> <p class="" style="text-align: left;"> Включаем режим правки в публичной части, наводим курсор мыши на область, видим появление конктекстного меню как на скриншоте выше, нажимаем кнопку "редактировать как html". </p> <p class="" style="text-align: left;"> Адрес файла включаемой области (для опытных пользователей) - /include/copyright.php </p> <p class="" style="text-align: left;"> В открывшееся окно разделено на 2 части: левую рабочую область и правую панель компонентов. В Правой области в списке компонентов выбираем пункт "Компоненты Кофе-Дизайн", внутри "schema.org" и в открывшемся списке выбираем нужные нам компоненты Адреса и Хлебных Крошек. Перетаскиваем мышью компоненты из правой области компонентов в левую рабочую: </p> <p class="" style="text-align: left;"> <img width="779" alt="Добавляем в режиме визуального редактора 2 компонента: Адрес и Хлебные крошки" src="/upload/medialibrary/72f/72f2e4761eb6fb0e94a8afb2a8e6838b.png" height="846" title="Добавляем в режиме визуального редактора 2 компонента: Адрес и Хлебные крошки"><br> </p> <p class="" style="text-align: left;"> При двойном нажатии на компоненте откроется диалог редактирования параметров, в котором нам необходимо будет настроить оба компонента: </p> <p class="" style="text-align: left;"> <img width="806" alt="параметры компонента микроразметки Schema.Org Хлебных Крошек в визуальном редакторе" src="/upload/medialibrary/873/87338ded7900950eaf4fad8251ebb6c0.png" height="584" title="параметры компонента микроразметки Schema.Org Хлебных Крошек в визуальном редакторе"> </p> <p class="" style="text-align: left;"> Для заполнения параметров компонента воспользуемся документацией (обратим внимание на выделенные красными значками пункты - они обязательны для заполнения): </p> <ul> <li class="" style="text-align: left;"><a href="http://xn--80ahcjeib4ac4d.xn--p1ai/information/about_microcathode_say_a_word_how_to_implement_microcathode_module_coffeediz_schema_on_the_website_u/#OrganizationAndPlace">Спецификация и документация для Адреса</a> (заполняем все поля, какие сочтём нужным. Кашу маслом не испортишь, как не испортишь сайт микроразметкой)</li> <li class="" style="text-align: left;"><a href="http://xn--80ahcjeib4ac4d.xn--p1ai/information/about_microcathode_say_a_word_how_to_implement_microcathode_module_coffeediz_schema_on_the_website_u/#breadcrumb">Документация для Хлебных крошек</a> (ничего особенного, компонент выводит данные автоматически, нужно лишь проверить правильность формирования цепочки, которая генерируется на основе файловой структуры и данных от компонентов на странице).</li> </ul> <p class="" style="text-align: left;"> После настройки компонентов добавляем галочку "Не отображать на сайте": </p> <p class="" style="text-align: left;"> <img width="207" alt="параметр Не отображать на сайте" src="/upload/medialibrary/6c6/6c67b3dc885fdbe07744f502c8f596ab.png" height="35" title="параметр Не отображать на сайте"><br> </p> <p class="" style="text-align: left;"> Она добавит компоненту параметр: </p> <code> "SHOW" =&gt; "Y",</code> <p class="" style="text-align: left;"> Это универсальный параметр, имеющийся у всех компонентом модуля "Микроразметка Schema.org". Значение Y говорит компоненту, что параметр не следует показывать обычным пользователям, но отдавать поисковым системам. Это позволяет вписать компонент в любой сайт без изменения его внешнего вида. </p> <p class="" style="text-align: left;"> Микроразметка Адреса и Хлебных крошек готова. </p> <p class="" style="text-align: left;"> <br> </p> <h2 style="text-align: left;">Динамическая микроразметка</h2> <p class="" style="text-align: left;"> Как уже было сказано выше, динамическая микроразметка формируется автоматически на основании данных, передаваемых другими компонентами, это значит, что нам придётся поработать с исходным кодом шаблонов компонентов. </p> <p class="" style="text-align: left;"> <b>Схема действий всегда будет одинаковой:</b> </p> <ol> <li style="text-align: left;"> Берём пустую страницу (например создаём её в административной разделе) и открываем в визуальном редакторе;</li> <li style="text-align: left;"> Размещаем на странице компонент микроразметки (аналогично тому как выше сделано для Адреса);</li> <li style="text-align: left;"> Заполняем те параметры, которые в дальнейшем будут нами использоваться в динамическом компоненте, статическими заглушками (например #NAME# для параметра с названием товара, #PRICE# для цены и т.д.);</li> <li style="text-align: left;"> Переключаемся в режим исходного кода для получения кода вызова компонента с нашими заглушками (<i>см скриншот ниже</i>); <br> <img width="772" alt="код вызова компонента микроразметки в режиме php" src="/upload/medialibrary/732/7321ba70fdcc9335d935806be427f3ed.png" height="675" title="код вызова компонента микроразметки в режиме php"></li> <li style="text-align: left;"> Находим шаблон компонента, отвечающего за вывод в публичной части той сущности, которую мы хотим разметить (например, детальной страницы товара), <b>копируем его</b> (иначе наша правка может быть затёрта при обновлении решения) и открываем копию для редактирования в режиме php;</li> <li style="text-align: left;"> Выбираем место для вставки вызова нашего компонента;</li> <li style="text-align: left;">Используя отладочный код (выводится незаметно для пользователей, так что не забываем в отладчике убирать <code>display:none</code>, а после завершения работ убрать отладку): <br> <code>&lt;div style="display:none;"&gt; <br> &lt;? echo "&lt;pre&gt;"; print_r($arResult); echo "&lt;/pre&gt;";?&gt;<br> &lt;/div&gt;</code><br> Выводим массив с данными компонента. Выбираем те ключи, которые содержат интересующие нас данные (например, название товара или его цену);</li> <li style="text-align: left;"> Заменяем заглушку (#NAME#, #PRICE# и т.д.) на переменные с данными, использующимися шаблоном.</li> </ol> <p class="" style="text-align: left;"> <br> </p> <p class="" style="text-align: left;"> Товары и Цены </p> <p class="" style="text-align: left;"> Зайдём в детальную страницу товара и в режиме редактирования нажимаем на стрелочку рядом с шестерёнкой, вызывающей параметры компонента над областью товара: получаем список компонентов, среди которых мы видим компоненты Каталога и Элемента Каталога Детально, это даёт нам понять, что в решении используется комплексный компонент каталога (внутри которого уже вызываются компоненты списка элементов каталога, детальной, фильтра и т.п.). </p> <p class="" style="text-align: left;"> <img width="771" alt="параметры компонента каталог на детальной странице товара" src="/upload/medialibrary/f55/f5567a104e4f032a815e8f1d13176e0f.png" height="536" title="параметры компонента каталог на детальной странице товара"><br> </p> <p class="" style="text-align: left;"> <b>Рекомендуется скопировать шаблон перед внесением в него правок. Для этого скопируйте шаблон комплексного компонента "Каталог" (шаблон элемент каталога детально скопируется вместе с ним). </b>Иначе комплексный компонент не будет знать о вашем кастомном компоненте детальной. </p> <p class="" style="text-align: left;"> В нашем случае путь в шаблону компонента Элемент Каталога Детально будет выглядеть /bitrix/templates/<span style="background-color: #00a650;">aspro_kshop</span>/components/bitrix/<span style="background-color: #f7941d;">catalog.element</span>/<span style="background-color: #0072bc;">main_ito_15</span>/ </p> <p class="" style="text-align: left;"> </p> <ul> <li class="" style="text-align: left;"> <span style="background-color: #00a650;">Зелёным</span> - название шаблона сайта </li> <li class="" style="text-align: left;"> <span style="background-color: #f7941d;">Оранжевый</span> - название компонента (Элемент каталога Детально) </li> <li class="" style="text-align: left;"> <span style="background-color: #0076a4;">Синий</span> - название шаблона компонента </li> </ul> <p class="" style="text-align: left;"> </p> <p class="" style="text-align: left;"> В процессе изучения решения было выявлено несколько видов товаров: </p> <p class="" style="text-align: left;"> </p> <ol> <li class="" style="text-align: left;"> 1 товар с 1 ценой и валютой </li> <li class="" style="text-align: left;"> 1 товар с несколькими товарными предложениями (в поле PRICE основного товара стоит минимальная цена одного из товарных предложений, валюта основного товара указана) </li> <li class="" style="text-align: left;">1 товар с несколькими товарными предложениями (в поле PRICE основного товара стоит НЕ минимальная цена одного из товарных предложений, валюта основного товара НЕ указана) </li> </ol> <p class="" style="text-align: left;"> </p> <p class="" style="text-align: left;"> При этом у товара есть такой массив данных (в свойствах), как MINIMUM_PRICE. Валюты товарных предложений указаны всегда. </p> <p class="" style="text-align: left;"> Наличие товара и товарных предложений рассчитывается по следующей формуле: </p> <p class="" style="text-align: left;"> </p> <ul> <li class="" style="text-align: left;"> 1 товар "в наличии", если его остаток больше 0. </li> <li class="" style="text-align: left;"> 1 товар "в наличии", если сумма его товарных предложений больше 0. </li> <li class="" style="text-align: left;"> 1 товара "нет на складе", если его остаток 0, и сумма остатков его товарных предложений равна 0. </li> <li class="" style="text-align: left;"> Товарное предложение "в наличии", если его остаток больше 0. </li> <li class="" style="text-align: left;"> Товарного предложения "нет на складе", если его остаток 0. </li> </ul> <p class="" style="text-align: left;"> </p> <p class="" style="text-align: left;"> Способы оплаты всегда фиксированы. </p> <p class="" style="text-align: left;"> Рейтинг может быть, а может отсутствовать. Однако в массиве хранятся только суммарная оценка и количество голосов! <b>Это означает, что среднюю оценку всегда необходимо вычислять</b> (делить сумму баллов на число голосов). </p> <p class="" style="text-align: left;"> К сожалению, это означает, что нам необходимо провести небольшую обработку данных. Для этого мы воспользуемся файлом /bitrix/templates/aspro_kshop/components/bitrix/catalog.element/main_ito_15/result_modifier.php шаблона компонента. <u>Код, который в него будет помещён элементарен для разработчика (заранее извиняюсь перед бывалыми за мой code-style), однако боюсь даже с моими пояснениями будет абсолютно бесполезен для "не программистов"</u>. Прошу прощения. Вы можете воспользоваться моей наработкой "как есть", но не забудьте сперва сделать резервную копию! </p> <p class="" style="text-align: left;"> Добавим в конце: </p> <code>&lt;?// Schema.Org START<br> $SchemaOrgRATINGVALUE = $arResult['PROPERTIES']['vote_sum']['VALUE']/$arResult['PROPERTIES']['vote_count']['VALUE'];<br> $arResult["SchemaOrg"]["RATINGVALUE"] = $SchemaOrgRATINGVALUE;<br> <br> $totalCount = CKShop::GetTotalCount($arResult);<br> if ($totalCount=="0"){<br>    $SchemaOrgITEMAVAILABILITY = "OutOfStock";<br> }<br> else {<br>    $SchemaOrgITEMAVAILABILITY = "InStock";<br> }<br> $arResult["SchemaOrg"]["ITEMAVAILABILITY"] = $SchemaOrgITEMAVAILABILITY ;<br> <br> if (!empty($arResult['OFFERS'])) {<br> $arResult["SchemaOrg"]["AGGREGATEOFFER"] = "Y";<br> $arResult["SchemaOrg"]["LOWPRICE"] = $arResult["PROPERTIES"]["MINIMUM_PRICE"]["VALUE"];<br> foreach($arResult["OFFERS"] as $key =&gt; $offer)<br> {<br> $arResult["SchemaOrg"]["AGGREGATEOFFER_PRICE"][$key] = $offer["CATALOG_PRICE_1"];<br> $arResult["SchemaOrg"]["AGGREGATEOFFER_PRICECURRENCY"][$key] = $arResult["OFFERS"][$key]["CATALOG_CURRENCY_1"];<br> }<br> if (empty($arResult['CATALOG_CURRENCY_1'])) <br> {<br> $arResult["SchemaOrg"]["PRICECURRENCY"] = $arResult["OFFERS"][$key]["CATALOG_CURRENCY_1"];<br> }<br> else<br> {<br> $arResult["SchemaOrg"]["PRICECURRENCY"] = $arResult["CATALOG_CURRENCY_1"];<br> }<br> }<br> else {<br> $arResult["SchemaOrg"]["AGGREGATEOFFER"] = "N";<br> $arResult["SchemaOrg"]["PRICE"] = $arResult['CATALOG_PRICE_1'];<br> }<br> // Schema.Org END<br> ?&gt;</code> <p class="" style="text-align: left;"> Тогда в шаблоне компонента /bitrix/templates/aspro_kshop/components/bitrix/catalog.element/main_ito_15/template.php в конце достаточно будет добавить вызов компонента: </p> <code>&lt;?$APPLICATION-&gt;IncludeComponent( "coffeediz:schema.org.Product",<br> "",<br> Array(<br> "COMPONENT_TEMPLATE" =&gt; ".default",<br> "SHOW" =&gt; "Y",<br> "AGGREGATEOFFER" =&gt;  $arResult["SchemaOrg"]["AGGREGATEOFFER"],<br> "NAME" =&gt; $arResult['NAME'],<br> "DESCRIPTION" =&gt; $arResult['DETAIL_TEXT'],<br> "LOWPRICE" =&gt; $arResult["SchemaOrg"]["LOWPRICE"],<br> "AGGREGATEOFFER_PRICE" =&gt; $arResult["SchemaOrg"]["AGGREGATEOFFER_PRICE"],<br> "AGGREGATEOFFER_PRICECURRENCY" =&gt; $arResult["SchemaOrg"]["AGGREGATEOFFER_PRICECURRENCY"],<br> "PRICE" =&gt; $arResult["SchemaOrg"]["PRICE"],<br> "PRICECURRENCY" =&gt; $arResult["SchemaOrg"]["PRICECURRENCY"],<br> "ITEMAVAILABILITY" =&gt; $arResult["SchemaOrg"]["ITEMAVAILABILITY"],<br> "ITEMCONDITION" =&gt; "NewCondition",<br> "PAYMENTMETHOD" =&gt; array("VISA", "MasterCard", "ByBankTransferInAdvance", "Cash", "COD"),<br> "PARAM_RATING_SHOW" =&gt; "Y",<br> "RATING_SHOW" =&gt; "Y",<br> "RATINGVALUE" =&gt; $arResult["SchemaOrg"]["RATINGVALUE"],<br> "RAITINGCOUNT" =&gt; $arResult['PROPERTIES']['vote_count']['VALUE'],<br> "REVIEWCOUNT" =&gt; "",<br> "BESTRATING" =&gt; "5",<br> "WORSTRATING" =&gt; "1"<br> ),<br>             false,<br>             array('HIDE_ICONS' =&gt; 'Y')<br> <br> );?&gt;</code> <p class="" style="text-align: left;"> <br> </p> <h3 style="text-align: left;"> Изображения (товаров) </h3> <p class="" style="text-align: left;"> В отличие от предыдущего разобранного нами решения TopShop здесь все изображения уже собраны в 1 массив $arImages и мы можем пройти по нему в цикле, выбрав все картинки для микроразметки: </p> <code>&lt;?foreach($arImages as $i =&gt; $arImage){<br> $APPLICATION-&gt;IncludeComponent(<br> "coffeediz:schema.org.ImageObject",<br> "",<br> Array(<br> "COMPONENT_TEMPLATE" =&gt; ".default",<br> "SHOW" =&gt; "Y",<br> "CONTENTURL" =&gt; $arImage["BIG"]["src"],<br> "NAME" =&gt; $arImage["TITLE"],<br> "CAPTION" =&gt; $arImage["TITLE"],<br> "DESCRIPTION" =&gt; $arImage["DESCRIPTION"],<br> "HEIGHT" =&gt; $arImage["BIG"]["heigh"],<br> "WIDTH" =&gt; $arImage["BIG"]["width"],<br> "TRUMBNAIL_CONTENTURL" =&gt; $arImage["SMALL"]["src"],<br> "ITEMPROP" =&gt; "",<br> "REPRESENTATIVEOFPAGE" =&gt; "True",<br> "PARAM_RATING_SHOW" =&gt; "N"<br> ),<br>             false,<br>             array('HIDE_ICONS' =&gt; 'Y')<br> );<br> }<br> <br> ?&gt;</code> <p class="" style="text-align: left;"> Заметьте, мы использовали практически все поля микроразметки, включая миниатюту! Уверен, Яндекс и Google будут довольны. </p> <p class="" style="text-align: left;"> <br> </p> <h3 style="text-align: left;"> Новости и Статьи </h3> <p class="" style="text-align: left;"> Материалы этих 2 типом использую один и тот же компонент, но расположены в разных разделах: </p> <p class="" style="text-align: left;"> </p> <ul> <li class="" style="text-align: left;"> /info/articles/<br> </li> <li class="" style="text-align: left;"> /company/news/ </li> </ul> <p class="" style="text-align: left;"> <img width="456" alt="параметры комплексного компонента на странице с детальной новостью" src="/upload/medialibrary/b74/b74c36ee049ef124aededae53d78da99.PNG" height="234" title="параметры комплексного компонента на странице с детальной новостью"><br> </p> <p class="" style="text-align: left;"> Как мы видим, для вывода новостей/статей используется комплексный компонент "Новости", а для детальной страницы "Новость Детально". Скопируем комплексный компонент (по аналогии с комплексным компонентом каталога в предыдущем разделе). </p> <p class="" style="text-align: left;"> <img width="569" alt="копируем шаблон комплексного компонента новостей" src="/upload/medialibrary/aff/aff2fae7bd25f4026511e2113c0e681a.PNG" height="203" title="копируем шаблон комплексного компонента новостей"><br> </p> <p class="" style="text-align: left;"> Перейдём к редактированию шаблона компонента новости детально: </p> <p class="" style="text-align: left;"> <img width="553" alt="переход к редактированию шаблона детальной страницы новостей/статей" src="/upload/medialibrary/43a/43aa2108fa06d499f5431bd706e9ed63.PNG" height="220" title="переход к редактированию шаблона детальной страницы новостей/статей"><br> </p> <p class="" style="text-align: left;"> В нашем случае это будет файл /bitrix/templates/aspro_kshop/components/bitrix/news.detail/main_template/template.php </p> <p class="" style="text-align: left;"> Добавим в конце шаблона вызов компонента микроразметки "Статья", поставив для всех интересующих нас параметров переменные, содержащие нужные нам данные (по аналогии с товаром, используя отладочный вывод массива данных): </p> <code>&lt;?$APPLICATION-&gt;IncludeComponent( "coffeediz:schema.org.Article",<br> "",<br> Array(<br> "COMPONENT_TEMPLATE" =&gt; ".default",<br> "SHOW" =&gt; "Y",<br> "TYPE" =&gt; "",<br> "LEARNING_RESOURCE_TYPE" =&gt; "",<br> "NAME" =&gt; $arResult['NAME'],<br> "ARTICLEBODY" =&gt; $arResult['DETAIL_TEXT'],<br> "ABOUT" =&gt; $arResult['PREVIEW_TEXT'],<br> "GENRE" =&gt; "",<br> "ARTICLE_SECTION" =&gt; array(""),<br> "KEYWORDS" =&gt; array(""),<br> "IN_LANGUAGE" =&gt; "ru",<br> "DATA_PUBLISHED" =&gt; "",<br> "AUTHOR_TYPE" =&gt; "",<br> "IMAGEURL" =&gt; $arResult['DETAIL_PICTURE']['SRC'],<br> "PARAM_RATING_SHOW" =&gt; "N",<br> "IMAGE_NAME" =&gt; $arResult['DETAIL_PICTURE']['TITLE'],<br> "IMAGE_CAPTION" =&gt; $arResult['DETAIL_PICTURE']['TITLE'],<br> "IMAGE_DESCRIPTION" =&gt; $arResult['DETAIL_PICTURE']['TITLE'],<br> "IMAGE_HEIGHT" =&gt; $arResult['DETAIL_PICTURE']['HEIGHT'],<br> "IMAGE_WIDTH" =&gt; $arResult['DETAIL_PICTURE']['WIDTH'],<br> "IMAGE_TRUMBNAIL_CONTENTURL" =&gt; ""<br> )<br> <br> );?&gt;</code> <p class="" style="text-align: left;"> <i>Обратите внимание, в отличие от решения TopShop мы не выводим ДАТУ публикации. Это очень важное свойство (его наличие требуется для НОВОСТЕЙ, хотя и не обязательно для статей). Однако, к сожалению, дата уже выводится в публичной части и нам пришлось бы переформировать её запись в result_modifier.php, что добавило бы сложности и работы.</i> </p> <p class="" style="text-align: left;"> <br> </p> <h2 style="text-align: left;"> Заключение </h2> <p class="" style="text-align: left;"> В данной статей было описано полное внедрение универсальных типов микроразметки Schema.Org в типовое решение "Крутойшоп" от АСПРО 5 видов: </p> <ul> <li class="" style="text-align: left;"> Хлебные крошки (Data-Vocabulary.org/Breadcrumb), только для Google </li> <li class="" style="text-align: left;"> Адрес организации и контакты (schema.org/Organization), для Google и Яндекс</li> <li class="" style="text-align: left;">Изображения товаров (schema.org/ImageObject), для Яндекс.Картинок и Google.Изображений</li> <li class="" style="text-align: left;">Статьи (schema.org/Article), в первую очередь для Яндекса. Для Статей и Новостей.</li> <li class="" style="text-align: left;">Товары с товарными предложениями, ценами и рейтингом (schema.org/Product), для Google и Яндекс (но с учётом того, что если вы выгружаете YML для Яндекс.Маркета, то он получит приоритет перед микроразметкой!)</li> </ul> <p class="" style="text-align: left;"> <img width="827" alt="Результаты валидации страницы с 4 видами Микроразметки с помощью модуля Микроразметка Schema.org для 1С-Битрикс" src="/upload/medialibrary/69e/69ed70c863bab681962779f6d86f8e91.png" height="594" title="Результаты валидации страницы с 4 видами Микроразметки с помощью модуля Микроразметка Schema.org для 1С-Битрикс"><br> </p> <p class="" style="text-align: left;"> Теперь на любой странице сайта могут встречаться от 2 до 4 типов микроразметки одновременной в зависимости от её контента. Это значительно увеличит шансы на красивый и привлекательный сниппет в поисковой выдаче для сайта! </p> <p class="" style="text-align: left;"> <br> </p> <p class="" style="text-align: left;"> <br> </p> <p style="text-align: right;"> <a href="http://plus.google.com/+АлексейЗадойный?rel=author" target="_blank">Задойный А.В.</a> </p>

Возврат к списку

Яндекс.Метрика