Showing variant groups in public website

Following example code need to be placed into a product catalog product display template. More information on how to create a display template is here >>.

Determining whether a product is a VaraintGroup or an Article

The PC:IsVariantGroup web control can be used to determine whether the current product is an article or a variant group.  Following code causes the display name to be changed to the variant group name if the current product is a variant group.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SmplVariantArticleDisplayTemplate.aspx.cs" Inherits="Site.ProductCatalog.Templates.SmplVariantArticleDisplayTemplate" %>
<asp:content id="Content1" contentplaceholderid="Content" runat="server">
   <pc:UseProduct runat="server" ID="UseProduct1" >
        <PC:IsVariantGroup ID="IsVariantGroup1" runat="server">
            <OnTrue>
                <!--Show the variant group name if its a variant group -->
                <h1><PC:VariantGroupName runat="server" /></h1>
            </OnTrue>
            <OnFalse>
                <!--Show the article display name if its a article -->
                <h1><PC:DisplayName runat="server" /></h1>
            </OnFalse>
        </PC:IsVariantGroup>

        <PC:DisplayImageLink ID="DisplayImageLink1" runat="server">
            <PC:DisplayImage ID="DisplayImage1" runat="server" MaxWidth="300" />
            <PC:ArticlePrice runat="server" DisplayCurrencySymbol="true"></PC:ArticlePrice>
        </PC:DisplayImageLink>


   </pc:UseProduct>
</asp:content>

Showing list of variant articles

To show list of variant articles use the VariantArticleRepeater webcontrol. This webcontrol iterates through the varaint articles in the variant group and expose them to webcontrols used with the ItemTemplate. You may use any webcontrol that expects an IArticleIntroducer within the ItemTemplate.

<PC:VariantArticleRepeater runat="server">
                    <HeaderTemplate>
                        <div class="variantarea">
                            <h3><web:WebSiteString runat="server" Name="ProductVariants" /></h3>                            
                            <ul>
                    </HeaderTemplate>
                    <ItemTemplate>
                            <li class="plain">
                                <PC:ProductLink runat="server">
                                    <PC:DisplayName runat="server" />
                                    <PC:ArticlePriceExists runat="server">
                                        <OnTrue>
                                            <pc:ArticlePrice runat="server" ShowCampaignPrice="true" ShowCampaignLink="true" />
                                        </OnTrue>
                                    </PC:ArticlePriceExists>
                                </PC:ProductLink>
                            </li>
                    </ItemTemplate>
                    <FooterTemplate>
                            </ul>
                        </div>                            
                    </FooterTemplate>
                </PC:VariantArticleRepeater>

Showing variant group properties

To show varaint group properties, use the pc:PropertyRepeater webcontrol. It renders both Varanit group and article properties. Following example shows how to show most common properties. Since the Property Repeater is used, it will iterate through all the custom property fields.

<pc:PropertyRepeater runat="server" Exclude="Description">
                    <HeaderTemplate>
                        <h2><web:WebSiteString runat="server" Name="ProductSpecification" /></h2>
                        <dl class="specifications">
                    </HeaderTemplate>
                    <FooterTemplate>
                        </dl>
                    </FooterTemplate>
                    <ItemTemplate>
                        <pc:ValueExists runat="server" >
                            <OnTrue>
                                <pc:PropertyTemplate runat="server">
                                    <ShortTextItemTemplate>
                                        <dt><pc:PropertyName runat="server" /></dt>
                                        <dd><pc:Text runat="server"/></dd>    
                                    </ShortTextItemTemplate>
                                    <LongSimpleTextItemTemplate>
                                        <dt><pc:PropertyName runat="server"/></dt>
                                        <dd><pc:Text runat="server" /></dd>
                                    </LongSimpleTextItemTemplate>
                                    <LongTextItemTemplate>
                                        <dt><pc:PropertyName runat="server"/></dt>
                                        <dd><pc:Text runat="server" /></dd>
                                    </LongTextItemTemplate>
                                    <NumberItemTemplate>
                                        <dt><pc:PropertyName runat="server"/></dt>
                                        <dd><pc:Number runat="server" /></dd>
                                    </NumberItemTemplate>
                                    <BooleanItemTemplate>
                                        <dt><pc:PropertyName runat="server" /></dt>
                                        <dd>
                                             <pc:Boolean runat="server" >
                                                <OnTrue><web:WebSiteString runat="server" Name="ProductYes" /></OnTrue>
                                                <OnFalse><web:WebSiteString runat="server" Name="ProductNo" /></OnFalse>
                                            </pc:Boolean>
                                        </dd>
                                    </BooleanItemTemplate>
                                    <DateTimeItemTemplate>
                                        <dt><pc:PropertyName runat="server" /></dt>
                                        <dd><pc:DateTime runat="server" /></dd>
                                    </DateTimeItemTemplate>
                                    <FileItemTemplate>
                                        <dt><pc:PropertyName runat="server"/></dt>
                                        <dd><pc:FileLink Attachment="true" runat="server" ><pc:FileName runat="server" /></pc:FileLink></dd>
                                    </FileItemTemplate>
                                    <ImageItemTemplate>
                                        <dt><pc:PropertyName runat="server" /></dt>
                                        <dd>
                                            <pc:ImageLink Attachment="false" target="_blank" runat="server" MaxHeight="3072" MaxWidth="4096">
                                                <pc:Image runat="server" MaxHeight="15" MaxWidth="15" />
                                                <pc:ImageName runat="server"/>
                                            </pc:ImageLink>
                                        </dd>
                                    </ImageItemTemplate>
                                </pc:PropertyTemplate>
                            </OnTrue>
                        </pc:ValueExists>                        
                    </ItemTemplate>
                </pc:PropertyRepeater>