Семантическая разметка товаров в интернет-магазине на примере VirtueMart 2

"Все аспекты самостоятельного создания и продвижения сайтов
от практика с многолетним опытом." — блог Рудь Сергея
info@site-on.net
Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!
04.03.2014

Добрый день, уважаемые читатели блога Site on! В прошлой статье мы обсудили роль микроразметки в продвижении сайтов, сегодня предлагаю рассмотреть на практике частный случай - семантическую разметку товаров на примере VirtueMart 2.

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

Итак, встречайте нашего подопытного кролика - украинский интернет-магазин Rshop.lg.ua.

Давайте перейдем в любую карточку товара, например, в эту http://rshop.lg.ua/snpch/snpch-hp-deskjet-f2483-patron-detail. Обратите внимание, что в этом магазине отсутствует система рейтинга товаров, однако в прошлой статье я уже написал, как правильно размечать рейтинг. Кстати, кому не терпеться узнать результат, проверьте этот или любой другой товар в инструменте проверки от Гугл:

инструмент проверки от Гугл

А я тем временем продолжаю. Мы в карточке товара, какой ход наших мыслей? Нужно найти наиболее подходящую схему..., естественно, это схема: http://schema.org/Product. Теперь нам нужно указать эту схему в коде нашей карточки товара. Для этого заходим в

\templates\ваш_шаблон\html\com_virtuemart\productdetails\

Если в вашем шаблоне такой папки (или нужного файла) нет, тогда заходим в

\components\com_virtuemart\views\productdetails\tmpl\

default.php

Ищем div, в который обернут весь товар и добавляем в его атрибуты нужную схему.

Было:

<div class="productdetails-view productdetails">

Стало:

<div class="productdetails-view productdetails" itemscope itemtype="http://schema.org/Product">

Если такого div по какой-то причине нет в вашем шаблоне, то не стесняйтесь создавать его самим. В таком случае вместо div оборачивайте все в span, так как он не содержит стандартных стилей, и имеет значительно меньше шансов "сломать" ваш макет.

Далее нужно найти и обозначить имя товара.

В моём случае было:

<h1><?php echo $this->product->product_name ?></h1>

Стало:

<h1 itemprop="name"><?php echo $this->product->product_name ?></h1>

Если у вас не получается найти какой-то элемент сразу в файле, тогда сначала найдите его с помощью просмотра элементов в браузере, затем ищете этот участок по его фрагменту (например, скопируйте только его класс) в файле используя CTRL + F.

Теперь укажем описание товара. Ищите тег с классом product-description - это может быть любой тег (а может в вашем шаблоне такого класса вообще не будет), всё всегда зависит от шаблона, но в основном это тег div.

В моём случае было:

<div class="product-description">

Стало:

<div class="product-description" itemprop="description">

Последнее, что осталось сделать в файле default.php – это указать аналогичные по функциональности товары, другими словами, товары, которые находятся в той же категории что и текущий товар:

похожие товары

Ищем элемент с классом product-neighbours, находим вот такой страшный участок кода:

// Product Navigation
if (VmConfig::get('product_navigation', 1)) {
?>
    <div class="product-neighbours">
    <h5>Данный товар лежит на одной полке с</h5>
    <?php
    if (!empty($this->product->neighbours ['previous'][0])) {
    $prev_link = JRoute::_('index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=' . $this->product->neighbours ['previous'][0] ['virtuemart_product_id'] . '&virtuemart_category_id=' . $this->product->virtuemart_category_id, FALSE);
    echo JHTML::_('link', $prev_link, $this->product->neighbours ['previous'][0]
        ['product_name'], array('class' => 'previous-page'));
    }
    if (!empty($this->product->neighbours ['next'][0])) {
    $next_link = JRoute::_('index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=' . $this->product->neighbours ['next'][0] ['virtuemart_product_id'] . '&virtuemart_category_id=' . $this->product->virtuemart_category_id, FALSE);
    echo JHTML::_('link', $next_link, $this->product->neighbours ['next'][0] ['product_name'], array('class' => 'next-page'));
    }
    ?>
    <div class="clear"></div>
    </div>
<?php } // Product Navigation END

Обратите внимание на эти два аналогичных участка кода:

array('class' => 'previous-page')

и

array('class' => 'next-page')

Их нужно заменить на:

array('class' => 'previous-page','itemprop' => 'name')

и

array('class' => 'next-page','itemprop' => 'name')

Но в этом участке мы ещё не закончили. Теперь тегу с классом product-neighbours необходимо добавить правильное свойство и схему.

