Tutorial 2: Product Information Popup Window

Our second tutorial will take us through the journey of creating a Product Information popup window. This tutorial shows how to use the Advanced Popup Window class library to assign a popup window behavior to a hyperlink displayed below the product thumbnail picture on the Product Detail page using template #1. The popup window should display the large image of the product saved in the StoreFront database, as well as some product information.

The sample web page used by the popup window to display this information is called "ShowProductInfo.aspx" and is provided with the class library as an example. This file can be used directly in a production site, and you can easily customize it to match your site design if necessary.

Let's walk through the steps involved in providing this behavior. This tutorial includes the following sections:

Modifying the Product Detail Template

For the purpose of this tutorial, let's modify the product detail template and add a "Click to Enlarge" link just below the product thumbnail. Open your ProductDetail1.ascx file and locate the same code as in Tutorial 1: Introduction. This time, add the following code (in red) to the page:

<td class="Content" id="ImageCell" vAlign="top"><asp:panel id="ProductImage" Runat="server"><IMG

src='<%# DataBinder.Eval(Me,"ImageString") %>'></asp:panel>
<div align="center"><asp:HyperLink ID="ClickToEnlarge" Runat="server" NavigateUrl="Javascript:;">Click to Enlarge</asp:HyperLink></div>

</td>

As you can see, we have added an asp:HyperLink server control, we gave it an ID and we specified the runat="server" attribute. The NavigateUrl property is set to "Javascript:;" so that no link is provided but the hyperlink style is still rendered by the client browser. In addition, we encase this server control in a DIV tag to center the text of the link underneath the product thumbnail picture.

We are now ready to use the class library in the code-behind file.

Assigning the Popup Behavior to the asp:HyperLink Server Control

As mentionned above, you need to implement the add-on in the code-behind. So open the ProductDetail1.ascx.vb file. Towards the top of the page, locate the many lines starting with "Protected WithEvents [...]". Make sure you have a similar line for the HyperLink control we just added to the user control. If it does not appear, then add the following line after the last "Protected WithEvents [...]" line:

Protected WithEvents ClickToEnlarge As System.Web.UI.WebControls.HyperLink

Then locate the Page_Load event handler, and go to the end of the method. Just before the "End Sub" line, insert a new line and type the following code (if you followed Tutorial 1, you can leave the code you added before and insert this new code just after):

'Create an instance of the AdvancedPopupWindow class.
Dim myPopup2 As New GMS.Framework.Utilities.AdvancedPopupWindow.AdvancedPopupWindow
' Set the properties
myPopup2.TriggerControl = ClickToEnlarge
myPopup2.PopupUrl = "ShowProductInfo.aspx"
myPopup2.TriggerEvent = "OnMouseOver"
myPopup2.ProductQueryStringKeyName = "ProductID"
myPopup2.ProductID = MyBase.Product.ProductID
myPopup2.Width = 600
myPopup2.Height = 400
' Register the popup behavior
myPopup2.RegisterProductPopup()

Note for Developers: an alternative coding style consists in importing the GMS.Framework.Utilities.AdvancedPopupWindow namespace in your code, allowing you to call the empty constructor without using the fully qualified name of the class.

Ignoring the comment lines (the lines starting with a single-quote character), the first line of code creates an instance of the AdvancedPopupWindow class. The following six lines assign values to properties of the class, as follows:

The TriggerControl property represents the control to which the popup behavior should be registered. In our case, we use the asp:HyperLink control which has an ID equal to "ClickToEnlarge". Therefore, we assign the control's name (without quotes) to the TriggerControl property.
The PopupUrl property is the URL of the web page to be displayed in the popup window. In our case, we use the sample page provided with the add-on to display a product image along with some additional information. This page has a "Close Window" link at the top, followed by a horizontal ruler, and then the image itself.
The TriggerEvent represents the client side event that will trigger the opening of the popup window. By default, the trigger event is OnClick (when the user clicks the mouse button). For our example, we use OnMouseOver (when the user hover over the link).
The ProductQueryStringKeyName property represents the name of the value passed in the query string for the poup window. The sample page provided with the add-on to display product information expects to read the path of the image in the query string under the "ProductID" key name. The value passed as the ProductID in the query string is then used by the popup window to display dynamic content related to the product.
The Width property represents the width in pixels of the popup window.
The Height property represents the height in pixels of the popup window.

