hproduct-examples-in-wild

Product Examples

This page is informative.

The purpose of the studies on this page is to serve as background for the design of a simple distributed product microformat. There are limited number of examples in the wild, but this page can serve as a base for experimentation and implementation.

Editors/Authors

(alphabetical)

• Paul Lee, Google Product Search
• Jay Myers, Best Buy, Co., Inc.

Contributors

(alphabetical)

• Craig Cook, Focal Curve
• Aaron Gustafson, Easy! Designs

New Examples

If you have implemented hProduct on your own page, feel free to add it to the top of this list. Please be sure to include at least one URL to a page on your site that includes actual hProduct markup.

Examples

See bestbuy.com's experimental hProduct implementation on "Shop URLs" at: http://www.bestbuy.com/shop/term, or more information here: Shop URL details

(Note: See hlisting-extended-examples also for examples of products listed on classified services.--Paul Lee 21:24 20 Aug 2008)

Live Product Examples

• BlueNile
  • Product type: Jewelry > Bracelets
  • Properties: categories, name, description, product rating, photo, price, order info, shipping information, stock number, metal type, clasp type, width, weight, add to basket, reviews

• Petco
  • Product type: Ferrets > Ferret food
  • Properties: photo, name, brand/ manufacturer, description, product rating, reviews, weight, sku, shipping, internet price, sale price, quantity, add to cart, category, warranty, analysis, directions

• allposters.com
  • Product type: Artwork > Prints
  • Properties: photo, title, artist, type, size, item number, shipping, price, add to cart, custom frame, additional services, description, related

• target.com
  • Product type: Baby & Toddler > Toddler car seat
  • Properties: photo, shipping, title, price, guest rating, quantity, add to cart, add to list(s), availability, features, reviews, identifiers (dpci, asin, catalog number), related

• uniformadvantage.com
  • Product type: Business & Industrial > Medical > Medical Scrubs
  • Properties: name, style number, photo, description, price, color, size, quantity, add to cart, related

• freewheelbike.com
  • Product type: Sporting Goods > Bicycles
  • Properties: categories, photo, brand, name, price, product rating, description, features (click-through/pop-up), color, size, add to cart, add and checkout, add to wish list

• fastforklifts.com
  • Product type: Industrial Equipment > Forklifts
  • Properties: photo, name, product id, manufacturer, price, sale price, savings, quantity, add to cart, category, description

• leotardworld.com
  • Product type: Clothing & Accessories > Leotards
  • Properties: categories, name, photo, price, sale price, you save, size, status, quantity, add to cart, add to wish list, description, related, review

• gap.com
  • Product type: Clothing & Accessories > Men's Blazers
  • Properties: photo, name, description, size, color, sku, quantity, price, sale price, add to bag, product details, related

• amazon.com
  • Product type: Electronics > Cameras
  • Properties: photo, name, brand/manufacturer, reviews, colors, price, availability, shipping, quantity, add to cart, related, product details, product dimentions, weight, asin, model number, sales rank, categories, description, tags, reviews, discussions

• lundsandbyerlys.com(frames, maui bento sushi chosen as example)
  • Product type: Food Items > Sushi
  • Properties: on sale, photo, name, serving size, quantity, price, sale price, savings, add to basket

• macys.com
  • Product type: Furniture > Living Room Sets
  • Properties: photo (flash), name, description, details, shipping, returns, product rating, colors, related, height, width, depth, product features, warranty info, web id, price, reviews

• lowes.com
  • Product type: Household Hardware > Vanity
  • Properties: photo, name, manufacturer/brand, item number, model, price, add to cart, availability, shipping, description, total width, total depth, total height, top width, top depth, color, series, assembly, number drawers, construction type, mount type, reviews

