microdata plugin

The microdata plugin extracts itemprop values into scope and adds a microdata() helper for behavior expressions.

Install

<script type="module" src="https://unpkg.com/vsn/dist/index.min.js" auto-mount></script>
<script type="module" src="https://unpkg.com/vsn/dist/plugins/microdata.min.js"></script>

Behavior modifier

<article
  class="product-card"
  itemscope
  itemtype="https://schema.org/Product"
>
  <h3 class="product-name" itemprop="name">Crimson Clay Mug</h3>
  <p class="product-price" itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span class="price-display">$18</span>
    <meta itemprop="price" content="18.00">
    <meta itemprop="priceCurrency" content="USD">
  </p>
  <p class="product-desc" itemprop="description">Hand-thrown stoneware with a satin red glaze.</p>
</article>

behavior .product-card !microdata {
  // !microdata adds name, offers, price, priceCurrency, description to each .product-card's scope
  priceLabel: "$" + price;
}

By default, values are written into the behavior scope. Use !microdata("key") to nest under a key:

behavior .product-card !microdata("product") {
  // All itemprop values are added to a product object with name, offers, price, etc.
  priceLabel: "$" + product.price;
}

microdata() helper

priceLabel: "$" + microdata("price");

You can also pass a target element or options object.