Finally, we register the behavior by calling the RegisterProductPopup() method of the AdvancedPopupWindow object. Try it on your site: compile the site, then navigate to a product detail page. When you mouse over the "Click to Enlarge" link (yes, I know, it should read "Mouse Over to Enlarge"...), you should see the popup window open, as per the following example:

Using the AdvancedPopupWindow Specialized Constructor

As for the image popup window, we provide a specialized constructor allowing you to generate the behavior from the prior example in a single line of code. To see how it works, replace the code from the prior example with the following:

' Register a popup window to display the large image of a product
Dim myPopup2 As New GMS.Framework.Utilities.AdvancedPopupWindow.AdvancedPopupWindow( _
ClickToEnlarge, "ShowProductInfo.aspx", Product.ProductID, 600, 400)

After writing a comment line explaining what we do (once again, remember that it is good practice to comment your code), we add a single line of code, calling a specialized constructor of the AdvancedPopupWindow class. This constructor takes five parameters:

a control, which will be automatically saved in the TriggerControl property,
a URL, which will be saved in the PopupUrl property,
a Long value representing the Product ID,
an Integer value representing the width of the popup window, and
an Integer value representing the height of the popup window.

Then, the constructor automatically calls the RegisterProductPopup() method for you.

Let's do some Magic with the RegisterStandardPopup Method!

Let's push our example, to display a product info popup window that resizes itself automatically depending on the picture displayed. In other words, let's combine the example from Tutorial 1 and Tutorial 2 together. At the same time, let's have fun using some of the other properties of the Advanced Popup Window class. The popup window will be automatically sized so that no scrolling is necessary: we will therefore remove the scroll bars. At the same time, we will add a menu bar, a status bar, a navigation bar, so that the window looks more like a real browser window.

In the code-behind file, replace the code from Tutorial 2 with the following lines:

'Create an instance of the AdvancedPopupWindow class.
Dim myPopup2 As New GMS.Framework.Utilities.AdvancedPopupWindow.AdvancedPopupWindow
' Get the image dimensions
Dim myWidth As Integer
Dim myHeight As Integer
GMS.Framework.Utilities.AdvancedPopupWindow.AdvancedPopupWindow.GetImageDimensions(Product.LargeImage, myWidth, myHeight)
' Add the margins as necessary
myWidth += 20
myHeight += 130
' Set the properties
myPopup2.TriggerControl = ClickToEnlarge
myPopup2.PopupUrl = "ShowProductInfo.aspx"
myPopup2.TriggerEvent = "OnClick"
myPopup2.QueryString = "ProductID=" + MyBase.Product.ProductID.ToString()
myPopup2.Width = myWidth
myPopup2.Height = myHeight
myPopup2.HasMenuBar = True
myPopup2.HasStatusBar = True
myPopup2.HasScrollBars = False
myPopup2.HasNavigationToolbar = True
myPopup2.HasLocationToolbar = True
' Register the popup behavior
myPopup2.RegisterStandardPopup()

After creating the instance of the AdvancedPopupWindow class, we use a utility method of the class to get the actual dimensions of the image from the file on disk: we declare two variables which will hold the width and height respectively, then we call the GetImageDimensions static method of the AdvancedPopupWindow class, passing the relative URL to the image file, and the two variables created for the width and height respectively. The static method will store the image dimensions in these two variables.

On the next two lines, we add a margin to the width and height, to acommodate for the design of the ShowProductInfo.aspx page which will be displayed by the popup window, and also to take into account the presence or not of the scrollbars.

The next step is to set several properties. We will review only those that we have not used so far:

QueryString: the value assigned to this property is the complete querystring passed to the popup window URL. You can include as many name/value pairs as you desire.
HasMenuBar: set to True or False to indicate if the popup window displays a menu bar.
HasStatusBar: set to True or False to indicate if the popup window displays a status bar.
HasScrollBars: set to True or False to indicate if the popup window displays scrollbars as needed.
HasNavigationToolbar: set to True or False to indicate if the popup window displays its navigation toolbar.
HasLocation: set to True or False to indicate if the popup window displays its address or link bar (allowing you to enter which URL you want to browse to).

Finally, we call the RegisterStandardPopup method of the Advanced Popup Window class. This methods registers the necessary Javascript routines providing the popup behavior, based on the values specified in the properties of the instance of the class (in our example, the properties of the myPopup2 variable). Here is the result:

Several other properties are available. We invite you to discover them in our Reference and Developer API section.

See Also

Tutorials: Tutorial 1: Image Popup Window

Support: Contact and Purchase Information | Licensing the AdvancedPopupWindow Class Library