Overview
If your store uses variant inventory items, you may wish to display these variant inventory items as a table on the catalog page (/store/catalog.aspx). This is possible by adding the ##VARIANTINVENTORYDETAILTABLE## merge code to the catalog page's HTML. This article is a step-by-step guide to doing just that.
Locate Catalog Page's ProductList Layout Area
Navigate to Themes > Edit Theme > Pages > Catalog > HTML Editor
Scroll down until you find the following tag:
<ac:layoutarea id="ProductList">
...
</ac:layoutarea>
Inside of this tag is where you'll past the ##VARIANTINVENTORYDETAILTABLE## mere code.
Paste in Merge Code
Below is an example of a full product list layout area with the ##VARIANTINVENTORYDETAILTABLE## merge code pasted near the bottom of the layout area:
<ac:layoutarea id="ProductList">
<ac:visibilityarea id="CategoryTrailArea">
<!-- <div class="CatalogCategoryTrail breadcrumb" id="dvCategoryTrail">
$$CATEGORYTRAIL$$
</div> -->
</ac:visibilityarea>
<table class="catalog-item" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="catalog-img" align="center" valign="middle">
<span><img src="/resize##ITEMPHOTOURL##?bw=75&lr=t" onerror="$(this).remove()"></span>
</td>
<td class="catalog-name" align="left" valign="middle">
<span style="font-weight: bold;">##PRODUCTNAME##</span>
</td>
<td class="catalog-sku" align="center" valign="middle">
<span>##ITEMNR##</span>
</td>
<td class="catalog-mfg" align="left" valign="middle">
<span>##MFGNAME##</span>
</td>
<td class="catalog-cat" align="left" valign="middle">
<span>##CATNAME##</span>
</td>
<td class="catalog-status" align="left" valign="middle">
<span>##PRODUCTSTATUS##</span>
</td>
<td class="catalog-qty" align="center" valign="middle">
<span>##QUANTITYONHAND##</span>
</td>
<td class="catalog-price" align="center" valign="middle">
<span><div class="catalog-var">##VARIANTINVENTORYDETAILTABLE##</div></span>
</td>
</tr>
</table>
</ac:layoutarea>
If a product on the catalog page has variant inventory items, the variant inventory items and their details will be displayed in a table (see example screenshots below).
Note: the code above may not exactly match the code in your theme. That's because we've added additional table HTML code for the variant table to "fit" into. You may wish to do the same for your theme. Make these changes yourself, or enlist the help of AmeriCommerce's Agency Services.
As always, be sure to backup your theme before making changes.
Example Screenshots
Below is an example of how the variant inventory detail page might look on a catalog page:
And for the the curious code-monkey's out there, here's what the above table looks like in Chrome's inspect element:
