[uf-discuss] hListing for eCommerce

John Holt John at eazytiger.net
Fri Jan 4 02:13:05 PST 2008


Hi there,
We've just started to add microformats to our eCommerce system, and
myself and another designer have gone through the hlisting spec and
applied it to the product information that our system is already
displaying.

I was hoping that we could post the html that we're using and get some
feedback to ensure that we're using hlisting as it's defined at the
moment, and also hopefully to help the format along with a discussion on
its usage on ecommerce sites.

The following code is used on a category page, where a number of related
products will be displayed, so our thought was that this was a single
listing with many 'items', and so would only require a single 'lister'.
It also seemed to make sense to us that 'photo', 'fn', 'description' and
'price' were a subset of each 'item' - although the spec wasn't too
clear on whether this was how the schema is intended.

We've also tried to include additional, relevant microformats, so we've
tagged each item with its category name, used the currency microformat
for the price, and used vcard for the lister.

thanks for any comments,
john


<div class="hlisting">
  <ul class="offer-sell">
    <li class="item">
      <div class="photo">
        <a href="/catalogue/tables/oval-cut-lamp-table-cft-967-4"><img
src="products_pictures/thumb_CFT-967-4.jpg" width="186" height="186"
alt="CFT 967 4.jpg" /></a>
      </div>
      <h3 class="fn">
        <a href="/catalogue/tables/oval-cut-lamp-table-cft-967-4"
class="url permalink" rel="self bookmark">Four Circles Lamp Table</a>
      </h3>
      <p>
        <span class="description">Designer Wood Veneer Lamp Table in
Wenge<br />Dimensions 50W x 50D x 50H cm</span>
        <br />
        View all <a href="/catalogue/tables" rel="tag">Tables</a>
      </p>
      <p class="price money">
        <abbr class="currency" title="GBP">&pound;</abbr><span
class="amount">149.00</span> (inc. VAT)
      </p>
      <p><a href="/catalogue/tables/oval-cut-lamp-table-cft-967-4">Full
Details</a></p>
    </li>
    <li class="item">
      ...
    </li>
    <li class="item">
      ...
    </li>
  </ul>
  <p class="lister vcard">
    <a class="fn org url" href="/companyURL.co.uk/">Company Name</a>
  </p>
</div>



More information about the microformats-discuss mailing list