Было:

<div class="product-neighbours">

Стало:

<div class="product-neighbours" itemprop="isSimilarTo" itemscope itemtype="http://schema.org/Product">

Поздравляю вас, более половины пути мы уже прошли, переходим в следующий файл.

default_images.php

Пришло время микроразметки для фотографий товара. Для этого переходим в файл

\templates\ваш_шаблон\html\com_virtuemart\productdetails\default_images.php

То есть работаем в текущей папке, или в

\components\com_virtuemart\views\productdetails\tmpl\default_images.php

Если в вашем шаблоне нет предыдущего.

Находим следующий участок кода:

echo $image->displayMediaFull("",true,"rel='vm-additional-images'");

И меняем его на:

echo $image->displayMediaFull("itemprop=\"image\"",true,"rel='vm-additional-images'");

Этот участок кода есть в стандартном файле default_images.php VirtueMart 2, но если вы используете клубный шаблон, там, скорее всего, всё сильно отличается. Поэтому ещё раз напоминаю, если вы не можете найти нужный участок кода, воспользуйтесь просмотром элементов в браузере, а затем попытайтесь найти его в файле, используя какую-нибудь зацепку (класс или любой другой атрибут).

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

echo $image->displayMediaFull('class="product-image" style="cursor: pointer"',false,"");

И меняем на:

echo $image->displayMediaFull('class="product-image" itemprop="image" style="cursor: pointer"',false,"");

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

default_showprices.php

default_showprices.php – находится всё в той же папке. Ищем div, в который обёрнуто всё содержимое файла (он самый первый):

<div class="product-price" id="productPrice<?php echo $this->product->virtuemart_product_id ?>">

Меняем на:

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="product-price" id="productPrice<?php echo $this->product->virtuemart_product_id ?>">

Схема Offer – это «предложение», без добавления этой схемы внутри схемы Product нельзя разметить цену, валюту, категорию и статус товара.

Сразу после этой строки можете добавить такую примочку:

<meta itemprop="category" content="<?php echo $this->product->category_name; ?>" />

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

<meta itemprop="priceCurrency" content="UAH" />

Если вы продаёте в рублях, то поменяйте UAH на RUB, если в долларах, то на USD.

Также сразу за предыдущими строками, я использую следующую разметку:

<meta itemprop="availability" content="http://schema.org/InStock"/>

Это означает, что товар в наличии. Если товара нет в наличии, нужно заменить InStock на OutOfStock. Если товар распродан, то SoldOut, предзаказ – PreOrder и тд. Весь перечень есть в соответствующей схеме: http://schema.org/ItemAvailability

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

<meta itemprop="availability" content="http://schema.org/InStock"/>

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

<meta itemprop="availability" content="http://schema.org/<?php echo $gwAvailability; ?>" />

То есть я создал отдельную переменную $gwAvailability, в которой храниться значение «наличия» для текущего товара.

Идём дальше, в этом файле есть целая гора echo. В зависимости от ваших настроек VirtueMart, какое-то из этих echo создаёт div с ценой. Вам предстоит это выяснить методом тыка, или по логике, исходя из названий объектов. Например, мы выяснили, что это:

echo $this->currency->createPriceDiv('salesPrice', 'COM_VIRTUEMART_PRODUCT_SALESPRICE', $this->product->prices);

Теперь нужно обернуть это дело в span со свойством «price»:

echo '<span itemprop="price">'.$this->currency->createPriceDiv('salesPrice', 'COM_VIRTUEMART_PRODUCT_SALESPRICE', $this->product->prices).'</span>';

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

Заключение

Я постарался максимально разжевать данную тему, чтобы любой владелец VirtueMart мог внедрить микроразметку на свой сайт. Теперь ваша задача по аналогии разметить весь остальной сайт: страницу категории, модули, контактную информацию, новости и тд. Желаю удачи и успехов!

Спасибо за ваше внимание и до встречи в новых статьях!

С уважением, .
Пожалуйста, оцените эту статью
Средняя оценка: 2.1 из 5 (проголосовало: 178)
Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Ваш email:
Вы можете помочь развитию проекта, сделав всего 1 клик:
Спасибо!
Пожалуйста, прокомментируйте, как Вам моя статья?
Имя:
Комментарий:

Если Вы хотите вставить код, пожалуйста, заключайте его в [code][/code]

Подписаться на новые комментарии:

E-mail:


Защита от спама: пожалуйста, напишите слово "сел" справа налево
Ответ:
Подписаться на новые комментарии без комментирования - Email:
Защита от спама: пожалуйста, напишите слово "сел" справа налево
Ответ:

