One of my favorite features in AspDotNetStorefront also happens to be one of the least used. Many products in your eCommerce store may end up having extra long product descriptions, and sometimes, that may cause the user to have to scroll to read it all, or they may miss other valuable information on that page, or they may see the 10 mile long product description, decide they don't feel like reading that much, and close the page altogether! So, how do you keep your product detail pages short and sweet without losing all of that valuable information? Spec Sheets! Spec sheets are great for storing additional information related to the product that there just isn't room for on the page. This feature creates a link for you on the page that goes to a pop up window that contains your extra details. This can be a bullet list of product specifications, manufacturer content, warranty information, or anything else product related. The page is even HTML, so you can put any text or images in here you like. To use this feature:

1. First create an HTML page with your favorite HTML editor, and name it productID.html, where 'productID' is the actual product ID of the product you'd like to add the spec sheet to.
If you're not sure what the product ID is, navigate to the page in your site, then take a look at the URL. It should look something like this: www.yourdomain.com/p-12-productname.aspx. Right after the 'p-' and before the 'productname', there's a number. This is your product ID. After you've created your spec sheet, upload your HTML file to the descriptions/productspecs folder of your site.
2. Login to your AspDotNetStorefront admin site, and navigate to the "edit product" screen.
3. Click on the Options tab on the far right. About halfway down the page, you'll see a couple of fields called "Spec Title" and "Spec Call".

4. Spec title is the actual link text that will show up on your product page. This should say something like "Click here!" or "Click for more info!". If you leave this field blank, the default text will appear, which simply says "Additional Information".
5. In the field below, enter the path to the HTML file you created that contains the information you want to appear in the pop up window. In this example, we're adding specs to Product ID 31, so my html file is 31.html and I've uploaded it to the descriptions/productspecs folder on my site.

Now, when I go to the product page, there's a link above the product description that goes to a pop up window with the HTML file. See this in action on our demo site: http://80demo.staging.vortx.com/p-31-mctavish-original-longboard.aspx In some cases, you might not have HTML editing software, or you may not have FTP access to your site. You can still use this great feature, all within the Admin site. Instead of creating an HTML file, create a new Topic. In version 8.0, this is found under Content > Manage Topics. Create a new topic, with the product ID as the title. This naming convention isn't absolutely necessary, you can name the file or the topic anything you like, but if you're using this feature on multiple products, using the product ID will help to keep them organized and separated. After you've created your topic with all of the information you'd like to appear in your pop up window, go to the product screen, and click on the Options tab. In the Spec Call field, enter "t2-31.aspx", where '31' is your topic name. You may have noticed that all topic links follow the format: "t-topicname.aspx". The 't2' prefix will link to a topic as well, but it also removes the template skin around it so your pop up window will only contain the topic itself without the frame of your site header, navigation, and footer. Another option with this feature is to show the spec sheet 'inline'. If the 'Specs Inline' radio button is set to yes, the html file or topic will appear directly on the product page. Read about more AspDotNetStoreFront

Tags: ADNSF, AspDotNetStoreFront, help, Product Descriptions, Spec Call, Spec Sheet, Specs

This entry was posted on Wednesday, December 31st, 2008 at 5:52 pm and is filed under AspDotNetStoreFront, Coder's Corner, Tips & Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.