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

Добрый день, уважаемые читатели блога 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 мог внедрить микроразметку на свой сайт. Теперь ваша задача по аналогии разметить весь остальной сайт: страницу категории, модули, контактную информацию, новости и тд. Желаю удачи и успехов!

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

• Старт
• Создание сайта
  • Вёрстка сайта (HTML+CSS)
  • Динамические сайты (PHP)
  • Системы управления контентом (CMS)
• Оптимизация и продвижение
• Инструменты
• Конкурсы
• С чего начать?