Есть  действующий интернет магазин итальянской обуви написанный на Joomla 1.5 с компонентом для электронной коммерцией virtuemart 1.1.7 .Захотелось мне сделать в нем разметку schema.org , чтоб гугл и яндекс видели товар , цену , наличии и т.д.Приступим,тема у меня не стандартная и возможно у вас некоторые файлы будут лежать в других местах,но не столь важно,главное уловить суть.

За вывод страницы товара отвечает шаблон flypage.tpl.php

который у меня расположен
/components/com_virtuemart/themes/*/templates/product_details/flypage.tpl.php
внесем в этот файл несколько изменений.
Изначально он имеет такой вид:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' );
mm_showMyFileName(__FILE__);
 ?>
<div class="wrapper">
<?php echo $buttons_header // The PDF, Email and Print buttons ?>
<div class="clear"></div>
<?php
if( $this->get_cfg( 'showPathway' )) {
    echo "<div class=\"pathway\">$navigation_pathway</div>";
}
if( $this->get_cfg( 'product_navigation', 1 )) {
    if( !empty( $previous_product )) {
        echo '<a class="previous_page" href="'.$previous_product_url.'">'.shopMakeHtmlSafe($previous_product['product_name']).'</a>';
    }
    if( !empty( $next_product )) {     
        echo '<a class="next_page" href="'.$next_product_url.'">'.shopMakeHtmlSafe($next_product['product_name']).'</a>';
    }
}
?>
</div>
<div class="clear"></div><br />
<div class="wrapper indent">
    <div class="browseProductImageContainer">
        <div class="browseProductImage">
            <?php echo $product_image ?>
        </div>
        <br/><br/><?php echo $this->vmlistAdditionalImages( $product_id, $images ) ?>
    </div>
    <div class="floatElement">
        <h2 class="browseProductTitle">
            <span href="#" title="<?php echo $product_name ?>" class="product_name">
                <?php echo $product_name ?>
            </span> <?php echo $edit_link ?>
        </h2>
        <?php if( $this->get_cfg('showManufacturerLink')) { ?>
            <div class="manufacturer_link">
                <?php echo $manufacturer_link ?>
             </div>
        <?php } ?>
        <div>
        <?php echo 'Артикул:';
        echo $product_sku ?>
        </div><br />
        <div>
            <?php echo $product_packaging ?>
        </div>
        <div>
            <?php echo $product_description ?>
            <?php echo $file_list ?>
        </div>
        <div class="ask_seller nobutton">
            <?php echo $ask_seller ?>
        </div>
        <div>
            <?php
                if (( $this->get_cfg( 'showAvailability' )) && ($product_availability)) { echo $product_availability; }?>
                    <div class="browsePriceContainer">
                    <?php echo 'Цена:';
                    echo $product_price ?>
                    </div>
             <?php if ($addtocart) { echo $addtocart; } ?>
             </div>
             <div>
                <?php echo $product_type ?>
             </div>
        </div>
    </div>
</div>
    <div><?php echo $product_reviews ?></div>
    <?php echo $product_reviewform ?>
    <?php echo $related_products ?><br />
    <?php if( $this->get_cfg('showVendorLink')) { ?>
        <?php echo $vendor_link ?><br />
    <?php  } ?>
   
<div>
<?php
if( !empty( $recent_products )) { ?>
    <div class="vmRecent">
    <?php echo $recent_products; ?>
    </div>
<?php
}
if( !empty( $navigation_childlist )) { ?>
    <?php echo $VM_LANG->_('PHPSHOP_MORE_CATEGORIES') ?><br />
    <?php echo $navigation_childlist ?><br style="clear:both"/>
<?php
} ?>
</div>

Первым делом нам нужно выделить блок в котором будет работать наша схема.
Между строками №5 и 6 вставляем такой код
<div itemscope itemtype="http://schema.org/Product">
и закрываем его между строками №68 и 69
</div>
Теперь в этом блоке будет работать наша разметка , осталось только добавить нужные нам атрибуы.
Первый обязательный атрибут это name.
В строке №30 добавим
itemprop="name"
чтоб получился такой код

1
2
3
4
5
6
<h2 itemprop="name" class="browseProductTitle">
<span href="#" title="<?php echo $product_name ?>" class="product_name">
<?php echo $product_name ?>
</span>
<?php echo $edit_link ?>
</h2>

Далее мне нужно было вывести артикул.
В строке №40 в теге

добавить такой код
itemprop="sku"
чтоб получилось

1
2
3
4
<div itemprop="sku">
<?php echo 'Артикул:';
echo $product_sku ?>
</div>

Далее мне нужно добавить цену , название валюты и наличие товара.
В строке №54 в теге <div>
добавим
itemprop="offers" itemscope itemtype="http://schema.org/Offer"
чтоб получилось

1
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

Теперь добавлю валюту гривны и наличие товара.
Про наличие товара есть два варианта решения
1.Первый вариант,более простой.
Весь товар на сайте будет светиться в наличии.
Вставлю код между строками №59 и 60.

1
2
<meta itemprop="priceCurrency" content="UAH" />
<meta itemprop="availability" content="InStock" />

2.Второй вариант,будет отображать действительное наличие товара.
Нужно отредактировать шаблон файла availability.tpl.php
Который находится по следующему пути:
/components/com_virtuemart/themes/*/templates/common/availability.tpl.php
В этом файле находим блок кода который отвечает за товар которого нет в наличии:

1
2
3
4
5
6
<?php
    ob_start();
   
    if (($product_in_stock < 1 && CHECK_STOCK) || $product_available_date > time() ) {
        // Product is not in stock or not available yet (Availability date in future) ?>
        <?php echo $VM_LANG->_('PHPSHOP_CURRENTLY_NOT_AVAILABLE') ?>

и вставляем такой код между блоками php кода:
<meta itemprop="availability" content="OutOfStock">
чтоб получилось:

1
2
3
4
5
6
7
<?php
    ob_start();
   
    if (($product_in_stock < 1 && CHECK_STOCK) || $product_available_date > time() ) {
        // Product is not in stock or not available yet (Availability date in future) ?>
                <meta itemprop="availability" content="OutOfStock">
        <?php echo $VM_LANG->_('PHPSHOP_CURRENTLY_NOT_AVAILABLE') ?>

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

1
2
3
4
5
    // Yes, we have XX products in stock!
    elseif( ($product_in_stock >= 1 && CHECK_STOCK) ) {
        ?><span style="font-weight:bold;">
            <?php echo $VM_LANG->_('PHPSHOP_PRODUCT_FORM_IN_STOCK') ?>:
          </span><?php echo $product_in_stock ?>

и вставляем такой код:
<meta itemprop="availability" content="InStock">
чтоб получилось:

1
2
3
4
5
6
    // Yes, we have XX products in stock!
    elseif( ($product_in_stock >= 1 && CHECK_STOCK) ) {
        ?><span style="font-weight:bold;">
        <meta itemprop="availability" content="InStock">
            <?php echo $VM_LANG->_('PHPSHOP_PRODUCT_FORM_IN_STOCK') ?>:
          </span><?php echo $product_in_stock ?>

Есть здесь важный момент…InStock и OutOfStock нужно писать с заглавными буквами как написано здесь,если написать допустим Instock,в валидаторе от гугл вы не увидите товар в наличии!
Далее нужно отобразить цену…
Редактируем шаблон цены это price.tpl.php , находится он по такому пути
/components/com_virtuemart/themes/*/templates/common/price.tpl.php
находим такой блок кода

1
2
3
4
5
6
7
<?php
if( !empty( $price_info["product_price_id"] )) { ?>
 <span class="productPrice">
  <?php echo $CURRENCY_DISPLAY->getFullValue($base_price) ?>
  <?php echo $text_including_tax ?>
 </span>
<?php

В тег
<span class="productPrice">
добавляем
itemprop="price"
получилось

1
2
3
4
5
6
7
<?php
if( !empty( $price_info["product_price_id"] )) { ?>
 <span itemprop="price" class="productPrice">
  <?php echo $CURRENCY_DISPLAY->getFullValue($base_price) ?>
  <?php echo $text_including_tax ?>
 </span>
<?php

Для того чтобы добавить фото товара нужно отредактировать файл theme.php
который находится
/components/com_virtuemart/themes/*/theme.php
в этом файле находим такую строку

1
$img_attributes= 'alt="'.$product['product_name'].'"';

и добавляем такой атрибут
itemprop="image"
получилось так

1
$img_attributes= 'itemprop="image" alt="'.$product['product_name'].'"';

Теперь нужно проверить проделанную работу в валидаторе.
Я знаю о валидаторе от гугл и от яндекса .
У меня все работает надеюсь и у вас все получится.

Добавление семантической разметки schema.org в карточку товара Virtuemart 1.1.7
Метки:        

Добавление семантической разметки schema.org в карточку товара Virtuemart 1.1.7: 1 комментарий

  • 26/11/2015 в 12:17
    Постоянная ссылка

    Добрый день!

    Спасибо за информацию, была очень полезной. Но есть нюансы. С ценой сложность в том, что она отображается вместе с указанием валюты (руб, грн и т.д.), а это как я понял не правильно для Яндекса. А обрамить в теги только цифру не получается. Кстати, если на странице товара есть другой товар, например рекомендуемые товары, то из них цена тоже попадает в itemprop=»price» и наличие нескольких цен вызывает ошибку в валидаторе.

    На счет отображения наличия 2 способ почему-то не работает. Не добавляет не InStock не OutOfStock. Может конечно я в чем-то не разобрался.

    itemprop=»image» работает нормально.

    Ответить

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *