Structured data

Shoptet templates use Schema.org microdata format to present structured data.

Product detail

On product detail pages, the main product is described by microdata according to the Google recommendation.

Example:

<div class="p-detail" itemscope itemtype="https://schema.org/Product">
    <meta itemprop="identifier" content="9512fff7-302f-11e9-a065-0cc47a6c92bc">
    <meta itemprop="name" content="Reebok Nano  + prodloužená záruka">
    <meta itemprop="url" content="https://classic.shoptet.cz/sport-a-relax/reebok-nano/">
    <meta itemprop="image" content="https://cdn.myshoptet.com/usr/classic.shoptet.cz/user/shop/big/293_bota-reebok-nano.jpg?5d95e2b7">
    <!-- etc. -->
</div>

Product listing

Product listings, e.g. homepage or category page, do not employ microdata format. However, the same basic data is available in HTML data attributes with the prefix data-micro. Depending on property type, values can be read directly from the data attribute or from other attributes of the respetive element.

Example:

<div class="p" data-micro="product" data-micro-identifier="9512fff7-302f-11e9-a065-0cc47a6c92bc">
    <a href="/sport-a-relax/reebok-nano/" data-micro="url">
        <span data-micro="name">Reebok Nano</span>
    </a>
    <img src="..." data-src="..." data-micro-image="https://cdn.myshoptet.com/usr/classic.shoptet.cz/user/shop/big/293_bota-reebok-nano.jpg?5d95e2b7">
    <!-- etc. -->
</div>

Other information available in data attributes

There are also other elements where data attributes can be used for editing templates.

Cart items

We provide guid (identifier) and code (sku) for each cart item as data attributes. This information is available in all components where cart items are displayed, with exception of the order summary page.

Example:

<table class="cart-table">
    <tbody>
        <tr class="removeable"
            data-micro="cartItem"
            data-micro-identifier="9512fff7-302f-11e9-a065-0cc47a6c92bc"
            data-micro-sku="293"
        >
            ...
        </tr>
    </tbody>
</table>

Images of subcategories in menu

If there is a subcategory image set in admin, respective menu items have this image URL available in data attribute data-image. This allows you to implement visually richer menus.

Example:

<ul class="menu-level-2">
    <li class="menu-item-702">
        <a href="/saty-a-sukne/" title="Šaty a sukně" data-image="https://cdn-vsh.myshoptet.com/usr/step.shoptet.cz/user/categories/thumb/womens-patterned-dress-redfloral-hm-red-dresses_1.jpg">
            <span>Šaty a sukně</span>
        </a>
    </li>
    ...
</ul>