• homedepot.com
  • Product type: Hardware > Sump Pump
  • Properties: photo, name, model, brand, price, quantity, add to cart, add to list, add to registry, product rating, description, model number, part number, features, specifications, ada compliant, amperage, depth, height, weight, width, battery backup, cord length, energy star, horsepower, length, outlet connection, outlet dimension, switch type, voltage, reviews, warranty, related

• acehardware.com
  • Product type: Hardware > Lath Screws
  • Properties: photo, name, product rating, price, rewards points, shipping, categories, color, size, quantity, add to cart, add to wish list, related, availability, product details: head type, size, material, reviews

• walgreens.com
  • Product type: Health & Beauty > Ear Wax Removal
  • Properties: categories, photo, price, quantity, name, brand, size/count, add to cart, shipping, availability, product rating, description, related, reviews

• appliancewarehousedirect.com
  • Product type: Home & Garden > Refrigerators
  • Properties: name, width, weight, depth, height, sku, brand, model, price, add to cart, shipping, warranty, photo, description, condition, packaging, features

• birdbaths.com
  • Product type: Home & Garden > Bird Baths
  • Properties: categories, name, item number, regular price, sale price, savings, length, width, height, warranty, product rating, shipping, related, description, material, style, water sound, light, series, assembly, warranty, exchange, reviews

• bagking.com
  • Product type: Luggage > Fanny Packs
  • Properties: name, photo, product code, price, weight, shipping, color, quantity, add to cart, description, features, warranty, width, height, depth, related

More extensive coded example

(Note: this example contains additional markup for positioning and presentation purposes)

