Skip to content

Instantly share code, notes, and snippets.

@esitefinity
Created July 6, 2012 19:34

Revisions

  1. Steve Miller revised this gist Oct 12, 2012. No changes.
  2. Steve Miller revised this gist Jul 20, 2012. 2 changed files with 10 additions and 10 deletions.
    8 changes: 4 additions & 4 deletions ProductDetailViewZoom.ascx
    Original file line number Diff line number Diff line change
    @@ -1,17 +1,17 @@
    <%@ Control Language="C#" %>
    <%@ Import Namespace="System.ComponentModel" %>
    <%@ Import Namespace="Telerik.Sitefinity.Ecommerce.Catalog.Model" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Orders.Web.UI"
    <%@ Register Assembly="Telerik.Sitefinity.Ecommerce" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Orders.Web.UI"
    TagPrefix="sfOrders" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI.Fields"
    <%@ Register Assembly="Telerik.Sitefinity.Ecommerce" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI.Fields"
    TagPrefix="sfCatalog" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit"
    Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI"
    Assembly="Telerik.Sitefinity" %>
    Assembly="Telerik.Sitefinity.Ecommerce" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields"
    TagPrefix="sfFields" %>

    @@ -21,7 +21,7 @@
    </sf:ResourceLinks>
    <sf:ResourceLinks id="resourcesLinks2" runat="server" UseEmbeddedThemes="true" Theme="Default">
    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Basic.Styles.fancybox.css"
    Static="true" />
    Static="true" />
    </sf:ResourceLinks> --%>

    <!-- Add link to magiczoomplus.css file -->
    12 changes: 6 additions & 6 deletions ProductDetailview.ascx
    Original file line number Diff line number Diff line change
    @@ -1,17 +1,17 @@
    <%@ Control Language="C#" %>
    <%@ Import Namespace="System.ComponentModel" %>
    <%@ Import Namespace="Telerik.Sitefinity.Ecommerce.Catalog.Model" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Orders.Web.UI"
    <%@ Register Assembly="Telerik.Sitefinity.Ecommerce" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Orders.Web.UI"
    TagPrefix="sfOrders" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI.Fields"
    <%@ Register Assembly="Telerik.Sitefinity.Ecommerce" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI.Fields"
    TagPrefix="sfCatalog" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit"
    Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI"
    Assembly="Telerik.Sitefinity" %>
    Assembly="Telerik.Sitefinity.Ecommerce" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields"
    TagPrefix="sfFields" %>
    <sf:ResourceLinks id="resourcesLinks" runat="server">
    @@ -28,7 +28,7 @@
    <sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
    <templates>
    <sf:ConditionalTemplate Left="IsActive" Operator="Equal" Right="false" runat="server">
    <asp:Literal ID="Literal1" runat="server" Text="<%$Resources:OrdersResources, ProductNotAvailable %>" />
    <asp:Literal runat="server" Text="<%$Resources:OrdersResources, ProductNotAvailable %>" />
    </sf:ConditionalTemplate>

    <sf:ConditionalTemplate Left="IsActive" Operator="Equal" Right="true" runat="server">
    @@ -49,7 +49,7 @@

    <div class="sfproductImgsListWrp">
    <ul class="sfproductImgsList">
    <asp:Repeater ID="Repeater1" runat="server" DataSource='<%# new BindingList<ProductImage>(((IEnumerable<ProductImage>)Eval("Images")).Skip(1).ToList()) %>'>
    <asp:Repeater runat="server" DataSource='<%# new BindingList<ProductImage>(((IEnumerable<ProductImage>)Eval("Images")).Skip(1).ToList()) %>'>
    <ItemTemplate>
    <li class="sfproductImgWrp">
    <a href='<%# DataBinder.Eval(Container.DataItem, "Url") %>' rel="fancybox" class="sfproductImgLnk">
    @@ -69,7 +69,7 @@
    <%# Eval("Title") %>
    </h1>
    <div class="sfproductPrice">
    <sfCatalog:DisplayPriceField ID="DisplayPriceField1" runat="server" ObjectType="Product" ObjectId='<%# Eval("Id") %>' />
    <sfCatalog:DisplayPriceField runat="server" ObjectType="Product" ObjectId='<%# Eval("Id") %>' />
    </div>

    <sf:ProductDynamicFields id="productDynamicFieldsControl" ProductItem='<%# Page.GetDataItem() %>' runat="server" />
  3. Steve Miller revised this gist Jul 6, 2012. 1 changed file with 13 additions and 3 deletions.
    16 changes: 13 additions & 3 deletions ProductDetailViewZoom.ascx
    Original file line number Diff line number Diff line change
    @@ -14,9 +14,19 @@
    Assembly="Telerik.Sitefinity" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields"
    TagPrefix="sfFields" %>
    <!-- link to magiczoomplus.css file -->

    <%-- comment out the resouces for Fancybox --%>
    <%-- <sf:ResourceLinks id="resourcesLinks" runat="server">
    <sf:ResourceFile JavaScriptLibrary="JQueryFancyBox" />
    </sf:ResourceLinks>
    <sf:ResourceLinks id="resourcesLinks2" runat="server" UseEmbeddedThemes="true" Theme="Default">
    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Basic.Styles.fancybox.css"
    Static="true" />
    </sf:ResourceLinks> --%>

    <!-- Add link to magiczoomplus.css file -->
    <link href="/magiczoomplus/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen" />
    <!-- link to magiczoomplus.js file -->
    <!-- Add link to magiczoomplus.js file -->
    <script src="/magiczoomplus/magiczoomplus.js" type="text/javascript"></script>

    <div id="widgetStatus" runat="server" visible="false" class="sfErrorSummary sfTopMsg">
    @@ -52,7 +62,7 @@

    <div class="sfproductImgsListWrp">
    <ul class="sfproductImgsList">

    <%-- The repeater below has been changed to not skip over the main image, but to include this as a selectable iamge --%>
    <asp:Repeater ID="Repeater2" runat="server" Visible='<%# new BindingList<ProductImage>(((IEnumerable<ProductImage>)Eval("Images")).ToList()).Count() > 1 %>' DataSource='<%# new BindingList<ProductImage>(((IEnumerable<ProductImage>)Eval("Images")).ToList()) %>'>
    <ItemTemplate>
    <li class="sfproductImgWrp">
  4. Steve Miller created this gist Jul 6, 2012.
    108 changes: 108 additions & 0 deletions ProductDetailViewZoom.ascx
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,108 @@
    <%@ Control Language="C#" %>
    <%@ Import Namespace="System.ComponentModel" %>
    <%@ Import Namespace="Telerik.Sitefinity.Ecommerce.Catalog.Model" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Orders.Web.UI"
    TagPrefix="sfOrders" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI.Fields"
    TagPrefix="sfCatalog" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit"
    Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI"
    Assembly="Telerik.Sitefinity" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields"
    TagPrefix="sfFields" %>
    <!-- link to magiczoomplus.css file -->
    <link href="/magiczoomplus/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen" />
    <!-- link to magiczoomplus.js file -->
    <script src="/magiczoomplus/magiczoomplus.js" type="text/javascript"></script>

    <div id="widgetStatus" runat="server" visible="false" class="sfErrorSummary sfTopMsg">
    <asp:Label ID="widgetStatusMessage" runat="server" />
    </div>
    <div class="sfproductDetailsWrp">
    <sf:conditionaltemplatecontainer id="conditionalTemplate" runat="server">
    <templates>
    <sf:ConditionalTemplate Left="IsActive" Operator="Equal" Right="false" runat="server">
    <asp:Literal ID="Literal1" runat="server" Text="<%$Resources:OrdersResources, ProductNotAvailable %>" />
    </sf:ConditionalTemplate>

    <sf:ConditionalTemplate Left="IsActive" Operator="Equal" Right="true" runat="server">
    <telerik:RadListView ID="SingleItemContainer" ItemPlaceholderID="ItemContainer" AllowPaging="False" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
    <LayoutTemplate>
    <div class="sfproductDetails sfClearfix">
    <asp:PlaceHolder ID="ItemContainer" runat="server" />
    </div>
    </LayoutTemplate>
    <ItemTemplate>
    <div class="sfproductImgsWrp">
    <div class="sfproductMainImgWrp">

    <%-- Added Magic Toolbox Magic Zoom Plus below, including ID and REL tags and class--%>
    <a href='<%# Eval("PrimaryImageUrl") %>' id="Zoomer2" rel="zoom-position: inner; expand-position: center; zoom-position: #zoomWindow; zoom-width: 400px; zoom-width: 450px; selectors-effect: fade; selectors-change: mouseover;" class="MagicZoomPlus" >
    <img src='<%# Eval("ThumbnailUrl") %>' alt='<%# Eval("ThumbnailAlternativeText") %>' />
    </a>
    <%--
    <a href='<%# HttpUtility.HtmlAttributeEncode(Eval("PrimaryImageUrl") as string) %>' >
    <img src='<%# HttpUtility.HtmlAttributeEncode(Eval("Thumbnail.Url") as string) %>' alt='<%# HttpUtility.HtmlAttributeEncode(Eval("ThumbnailAlternativeText") as string) %>' />
    </a> --%>
    </div>

    <div class="sfproductImgsListWrp">
    <ul class="sfproductImgsList">

    <asp:Repeater ID="Repeater2" runat="server" Visible='<%# new BindingList<ProductImage>(((IEnumerable<ProductImage>)Eval("Images")).ToList()).Count() > 1 %>' DataSource='<%# new BindingList<ProductImage>(((IEnumerable<ProductImage>)Eval("Images")).ToList()) %>'>
    <ItemTemplate>
    <li class="sfproductImgWrp">
    <%-- Added Magic Toolbox rel tag and created an HREF pointing to the large image--%>
    <a rel="zoom-id: Zoomer2" rev="<%# DataBinder.Eval(Container.DataItem, "ThumbnailUrl") %>" href='<%# DataBinder.Eval(Container.DataItem, "Url") %>'>
    <asp:Image ID="Image2" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ThumbnailUrl") %>' Width='<%# (int)DataBinder.Eval(Container.DataItem, "ThumbnailWidth") %>' Height='<%# (int)DataBinder.Eval(Container.DataItem, "ThumbnailHeight") %>' />
    </a>
    </li>
    </ItemTemplate>
    </asp:Repeater>
    <%--
    <asp:Repeater ID="Repeater1" runat="server" DataSource='<%# new BindingList<ProductImage>(((IEnumerable<ProductImage>)Eval("Images")).Skip(1).ToList()) %>'>
    <ItemTemplate>
    <li class="sfproductImgWrp">
    <a href='<%# DataBinder.Eval(Container.DataItem, "Url") %>' rel="" class="sfproductImgLnk">
    <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") %>' />
    </a>
    </li>
    </ItemTemplate>
    </asp:Repeater> --%>
    </ul>
    </div>
    <asp:PlaceHolder ID="socialContainer" runat="server"></asp:PlaceHolder>
    </div>


    <div class="sfproductInfoWrp">
    <h1 class="sfproductTitle">
    <%# Eval("Title") %>
    </h1>
    <div class="sfproductPrice">
    <sfCatalog:DisplayPriceField ID="DisplayPriceField1" runat="server" ObjectType="Product" ObjectId='<%# Eval("Id") %>' />
    </div>

    <sf:ProductDynamicFields id="productDynamicFieldsControl" ProductItem='<%# Page.GetDataItem() %>' runat="server" />

    <div class="sfproductDescription">
    <%# Eval("Description") %>
    </div>
    <%-- Added Magic Toolbox Magic Zoom ID to define where I want my zoom window located--%>
    <div id="zoomWindow" style="position: absolute; top: 1px"></div>

    <div class="sfproductOptions">
    <sf:ProductOptionsControl id="productOptionsControl" ProductItem='<%# Page.GetDataItem() %>' runat="server" />
    </div>
    <sfOrders:AddToCartWidget ID="addToCartWidget" ProductId='<%# Eval("Id") %>' runat="server" />
    </div>
    </ItemTemplate>
    </telerik:RadListView>
    </sf:ConditionalTemplate>
    </templates>
    </sf:conditionaltemplatecontainer>
    </div>
    91 changes: 91 additions & 0 deletions ProductDetailview.ascx
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,91 @@
    <%@ Control Language="C#" %>
    <%@ Import Namespace="System.ComponentModel" %>
    <%@ Import Namespace="Telerik.Sitefinity.Ecommerce.Catalog.Model" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Orders.Web.UI"
    TagPrefix="sfOrders" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI.Fields"
    TagPrefix="sfCatalog" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit"
    Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Modules.Ecommerce.Catalog.Web.UI"
    Assembly="Telerik.Sitefinity" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields"
    TagPrefix="sfFields" %>
    <sf:ResourceLinks id="resourcesLinks" runat="server">
    <sf:ResourceFile JavaScriptLibrary="JQueryFancyBox" />
    </sf:ResourceLinks>
    <sf:ResourceLinks id="resourcesLinks2" runat="server" UseEmbeddedThemes="true" Theme="Default">
    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Basic.Styles.fancybox.css"
    Static="true" />
    </sf:ResourceLinks>
    <div id="widgetStatus" runat="server" visible="false" class="sfErrorSummary sfTopMsg">
    <asp:Label ID="widgetStatusMessage" runat="server" />
    </div>
    <div class="sfproductDetailsWrp">
    <sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
    <templates>
    <sf:ConditionalTemplate Left="IsActive" Operator="Equal" Right="false" runat="server">
    <asp:Literal ID="Literal1" runat="server" Text="<%$Resources:OrdersResources, ProductNotAvailable %>" />
    </sf:ConditionalTemplate>

    <sf:ConditionalTemplate Left="IsActive" Operator="Equal" Right="true" runat="server">
    <telerik:RadListView ID="SingleItemContainer" ItemPlaceholderID="ItemContainer" AllowPaging="False" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
    <LayoutTemplate>
    <div class="sfproductDetails sfClearfix">
    <asp:PlaceHolder ID="ItemContainer" runat="server" />
    </div>
    </LayoutTemplate>
    <ItemTemplate>
    <div class="sfproductImgsWrp">
    <div class="sfproductMainImgWrp">
    <%-- This is so that we can have the rel="fancybox" without resorting to an Attributes.Add() call --%>
    <a href='<%# HttpUtility.HtmlAttributeEncode(Eval("PrimaryImageUrl") as string) %>' rel="fancybox">
    <img src='<%# HttpUtility.HtmlAttributeEncode(Eval("Thumbnail.Url") as string) %>' alt='<%# HttpUtility.HtmlAttributeEncode(Eval("ThumbnailAlternativeText") as string) %>' />
    </a>
    </div>

    <div class="sfproductImgsListWrp">
    <ul class="sfproductImgsList">
    <asp:Repeater ID="Repeater1" runat="server" DataSource='<%# new BindingList<ProductImage>(((IEnumerable<ProductImage>)Eval("Images")).Skip(1).ToList()) %>'>
    <ItemTemplate>
    <li class="sfproductImgWrp">
    <a href='<%# DataBinder.Eval(Container.DataItem, "Url") %>' rel="fancybox" class="sfproductImgLnk">
    <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") %>' />
    </a>
    </li>
    </ItemTemplate>
    </asp:Repeater>
    </ul>
    </div>
    <asp:PlaceHolder ID="socialContainer" runat="server"></asp:PlaceHolder>
    </div>


    <div class="sfproductInfoWrp">
    <h1 class="sfproductTitle">
    <%# Eval("Title") %>
    </h1>
    <div class="sfproductPrice">
    <sfCatalog:DisplayPriceField ID="DisplayPriceField1" runat="server" ObjectType="Product" ObjectId='<%# Eval("Id") %>' />
    </div>

    <sf:ProductDynamicFields id="productDynamicFieldsControl" ProductItem='<%# Page.GetDataItem() %>' runat="server" />

    <div class="sfproductDescription">
    <%# Eval("Description") %>
    </div>

    <div class="sfproductOptions">
    <sf:ProductOptionsControl id="productOptionsControl" ProductItem='<%# Page.GetDataItem() %>' runat="server" />
    </div>
    <sfOrders:AddToCartWidget ID="addToCartWidget" ProductId='<%# Eval("Id") %>' runat="server" />
    </div>
    </ItemTemplate>
    </telerik:RadListView>
    </sf:ConditionalTemplate>
    </templates>
    </sf:ConditionalTemplateContainer>
    </div>