SWF Viewer for ASPDotNetStoreFront

ASPDotNetStoreFront SWF Image Viewer Popup

SWF Image Viewer Demo (this is a live site, so if you order something, you will be charged!)

If you are using ASPDotNetStoreFront for your shopping cart, then you know how the popup image viewer looks and to me, it doesn’t look all that great. After working with ASPDNSF for some time, I am finally starting to ‘get it’ and I thought I would share some of my secrets for working with this shopping cart.

You’re going to need a little working knowledge of ASPDNSF to do this, so if you’re not comfortable doing this yourself, contact me and I can set this up for your site. The code provided below does work, but is not as complete as it could be… (I can’t give away all my secrets). If you need help setting this up and would like the complete package (including SWF viewer), I charge a flat rate of $250 to set this up and it comes with everything you’ll need, plus a few extra tweaks you’re not going to find in this guide.

First of all, you’re going to need a SWF for making a gallery page. I used Zoomify Design as it’s inexpensive, simple to use and works very well. Zoomify Design costs $29 and it’s worth every penny to me. I am going to assume you know how to use Zoomify and if you don’t, read the documentation. It’s pretty easy and once you get it set up, it’s easy to make the files for your call to a SWF popup image viewer.

Create a flash directory to store your files on your server. I created my flash folder inside the root of the website, but you can choose almost any location, as long as the folder is readable.

You’re going to need to have a custom product.xml package. You can just copy one of existing product.XML packages for your products. I used product.SimpleProduct.xml.config Be sure and give your XML a new name, I use product.Flash.xml.config

Edit the XML package and look for this line of code in your XML package. It will appear in several place and it’s best to edit them all.

<xsl:value-of select=”aspdnsf:LookupProductImage(ProductID, ImageFilenameOverride, SKU, ‘medium’, 0, $AltText)” disable-output-escaping=”yes” />

Comment out the code so it looks like:

<!–<xsl:value-of select=”aspdnsf:LookupProductImage(ProductID, ImageFilenameOverride, SKU, ‘medium’, 0, $AltText)” disable-output-escaping=”yes” />–>

It’s better to comment it out, in case you make a mistake, it will be easier to fix. Right below the code you just commented out, place this bit of code to call the SWF.

<a href=”flash/{ProductID}/viewer.htm” target=”_blank”><img src=”images/product/medium/{ProductID}.jpg” /><br /> <center>Multi Image Viewer</center></a>

The areas in red are the only changes you will need to make a change to the code to make it work. Change the href path to reflect the location of the folder and the name of the htm file that calls the swf within the product folder. The {ProductID} pulls the dynamic file name for each image so leave that in tact. This code can be modified to suit your needs. Now upload the product.XML file into your XML folder on your webserver.

Choose the item you want to use the SWF multi image viewer. Each product has a unique user ID number and that’s what you’re going to name the folder that contains the SWF viewer and image files. Process the images per the directions for Zoomify and upload the folder into the flash folder on the website. (eg: upload the folder 2345 to the /flash directory on your website.

Go to your edit product page and choose the XML package you created for the item and you’re done. Be sure and check out the new page to make sure it looks the way you want and everything is working. A few lines of code, a little preperation and you’ve turned your vanilla ASPDNSF image viewer into a powerful and dynamic image viewing system that’s going to increase sales and make your customers very happy.

Here is a working example on a live site.

If you would like to have me do this for you and give you the complete package, with everything ready to go, contact me and I will try and get back with you as soon as possible. Please leave a phone number and a good time to contact you.