How to Have an Awesome Home Page

by jasonrshaver 14. September 2011 22:23

So, you want to make a good impression on your customers?  Take a critical look at your website and think, “does my front page look like I want it?”  Likely you make some compromises because your template requires it.  This is all about how to get past that limit and do more with your site!

(Picture still coming)

Allowing Special Default Template

In the 800 eCommerce module, under Setup –> Application Configuration, do a search for HomeTemplate.  Set the Config Value to ‘hometemplate.ascx’.

image

Before You Start

This modification requires the modification, Helpers for Adding Server Side Controls In Interprise 5.6.22

Creating a HomeTemplate

This is something that you can go crazy about, or go really simple.  The simple way, take your template.ascx file, make a copy, and rename it ‘hometemplate.ascx’.  Here are some common things you would want to do to this page:

  • Remove any redundant menus.  Some sites have both a menu on the top and a menu on the left.  Consider removing one of them. 
  • Refine your 'skin’ by hand to improve its layout.  This is the one page where you can safely do things on a by-pixel basis.
  • Remove as much distracting content as possible, make it really easy for your visitors to find what the next step is.
  • Start telling a ‘story’ that starts with your home page and ends with your customers placing an order.

Once you get your HomeTemplate clean of clutter, we need to remove the ‘automatic’ content from it.  Look for these lines:

  1. <!-- CONTENTS START -->
  2. <asp:PlaceHolder ID="PageContent" runat="server"></asp:PlaceHolder>
  3. <!-- CONTENTS END -->

Delete them. 

Promotional Image Rotator

So, now what can we do here?  Let’s create an awesome image rotator!  Now, I use Telerik controls myself, but I am sure a quick Google search can help you find something free if that’s more your style.  I tend to be willing to pay for a product that is supported by such an awesome company.

To use some DataBound controls that use the “System.Web.UI.DataboundLiteralControl”, we have to make a very minor change to the default App_Code\SkinBase.cs file.  Find the ProcessControl method and replace it with this one:

  1. private void ProcessControl(Control ctl, bool includeChildren)
  2. {
  3.     IEditableTextControl e = ctl as IEditableTextControl;
  4.     if (e != null) e.Text = ReplaceTokens(e.Text);
  5.     else
  6.     {
  7.         ITextControl t = ctl as ITextControl;
  8.         if (t != null &&
  9.             t.GetType() != typeof(System.Web.UI.DataBoundLiteralControl))
  10.         {
  11.             t.Text = ReplaceTokens(t.Text);
  12.         }
  13.     }
  14.     IValidator v = ctl as IValidator;
  15.     if (v != null)
  16.     {
  17.         v.ErrorMessage = ReplaceTokens(v.ErrorMessage);
  18.     }
  19.     if (includeChildren && ctl.HasControls())
  20.     {
  21.         IterateControls(ctl.Controls);
  22.     }
  23. }

The only difference is that we ignore DataBound types (or at least the one that causes errors).  Now that the boring stuff is out of the way.  Lets add the control to our hometemplate.ascx:

  1.                     <div>
  2.     <telerik:RadRotator ID="Rotator1" runat="Server" Width="750" Height="300"
  3.                         ItemHeight="300" ItemWidth="750" ScrollDirection="Down"
  4.                         DataSourceID="xmlDataSource1" ScrollDuration="1500"
  5.                         FrameDuration="3500" >
  6.         <ItemTemplate>
  7.             <div class="apiContainer">
  8.                 <div class="apiContent">
  9.                     <a href="<%# XPath("Link/@Url") %>">
  10.                         <img src="<%# XPath("Image/@Url") %>"
  11.                              alt="<%# XPath("Image/@Alt") %>" />
  12.                     </a>
  13.                 </div>
  14.             </div>
  15.         </ItemTemplate>
  16.     </telerik:RadRotator>
  17.     <asp:XmlDataSource ID="xmlDataSource1" runat="Server" DataFile="images/ttx/Promo.xml">
  18.     </asp:XmlDataSource>
  19. </div>

And add the following to the SetupControlsRequiringScriptManager in App_Code\SkinBase.cs (added in the Begin You Begin step) right after the comment:

  1. // script.Append(SetupServerControl(frm.FindControl("MyControlId") as WebControl));
  2. script.Append(SetupServerControl(frm.FindControl("Rotator1") as WebControl, "            var oRotator = $find(\"Rotator1\")\n            oRotator.repaint();\n"));

Getting Data Into Your Rotator

The RadRotator control’s data loading is handled by the asp:XmlDataSource control.  As pasted above, the application will load a file located at /images/ttx/Promo.xml, you can change this path to something that makes sense for you, but here is the file format you should use:

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <root>
  3.     <PromoItem>
  4.         <Title></Title>
  5.         <Image Url="/images/ttx/FrontAdXiomInStock.jpg"
  6.                alt="XIOM in stock"/>
  7.         <Link Url="/t-NewsXiomInStock.aspx" />
  8.     </PromoItem>
  9.     <PromoItem>
  10.         <Title></Title>
  11.         <Image Url="/images/ttx/GalaxyRubberComparisons.png"/>
  12.         <Link Url="/t-NewsXiomInStock.aspx" />
  13.     </PromoItem>
  14. </root>

For each image/add you want to use, create a new PromoItem with the elements/attributes shown.  Remember to use alt tags on your images.  It is better for your search results AND in some cases, it is the law.

For the Link Url, you can create topics, one for each promotion.  You could also just link to a product, category, manufacturer, or whatever you want.

Now, if you run your site, you will notice you have an awesome rotating promotion in your site!

Loading Promo Data From a Topic

But wait, there’s more!  How about using a topic instead of an XML file you say?  Easy.  Change the asp:XmlDataSource to look like this:"

  1. <asp:XmlDataSource ID="xmlDataSource1" runat="Server" >
  2.     <Data>
  3.     (!Topic Name="PromoData"!)
  4.     </Data>
  5. </asp:XmlDataSource>

And then add a topic to your website that looks something like this:

(Click to enlarge)

image

More in the upcoming Part 2!

Tags:

Blog

Submit to DotNetKicks...
Permalink | Comments (0)

About the author

I am a software developer working for Microsoft in Redmond, WA.  In addition, my wife and I own TTXOnline, what is likely the 3rd largest table tennis store in the US.

Month List

Page List