15.05.2014 23:15:54 Юрий Йосифович:
Не поделитесь ли уже размеченными файлами-заготовками для Virtuemart?

Я вообще не понимаю, почему при обновлениях данного компонента разработчики не размечают сразу же по стандарту, чтобы конечный пользователь уже потом не заморачивался решением подобных проблем...
16.05.2014 11:16:33 Сергей отвечает:
Это точно, могли бы сделать функцию "Включить/выключить микроразметку", это не сложно.

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

Кстати Joomla 3 должна быть сразу с микроразметкой.

Ответить на комментарий


27.06.2014 15:56:16 ajs:
Это отличная статья. Но хотелось бы еще видеть пример как разметить не карточку товара , а категорию. Узнать разницу Offer и Offers и AgregateOffer ну и все что можно связать с магазином.

Ответить на комментарий


30.08.2014 17:25:58 Kэтрин:
Большое спасибо за статью.
Я сделала микроразметку по вашей инструкции , всё отображается кроме '<span itemprop="price">'. Цены валидатор разметки не видит. Подскажите пожалуйста , как разметить цену?

Ответить на комментарий


30.08.2014 17:53:51 Кэтрин:
Валидатор микроразметки яндекса пишет ошибку :
product
ПРЕДУПРЕЖДЕНИЕ: поле price не определено в спецификации http://schema.org/Product
31.08.2014 10:37:15 Сергей отвечает:
Всё правильно, об этом написано в статье ;) Вы не указали:
itemprop="offers" itemscope itemtype="http://schema.org/Offer"

Перечитайте ещё раз статью внимательно.

Ответить на комментарий


10.12.2014 23:36:18 fixbob:
Как Хак можно цену разметить в
\administrator\components\com_virtuemart\helpers\currencydisplay.php
// vmdebug('createPriceDiv $name '.$name.' '.$product_price[$name]);
if(!$switchSequel){
return '<div class="Price'.$name.'" style="display : '.$vis.';" itemprop="offers" itemscope itemtype="http://schema.org/Offer">'.$descr.'<span class="Price'.$name.'" itemprop="price" >'.$priceFormatted.'</span></div>';
} else {
return '<div class="Price'.$name.'" style="display : '.$vis.';" itemprop="offers" itemscope itemtype="http://schema.org/Offer"><span class="Price'.$name.'" itemprop="price" >'.$priceFormatted.'</span>'.$descr.'</div>';
}
03.01.2015 09:41:51 Вит отвечает:
подскажите пожалуйста, а как добавить в микроразметку бренд?
03.01.2015 11:20:22 Сергей отвечает:
Вот бренд: http://schema.org/brand
Вот производитель: http://schema.org/manufacturer
Смотря что Вам ближе по смыслу. Остальное по аналогии.

Ответить на комментарий


15.02.2015 20:57:14 Дмитрий:
Сергей,приветствую!
Архинужная и на все 100 понятная статья, особенно для таких "чайников" как я :). Огромное вам спасибо! Два дня убил на поиски решения, а тут такой нужный материал! Респект за труд и помощь! В закладки!
С уважением.

Ответить на комментарий


15.02.2015 23:45:36 Дмитрий:
Валидатор Яндекса выдает такую ошибку:
product
itemType = http://schema.org/Product
issimilarto
product
ОШИБКА: Не выполнено обязательное условие для продуктовых сниппетов - поле offers отсутствует или пусто

Гугловский валидатор после проверки этой же страницы пишет что все ок!
Не подскажете, чем Яша не доволен и где искать решение? Насколько я понимаю речь о товарах из категории в которой находится это товар?
17.02.2015 20:47:29 Сергей отвечает:
В ошибке всё написано же, отсутствует поле offers, а offers - это предложение о продаже, где указывается как минимум цена товара.
18.02.2015 13:26:55 Дмитрий отвечает:
Ну вероятно я что-то не допонимаю.Объсните так сказать на пальцах)
Полагаю судя по сообщению, в котором валидатор Яндекс указывает на ошибку(не понятно почему Гуглу все нравится?)
речь идет об этом участке кода?:
файл default.php
Было:
<div class="product-neighbours">
Стало:
<div class="product-neighbours" itemprop="isSimilarTo" itemscope itemtype="http://schema.org/Product">
Если так, то я изменил его в соответствии с вашим примером.Ответ Яндекса известен.)
Будьте добры ткните пальцом пожалуйста где копать?
И все же почему Гугл тогда не видит ошибок?
19.02.2015 23:06:12 Сергей отвечает:
Гугл видит, просто они показывают не все ошибки, это уже неоднократно было. Не знаю почему, это их дело :) Так что доверяйте тому, что Яндекс пишет.

