h-product

2016-12-04T01:49:46Z

Mihailsemin: /* Example */

<entry-title>h-product</entry-title>
<span class="h-card vcard"><span class="p-name fn">[[User:Tantek|Tantek Çelik]]</span> (<span class="p-role role">Editor</span>)</span>
----
<dfn style="font-style:normal;font-weight:bold">h-product</dfn> is a simple, open format for publishing product data on the web. h-product is one of several open [[microformats|microformat]] draft standards suitable for embedding data in HTML/HTML5.

h-product is the [[microformats2]] update to [[hProduct]].

{{cc0-owfa-license}}

== Example ==
Here is a simple minimal product example:

<source lang=html4strict>
<div class="h-product">
<h1 class="p-name">Microformats For Dummies</h1>
<img class="u-photo" src="http://example.org/mfd.png" alt="" />
<div class="e-description">
<p>Want to get started using microformats, but intimidated by hyphens and mediawiki? This book contains everything you need to know!</p>
</div>
<p>Yours today for only <data class="p-price" value="20.00">$20.00</data>
from <a class="p-brand h-card" href="http://example.com/acme">ACME Publishing inc.</a>
</p>
</div>
</source>

Parsed JSON:
<source lang=javascript>
{
"items": [
{
"type": [
"h-product"
],
"properties": {
"name": [
"Microformats For Dummies"
],
"photo": [
"http://example.org/mfd.png"
],
"description": [
{
"value": "Want to get started using microformats, but intimidated by hyphens and mediawiki? This book contains everything you need to know!",
"html": "<p>Want to get started using microformats, but intimidated by hyphens and mediawiki? This book contains everything you need to know!</p>"
}
],
"price": [
"20.00"
],
"brand": [
{
"value": "ACME Publishing inc.",
"type": [
"h-card"
],
"properties": {
"name": [
"ACME Publishing inc."
],
"url": [
"http://example.com/acme"
]
}
}
]
}
}
]
}
</source>

=== Get started ===
The class '''<code>h-product</code>''' is a ''root class name'' that indicates the presence of an h-product.

'''p-name''', '''p-price''', '''u-photo''' and the other property classnames listed below define elements as ''properties'' of the h-product.

See [[microformats-2-parsing]] to learn more about property classnames.

[http://prt.com]

== Properties ==
h-product properties, inside an element with class '''h-product''':
* '''<code>p-name</code>''' - name of the product
* '''<code>u-photo</code>''' - photo of the product
* '''<code>p-brand</code>''' - manufacturer, can also be embedded <code>h-card</code> {{main|h-card}}
* '''<code>p-category</code>''' - freeform categories or tags applied to the item by the reviewer
* '''<code>e-description</code>'''
* '''<code>u-url</code>''' - URL of the product
* '''<code>u-identifier</code>''' - includes type (e.g. mpn, upc, isbn, issn, sn, vin, sku etc.) and value.
* '''<code>p-review</code>''' - a review of the product, optionally embedded <code>h-review</code> {{main|h-review}}
* '''<code>p-price</code>''' - retail price of the product

== Status ==

'''h-product''' is a microformats.org draft specification. Public discussion on h-product takes place on [[h-product-feedback]] and the #microformats [[irc]] channel on irc.freenode.net.

h-product is ready to use and implemented in the wild, but for backwards compatibility you should also mark h-products up with classic [[hProduct]] classnames.

== Property Details ==

(stub, add any property explanations here)

TODO: u-identifier supposedly “includes type” — how so? URI scheme? Need examples of how to mark up the various different identifier types.

'''price''' was an experimental property which has real world adoption due to [[Google]] and [[Bing]] search support of hProduct. Due to this it has been included in the updated h-product spec.

== Examples in the Wild ==
* Barnaby Walters’ [http://waterpigs.co.uk/notes/new/ posting UI] is marked up with h-product and experimental h-x-app markup so that authorization UIs can provide a better experience whilst authorizing, without having to pre-register apps and upload logos
* … add any h-product examples you find in the wild

== Validating ==
{{h-spec-section-validating}}

== Backward Compatibility ==
=== Publisher Compatibility ===
For backward compatibility, you may wish to use classic [[hProduct]] classnames in addition to the more future-proof h-product properties, for example:

<source lang=html4strict>
<div class="h-product hproduct">
<h1 class="p-name fn">Product Name</h1>
</div>
</source>

=== Parser Compatibility ===
Microformats parsers {{should}} detect classic properties only if a classic root class name is found and parse them as microformats2 properties.

If an "h-product" is found, don't look for an "hProduct" on the same element.

Compatibility root class name: hProduct

Properties: (parsed as p- plain text unless otherwise specified)

* <code>fn</code> - parse as '''<code>p-name</code>'''
* <code>photo</code> - parse as '''u-'''
* <code>brand</code>
* <code>category</code>
* <code>description</code>
* <code>identifier</code> - parse as '''u-'''
* <code>url</code> - parse as '''u-'''
* <code>review</code> - including compat root class <code>hreview</code> in the absence of <code>h-review</code>
* <code>price</code>

== Background ==

h-product is based on the existing [[hProduct]] specification.

== See Also ==
* [[h-product-feedback]]
* [[microformats2]]
* [[h-card]] can be embedded in h-product
* [[hProduct]] is the classic microformat replaced by h-product

[[Category:Draft Specifications]]

Microformats Wiki - User contributions [en]

h-product