How to code markup for Product in ItemList? - schema.org

Question

I have adapted a code taken from example 2 on http://schema.org/ItemList
How do I use it together with Product? On frontpage and some other pages I have a list of products for which I would like to have a better markup.
The following code gives the error
A value for the position field is required.
but Product doesn't have a position, so if there is a value for position it gives different error.
<ul itemscope itemtype="http://schema.org/ItemList">
<meta itemprop="numberOfItems" content="10" />
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
<!-- <meta itemprop="position" content="1" /> -->
<a href="#" itemprop="url">
<img src="asdf.jpg" itemprop="image">
<div class="product-list__title" itemprop="name">
Product name
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div itemprop="price">
$12
</div>
<link itemprop="availability" href="http://schema.org/InStock" />
</div>
</a>
</li>
</ul>

Answer 1

The itemListElement property has three expected values:
ListItem
Text
Thing
ListItem is also a Thing, but it’s listed explicitly because it has a special role here: ListItem provides the position property. If you need to convey the position of the list items, you have to provide ListItem values.
Note that not every ItemList needs this. Your example with using Product values is fine (apart from the meta element which can’t be a child of ul), and unless you try to qualify for Google’s rich result (this is what the error message is about), you could keep it like that.
If you do want to provide the positions, an itemListElement could look like this:
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<meta itemprop="position" content="1" />
<div itemprop="item" itemscope itemtype="http://schema.org/Product">
<!-- your Product -->
</div>
</li>