More in this section
Forums / Ecommerce / Displaying DocumentsAndFiles in Product Detail Widget Template

Displaying DocumentsAndFiles in Product Detail Widget Template

The forums are in read-only mode. In case that you want to directly contact the Progress Sitefinity team use the support center. In our Google Plus group you can find more than one thousand Sitefinity developers discussing different topics. For the Stack Overflow threads don’t forget to use the “Sitefinity” tag.
5 posts, 1 answered
  1. Brandon
    Brandon avatar
    19 posts
    Registered:
    16 Jan 2013
    08 Feb 2013
    Link to this post

    Hello,

    I have a series of products that can be purchased as printed and shipped brochures. But, each of these brochures is also available as a free PDF download. I have added the PDF to the products as a "Documents and Other Files", but the widget template doesn't display the file at all.

    When I go into Design > Widget Templates, and I click to edit the template for "Product Details". In the "Insert..." bar on the right, under "Other Data" there are two possible fields:

    1. DocumentsAndFiles
    2. Files

    When I click to add "DocumentsAndFiles" it puts in this code:

    <sitefinity:TextField runat="server" DisplayMode="Read" Value='<%# Eval("DocumentsAndFiles")%>' />

    Which obviously doesn't help as it just does a .toString() apparently, and the page prints out:

    System.Collections.Generic.List`1[Telerik.Sitefinity.Ecommerce.Catalog.Model.ProductFile]

    How can I at least grab the first list item and snag it's content URL, so that I can fill in something like this for the template:

    <a href='<%# (System.Collections.Generic.List)Eval("DocumentsAndFiles")[0].DocumentUrl %>'>FREE PDF - Download Now</a>

    Thanks,
    Brandon

  2. Brandon
    Brandon avatar
    19 posts
    Registered:
    16 Jan 2013
    09 Feb 2013 in reply to Brandon
    Link to this post

    OK, so I have more info on this topic, but may need a fresh set of eyes to help really identify it...

    The required tag for adding the files to the page (I got from the default template for Product Details):

    1.<div class="sfProductDocumentsAndFiles">   
    2.     <sf:ProductDocumentsAndFilesControl id="productDocumentsAndFilesControl" ProductItem='<%# Page.GetDataItem() %>' runat="server" />
    3.</div>

    So I added the above code to my template, and it puts on the rendered container DIV for the DocumentsAndFiles, but it is empty, like this:

    1.<div class="sfProductDocumentsAndFiles">  
    2.     <div id="ctl00_BodyContent_C004_productsFrontendDetail_ctl00_ctl00_SingleItemContainer_ctrl0_productDocumentsAndFilesControl"></div>
    3.</div>

    I then compared my template file to the default one, making sure all the control directives at the top matched. They do. I noticed that my "sfProductDocumentsAndFiles" DIV though was not under the same parent DIV as the default, so I moved it to be inside the "sfproductInfoWrp" DIV just like the default template does. ...strangely, at this point, I saw the download link (with PDF icon) and it worked...the first time I viewed the page...after that coming back to the page, it hasn't shown up again...

    Here's the code I'm using in the template that I *want* to use:

    001.<%@ Control Language="C#" %>
    002.<%@ Import Namespace="System.ComponentModel" %>
    003.<%@ Import Namespace="Telerik.Sitefinity.Ecommerce.Catalog.Model" %>
    004.<%@ Register Assembly="Telerik.Sitefinity.Ecommerce" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Orders.Web.UI"
    005.    TagPrefix="sfOrders" %>
    006.<%@ Register Assembly="Telerik.Sitefinity.Ecommerce" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI.Fields"
    007.    TagPrefix="sfCatalog" %>
    008.<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
    009.<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
    010.<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit"
    011.    Assembly="Telerik.Sitefinity" %>
    012.<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    013.<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI"
    014.    Assembly="Telerik.Sitefinity.Ecommerce" %>
    015.<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields"
    016.    TagPrefix="sfFields" %>
    017.<%@ Register Assembly="InGen.Sitefinity.ProductReviews" Namespace="InGen.Sitefinity.ProductReviews" TagPrefix="ipr" %>
    018.<sf:ResourceLinks id="resourcesLinks" runat="server">
    019.    <sf:ResourceFile JavaScriptLibrary="JQueryFancyBox" />
    020.</sf:ResourceLinks>
    021.<sf:ResourceLinks id="resourcesLinks2" runat="server" UseEmbeddedThemes="true" Theme="Default">
    022.    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Basic.Styles.fancybox.css"
    023.        Static="true" />
    024.</sf:ResourceLinks>
    025.<div id="widgetStatus" runat="server" visible="false" class="sfErrorSummary sfTopMsg">
    026.    <asp:Label ID="widgetStatusMessage" runat="server" />
    027.</div>
    028.<div class="sfproductDetailsWrp">
    029.<sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
    030.    <templates>
    031.        <sf:ConditionalTemplate Left="IsActive" Operator="Equal" Right="false" runat="server">
    032.            <asp:Literal ID="Literal1" runat="server" Text="<%$Resources:OrdersResources, ProductNotAvailable %>" />
    033.        </sf:ConditionalTemplate>
    034. 
    035.        <sf:ConditionalTemplate Left="IsActive" Operator="Equal" Right="true" runat="server">
    036.            <telerik:RadListView ID="SingleItemContainer" ItemPlaceholderID="ItemContainer" AllowPaging="False" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
    037.                <LayoutTemplate>
    038.                    <div class="sfproductDetails sfClearfix">
    039.                        <asp:PlaceHolder ID="ItemContainer" runat="server" />
    040.                    </div>
    041.                </LayoutTemplate>
    042.                <ItemTemplate>
    043.                  <div class="sfproductInfoWrp">
    044.                   
    045.                        <span class="promo-callout">
    046.                            <%# (Eval("SpecialPromoNew") == null || (bool)Eval("SpecialPromoNew") == false) ? "" : "<span class='new'>New</span>" %>
    047.                                <%# (Eval("SpecialPromoUpdated") == null || (bool)Eval("SpecialPromoUpdated") == false) ? "" : "<span class='updated'>Updated</span>" %>
    048.                                <%# (Eval("SpecialPromoReduced") == null || (bool)Eval("SpecialPromoReduced") == false) ? "" : "<span class='reduced'>Reduced Price</span>" %>
    049.                                <%# (Eval("SpecialPromoLimited") == null || (bool)Eval("SpecialPromoLimited") == false) ? "" : "<span class='limited'>Limited Quantity</span>" %>
    050.                        </span>
    051.                     
    052.                        <h1 class="sfproductTitle">
    053.                            <%# Eval("Title") %>
    054.                        </h1>
    055.                        <div class="product-modified-date">
    056.                          <sitefinity:TextField runat="server" DisplayMode="Read" Value='<%# Eval("LastModified")%>' />
    057.                        </div>
    058.                        <div class="sfproductDescription">
    059.                            <%# Eval("Description") %>
    060.                          </div>
    061.                        <div class="sfproductSpecs clearfix">
    062.                          <%# Eval("Specifications") == null ? "" : "<br/>" + Eval("Specifications") %>
    063.                        </div>
    064.                          <div class="sfProductDocumentsAndFiles">   
    065.                              <a href='#'>FREE PDF - Download Now</a>
    066.                              <sf:ProductDocumentsAndFilesControl id="productDocumentsAndFilesControl" ProductItem='<%# Page.GetDataItem() %>' runat="server" />
    067.                        </div>
    068.                   </div>
    069.                   <div class="product-detail-left">
    070.                     
    071.                    
    072.                      
    073.                     <div class="rule"> </div>
    074.                           
    075.                        <div class="sfproductOptions clearfix">
    076.                            <sf:ProductOptionsControl id="productOptionsControl" ProductItem='<%# Page.GetDataItem() %>' runat="server" />
    077.                        </div>
    078.                        
    079.            <div class="sfproductPrice">
    080.                            <sfCatalog:DisplayPriceField runat="server" ObjectType="Product" ObjectId='<%# Eval("Id") %>' />
    081.                        </div>
    082.                 
    083.                         
    084.                        <div class='sfproductAddtoCart <%# (Eval("CalltoOrder") == null || (bool)Eval("CallToOrder") == false) ? "" : "hide" %>'>
    085.                            <sfOrders:AddToCartWidget ID="addToCartWidget" ProductId='<%# Eval("Id") %>' runat="server" />
    086.                        </div>
    087.                         
    088.                        <div class='sfproductCallToOrder <%# (Eval("CalltoOrder") == null || (bool)Eval("CallToOrder") == false) ? "hide" : "" %>'>
    089.                          <div class="prmCust hide">For Premium Customization:</div>
    090.                          Contact <b>Vince Stone</b> at <b>800-638-9797 Ext. 2610</b> <br/>
    091.                  or <a href="mailto:vinston@atlasworldgroup.com">vinston@atlasworldgroup.com</a>  
    092.                        </div>
    093.                           
    094.                          <div class="sfproductImgsWrp">
    095.                        <div class="sfproductMainImgWrp">
    096.                            <%-- This is so that we can have the rel="fancybox" without resorting to an Attributes.Add() call --%>
    097.                            <%-- <a href='<%# HttpUtility.HtmlAttributeEncode(Eval("PrimaryImageUrl") as string) %>' rel="fancybox"> --%>
    098.                                <img src='<%# HttpUtility.HtmlAttributeEncode(Eval("PrimaryImageUrl") as string) %>' alt='<%# HttpUtility.HtmlAttributeEncode(Eval("ThumbnailAlternativeText") as string) %>' />
    099.                            <%-- </a> --%>
    100.                        </div>
    101. 
    102.                         
    103.                        <asp:PlaceHolder ID="socialContainer" runat="server"></asp:PlaceHolder>
    104.                    </div>
    105.                               
    106.                               
    107.                      <div class="sfProductTagsWrp">
    108.                        <h3>Tags</h3>
    109.                        <sitefinity:FlatTaxonField ID="FlatFieldControl" DisplayMode="Read" runat="server" WebServiceUrl="~/Sitefinity/Services/Taxonomies/FlatTaxon.svc" AllowMultipleSelection="true" TaxonomyId="CB0F3A19-A211-48a7-88EC-77495C0F5374" TaxonomyMetafieldName="Tags" Expanded="false" ExpandText="ClickToAddTags" BindOnServer="true" HideWhenNoTaxaFound="true" />
    110.                      </div>       
    111.                               
    112.                  </div>
    113.                  <div class="product-detail-right">
    114.                     <div class="product-detail-favorites">
    115.                        
    116.                        
    117.      <fav:FavoriteButtonView
    118.    ImageUrl="~/resources/favorite.png"
    119.    FavoritedImageUrl="~/resources/delete.png"
    120.    ID="FavoriteButton1"
    121.    ContentType="Products"
    122.    ItemId='<%# Eval("Id") %>'
    123.    ShowFavoritesCount="true"
    124.        LayoutTemplatePath="~/resources/Favorites/FavoriteButtonLayout.ascx"               
    125.    runat="server" />
    126.                     
    127.                        
    128.                    </div>
    129.                    <div class="product-detail-reviews">
    130.            <ipr:ProductReviewList ID="ProdReviewList" ProductId='<%# Eval("Id") %>' ReviewTextRows='5' ReviewTextCols='50' runat="server" />
    131.                    </div>
    132.                   </div>
    133.                     
    134.                </ItemTemplate>
    135.            </telerik:RadListView>
    136.        </sf:ConditionalTemplate>
    137.    </templates>
    138.</sf:ConditionalTemplateContainer>
    139.</div>

    For the record...Everything else on the page displays just fine. No errors, or anything like that.

    And for reference, here is the code from the default Product Detail template:

    01.<%@ Control Language="C#" %>
    02.<%@ Import Namespace="System.ComponentModel" %>
    03.<%@ Import Namespace="Telerik.Sitefinity.Ecommerce.Catalog.Model" %>
    04.<%@ Register Assembly="Telerik.Sitefinity.Ecommerce" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Orders.Web.UI"
    05.    TagPrefix="sfOrders" %>
    06.<%@ Register Assembly="Telerik.Sitefinity.Ecommerce" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI.Fields"
    07.    TagPrefix="sfCatalog" %>
    08.<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
    09.<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
    10.<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit"
    11.    Assembly="Telerik.Sitefinity" %>
    12.<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    13.<%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI"
    14.    Assembly="Telerik.Sitefinity.Ecommerce" %>
    15.<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields"
    16.    TagPrefix="sfFields" %>
    17.<sf:ResourceLinks id="resourcesLinks" runat="server">
    18.    <sf:ResourceFile JavaScriptLibrary="JQueryFancyBox" />
    19.</sf:ResourceLinks>
    20.<sf:ResourceLinks id="resourcesLinks2" runat="server" UseEmbeddedThemes="true" Theme="Default">
    21.    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Basic.Styles.fancybox.css"
    22.        Static="true" />
    23.</sf:ResourceLinks>
    24.<div id="widgetStatus" runat="server" visible="false" class="sfErrorSummary sfTopMsg">
    25.    <asp:Label ID="widgetStatusMessage" runat="server" />
    26.</div>
    27.<div class="sfproductDetailsWrp">
    28.<sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
    29.    <templates>
    30.        <sf:ConditionalTemplate Left="IsActive" Operator="Equal" Right="false" runat="server">
    31.            <asp:Literal ID="Literal1" runat="server" Text="<%$Resources:OrdersResources, ProductNotAvailable %>" />
    32.        </sf:ConditionalTemplate>
    33. 
    34.        <sf:ConditionalTemplate Left="IsActive" Operator="Equal" Right="true" runat="server">
    35.            <telerik:RadListView ID="SingleItemContainer" ItemPlaceholderID="ItemContainer" AllowPaging="False" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
    36.                <LayoutTemplate>
    37.                    <div class="sfproductDetails sfClearfix">
    38.                        <asp:PlaceHolder ID="ItemContainer" runat="server" />
    39.                    </div>
    40.                </LayoutTemplate>
    41.                <ItemTemplate>
    42.                    <div class="sfproductImgsWrp">
    43.                        <div class="sfproductMainImgWrp">
    44.                            <%-- This is so that we can have the rel="fancybox" without resorting to an Attributes.Add() call --%>
    45.                            <a href='<%# HttpUtility.HtmlAttributeEncode(Eval("PrimaryImageUrl") as string) %>' rel="fancybox">
    46.                                <img src='<%# HttpUtility.HtmlAttributeEncode(Eval("Thumbnail.Url") as string) %>' alt='<%# HttpUtility.HtmlAttributeEncode(Eval("ThumbnailAlternativeText") as string) %>' />
    47.                            </a>
    48.                        </div>
    49. 
    50.                        <div class="sfproductImgsListWrp">
    51.                            <ul class="sfproductImgsList">
    52.                                <asp:Repeater ID="Repeater1" runat="server" DataSource='<%# new BindingList<ProductImage>(((IEnumerable<ProductImage>)Eval("Images")).Skip(1).ToList()) %>'>
    53.                                    <ItemTemplate>
    54.                                        <li class="sfproductImgWrp">
    55.                                            <a href='<%# DataBinder.Eval(Container.DataItem, "Url") %>' rel="fancybox" class="sfproductImgLnk">
    56.                                                <asp:Image ID="Image1" CssClass="sfproductImg" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ThumbnailUrl") %>' Width='<%# (int)DataBinder.Eval(Container.DataItem, "ThumbnailWidth") %>' Height='<%# (int)DataBinder.Eval(Container.DataItem, "ThumbnailHeight") %>' />
    57.                                            </a>
    58.                                        </li>
    59.                                    </ItemTemplate>
    60.                                </asp:Repeater>
    61.                            </ul>
    62.                        </div>
    63.                        <asp:PlaceHolder ID="socialContainer" runat="server"></asp:PlaceHolder>
    64.                    </div>
    65. 
    66.                     
    67.                    <div class="sfproductInfoWrp">
    68.                        <h1 class="sfproductTitle">
    69.                            <%# Eval("Title") %>
    70.                        </h1>
    71.                        <div class="sfproductPrice">
    72.                            <sfCatalog:DisplayPriceField runat="server" ObjectType="Product" ObjectId='<%# Eval("Id") %>' />
    73.                        </div>
    74. 
    75.                        <sf:ProductDynamicFields id="productDynamicFieldsControl" ProductItem='<%# Page.GetDataItem() %>' runat="server" />
    76. 
    77.                        <div class="sfproductDescription">
    78.                            <%# Eval("Description") %>
    79.                        </div>
    80. 
    81.                        <div class="sfproductOptions">
    82.                            <sf:ProductOptionsControl id="productOptionsControl" ProductItem='<%# Page.GetDataItem() %>' runat="server" />
    83.                        </div>
    84. 
    85.                        <div class="sfProductDocumentsAndFiles">
    86.                            <sf:ProductDocumentsAndFilesControl id="productDocumentsAndFilesControl" ProductItem='<%# Page.GetDataItem() %>' runat="server" />
    87.                        </div>
    88. 
    89.                        <sfOrders:AddToCartWidget ID="addToCartWidget" ProductId='<%# Eval("Id") %>' runat="server" />
    90.                    </div>
    91.                </ItemTemplate>
    92.            </telerik:RadListView>
    93.        </sf:ConditionalTemplate>
    94.    </templates>
    95.</sf:ConditionalTemplateContainer>
    96.</div>

  3. Brandon
    Brandon avatar
    19 posts
    Registered:
    16 Jan 2013
    09 Feb 2013 in reply to Brandon
    Link to this post

    I'm on Sitefinity 5.2, by the way.

  4. Jochem Bökkers
    Jochem Bökkers avatar
    787 posts
    Registered:
    13 Aug 2007
    09 Feb 2013 in reply to Brandon
    Link to this post

    Hey Brandon,

    The price has to be displayed/called prior to the documents and files in order for files to show up.

    So lines 64/67 have to come after lines 79/81 - or in code:

    <div class="sfproductPrice">
        <sfCatalog:DisplayPriceField runat="server" ObjectType="Product" ObjectId='<%# Eval("Id") %>' />
    </div>
     
    <div class="sfProductDocumentsAndFiles">
        <sf:ProductDocumentsAndFilesControl id="productDocumentsAndFilesControl" ProductItem='<%# Page.GetDataItem() %>' runat="server" />
    </div>

    this ensures it works. 

    Or if you feel like playing around further, tweak the code so the ObjectType & ObjectId are set prior to referring to a ProjectItem.

    Jochem


    Answered
  5. Brandon
    Brandon avatar
    19 posts
    Registered:
    16 Jan 2013
    10 Feb 2013 in reply to Jochem Bökkers
    Link to this post

    Jochem, thank you so much! Reordering the widget template items did the trick. Interesting...

5 posts, 1 answered