<div class="hproduct">
	<ul id="breadcrumbs">
		<li>Storename</li>
		<li class="category">Cameras</li>
		<li class="category">Video Cameras</li>
		<li class="category">High-Definition Cameras</li>
	</ul>
	<h1 class="n">Pure Digital Flip Video MinoHD Camcorder</h1>
	<div id="topbox">
		<div class="rightcol">
			<img src="http://images.storename.com/BestBuy_US/images/products/front.jpg" alt="Image of Pure Digital F460B" class="photo" />
		</div>
		<div class="leftcol">
			<div class="infomain">
				<ul>
					<li><strong>Brand: </strong><span class="brand">Pure Digital</span></li>
					<li><strong>Model: </strong><span class="model">F460B</span></li>
					<li><strong>SKU: </strong><span class="sku">9077054</span></li>
				</ul>
				<p class="description">This camcorder offers true high-definition recording in an incredibly compact body, so you can be sure you won't miss a minute of recording time.</p>
				<p>
					<span class="availability online">Available online</span>. <span class="shipping">Backordered: Usually leaves our warehouse within 1-2 weeks. <span class="money">Estimated shipping cost: <abbr class="currency" title="USD" lang="en">$</abbr><span class="amount">0.0</span>.</span></span>
				</p>
				<p>
					<span class="availability instore">Not available for purchase in store</span>.
				</p>
				<p>
					<span class="availability specialorder">Not available for special order</span>.
				</p>
			</div>
			<div class="infoside">
				<span class="price sale"><span class="money"><strong>Sale Price: </strong><abbr class="currency" title="USD" lang="en">$</abbr><span class="amount">206.99</span></span></span>
				<div class="buy">
					<img src="http://hproduct.beweep.com/products/images/btn_add_to_cart.gif" alt="buy this product"></div>
				</div>
				<div class="clear"></div>
		</div>
		<div class="clear"></div>
	</div>
	<div id="bottombox">
		<div id="tabs">
			<ul>
				<li><a href="#featuresbox"><span>Features</span></a></li>
				<li><a href="#specsbox"><span>Specs</span></a></li>
				<li><a href="#reviewsbox"><span>Reviews</span></a></li>
			</ul>
		</div>
		<div id="specsbox">
		<h3>Product Specs</h3>
			<dl class="p-v">
				<dt>Color</dt>
				<dd>Black</dd>
				<dt>Height</dt>
				<dd>3.9"</dd>
				<dt>Width</dt>
				<dd>2"</dd>
				<dt>Depth</dt>
				<dd>0.6"</dd>
				<dt>Weight</dt>
				<dd>3.3 oz.</dd>
				<dt>Warranty -- Parts</dt>
				<dd>90 days</dd>
				<dt>Warranty -- Labor</dt>
				<dd>90 days</dd>
				<dt>Format</dt>
				<dd>Flash memory</dd>
				<dt>Vista Compatible</dt>
				<dd>Home Basic</dd>
				<dt>LCD Screen Size</dt>
				<dd>1.5"</dd>
				<dt>Image Stabilization</dt>
				<dd>No</dd>
				<dt>Optical Zoom</dt>
				<dd>None</dd>
				<dt>Digital Zoom</dt>
				<dd>2x</dd>
				<dt>Night Recording</dt>
				<dd>Yes</dd>
				<dt>Audio Sensor</dt>
				<dd>Yes</dd>
				<dt>Lines of Resolution</dt>
				<dd>720</dd>
				<dt>Video Resolution</dt>
				<dd>Up to 1280 x 720</dd>
				<dt>Digital Still Resolution</dt>
				<dd>Up to 1280 x 720</dd>
				<dt>Auto Date/Time Stamp</dt>
				<dd>Yes</dd>
				<dt>Audio Recording</dt>
				<dd>Yes</dd>
				<dt>Color Viewfinder</dt>
				<dd>Yes</dd>
				<dt>Speaker</dt>
				<dd>Yes</dd>
				<dt>Exposure Control</dt>
				<dd>Automatic</dd>
				<dt>PC Software</dt>
				<dd>Yes</dd>
				<dt>Connectivity</dt>
				<dd>USB 2.0</dd>
				<dt>PC Cable</dt>
				<dd>Yes</dd>
				<dt>Rechargeable Battery</dt>
				<dd>Yes</dd>
			</dl>
			<div class="clear"></div>
		</div>
		<div id="reviewsbox">
			<h3>Product Reviews</h3>
				<div class="hreview">
					<h4>"<span class="summary">Amazing little camera</span>"</h4>
					<p>
					<strong>Reviewer: </strong><span class="reviewer vcard"><a href="http://reviews.bestbuy.com/3545a/kevwhitesf/profile.htm" class="url fn">kevwhitesf</a></span> from <span class="adr"></span>
					</p>
					<p>
					<strong>Date reviewed: </strong><abbr title="200502" class="dtreviewed">2008-11-24T18:53:32.000-06:00</abbr>
					</p>
					<p>
					<strong>Rating: </strong><span class="rating">5</span> out of 5</p>
					<p class="description">"It definitely exceeded my expectations. It does everything it claims to do and more at a very reasonable price. I was pretty shocked that such a small device was capable of producing such a nice picture. Limited functionality, but that's what I was expecting. It interfaces nicely with Macs. I'm having lot of fun with my MinoHD! I've been taking it everywhere."</p>
				</div>
				<div class="hreview">
					<h4>"<span class="summary">Amazing HD Consumer Camera</span>"</h4>
					<p>
					<strong>Reviewer: </strong><span class="reviewer vcard"><a href="http://reviews.bestbuy.com/3545a/sscrozz/profile.htm" class="url fn">sscrozz</a></span> from <span class="adr">Lafayette, CA</span>
					</p>
					<p>
					<strong>Date reviewed: </strong><abbr title="200502" class="dtreviewed">2008-11-22T03:08:41.000-06:00</abbr>
					</p>
					<p>
					<strong>Rating: </strong><span class="rating">4</span> out of 5</p>
					<p class="description">"This camera is perfect for the consumer who wants a pocket camera that shoots HD. It shoots in full HD using H.264 compression (great quality video that takes up little space) It now works with Macs using Mpeg4 instead of AVI. Here is a HD test video. http://www.vimeo.com/2291493"</p>
				</div>
		</div>
		<div class="clear"></div>
	</div>
</div>