Почитайте эту статью ещё раз, а именно часть про default_showprices.php. Об этих офферсах, я думаю, и пытается сказать Вам Яндекс.
20.02.2015 21:35:28 Дмитрий отвечает:
Про default_showprices.php читал.
В общем пока сделал так:
В файле default.php
Убрал:
<div class="product-neighbours" itemprop="isSimilarTo" itemscope itemtype="http://schema.org/Product">
Вернул:
<div class="product-neighbours">
Правильно я сделал или нет но и Яндекс и Гугл довольны.)
Судя по всему, имхо дело в разметке навигации по товарам из этой категории.В любом случае автору большой респект за статью!
28.02.2015 16:19:26 Вадим отвечает:
короче, яндекс сам признался что у них ошибки по микроразметке вылазят, и они якобы пытаются их решить, но мне кажется решением тут не пахнет, просто глюкает их сервис вот и всё! нашел ветку хелпа от яши, там кокраз и пишут людям-жа у вас нормальная разметка не обращайте внимание на наши ошибки валидатора..
31.10.2015 02:07:38 Михаил отвечает:
Яндекс ругается на разметку блока "Данный товар на одной полке с". Указывается сущность "Product" и Яндекс ждет обязательных вложений - description, name и price.

Ответить на комментарий


17.05.2015 00:11:05 Валерий:
Добавьте пожалуйста как на виртумарте в микроразметку внедрить рейтинг товара

Ответить на комментарий


31.10.2015 02:14:26 Михаил:
Добрый день. Пробовали ли вы решить проблему с товаром типа "Похожие товары","С этим товаром покупают" ?
01.11.2015 12:52:02 Сергей отвечает:
Добрый день. Нет, не было необходимости.

Ответить на комментарий


15.01.2016 20:16:25 Иммануил:
Добрый день!
Скажите пожалуйста, как вы боритесь с накруткой рейтинга статей?
Спасибо.
25.03.2016 20:40:23 Максим отвечает:
Сергей, добрый вечер! Очень полезная статья! Вопрос: как сделать чтобы в параметре цена itemprop="price" не подставлялась валюта товара? А то гугл в сниппет не выводит значение вместе с валютой.

Ответить на комментарий


29.03.2016 14:36:33 Stas:
Правильно я понял разметку для категорий

Обвертка категорий
<div class="category-view"> на
<div class="category-view" itemscope itemtype="http://schema.org/Product>
тут в место Product писать Category или оставить так.

тут изображение категории и название
<h2 itemprop="name"><a href="<?php echo $caturl ?>" title="<?php echo $category->category_name ?>">
<?php echo $category->category_name ?>
<br/>
<?php // if ($category->ids) { //изображение в категории
echo $category->images[0]->displayMediaThumb ('itemprop="image"',"", FALSE);
//}?>
</a></h2>

тут описание менял с <div class="category_description">
на <div class="category_description" itemprop="description">

может есть у кого размеченная так распишите многим понадобится
09.05.2016 16:52:33 Игорь отвечает:
В файле products.php
templates/шаблон/html/com_virtuemart/sublayouts
Дописываете

echo $product->images[0]->displayMediaThumb("itemprop=\"image\"",'class="browseProductImage"', false);

<div class="vm-product-descr-container-<?php echo $rowsHeight[$row]['product_s_desc'] ?>" itemprop="description">

<h2 itemprop="name"><?php echo JHtml::link ($product->link.$ItemidStr, $product->product_name); ?></h2>

<div itemscope itemtype="http://schema.org/Product" class="spacer">

Все работает, только на цену ругается не различает валюту

Ответить на комментарий

Использую для работы
Мои расширения
Свежие статьи
Рекомендую
Горячо обсуждаемые
Подписка
  • Следовать в twitter:
  • Подписаться по RSS:
  • Подписаться по E-mail:
  • Следить ВКонтакте:
  • Следить на Facebook:
Пользовательское соглашение об условиях использования сайта и Политика конфиденциальности
Перепечатывание или копирование материалов сайта (текста, изображений и другого содержимого) для их публичного или коммерческого использования в сети Интернет, либо в печатных изданиях строго запрещены. При нарушении данного правила, с нашей стороны будут предприняты соответствующие меры, вплоть до судебной жалобы.
© site-on.net
Шрифт: +стандартно-