Sitefinity Ecommerce – Enhance your product images using Magic Zoom Plus

Sitefinity Ecommerce comes package with a free 3rd party image tool called Fancybox.    FancyBox (www.fancybox.net)  is a JQuery tool for displaying images, html content and multi-media in a Mac-style "light box" that floats overtop of web page.   Fancybox is great tool to use for displaying images, however it falls short if you want to display large formatted images, or have the ability to zoom into an image.   A great product I have used for many years is called Magic Toolbox (www.magictoolbox.com).   Magic Toolbox enables web designers to create amazing user experiences using high resolution images, leading to better conversion, higher sales and lower returns.  In this blog post, I will show you how you can integrate Magic Toolbox Plus into Sitefinity Ecommerce,  allowing for visitors to zoom in or magnify images.   (Please note that Magic Toolbox is not free, and the price for Magic Toolbox Plus is around $60 U.S, or . )

How it works

Magic Zoom Plus uses pure JavaScript and CSS for creating hover windows for showing image details.   Magic Zoom Plus does not use any flash thus it can be used on any smart phone devices including the Apple IPhone.   For more information about Magic Zoom Plus, please visit http://www.magictoolbox.com/magiczoomplus/ 

Getting Started

To begin, go to http://www.magictoolbox.com/magiczoomplus/ and download the trial version of Magic Zoom Plus.   Unzip the package into a temporary folder and copy the folder magiczoomplus to your solution.   You can also click on the index.html file to see all of the examples and configuration settings to for Magic Zoom Plus.

Once you have copied the folder magiczoomplus into your solution, you need to create a new view to use on the Product List widget.  Below I have included two example of the template used for the product list/detail widget.  The first example is the default template included with Sitefinity which uses Fancybox to show image details.  The second example is my new template which has the Magic Zoom Plus added to it.

EXAMPLES

First Example:

Second Example:

In the second example, I have commented out  the lines which references to Fancybox, and replaced these lines with code for Magic Zoom Plus.   On line 66 of the second example, you can see where we replaced  the code to include the main image and not to skip over it.   This is ideal so that the main image can always be selected however it does create a new thumbnail whereby Fancybox skips over the main image.   I also added the code whereby if there is only 1 image to display, no thumbnail will be created below it.

Once you have the new view/widget template, you need to tell the Product List widget where to find this new template.   In my video example, I created a top level folders called View, and added a Web User Control to this file calling the file name ProductDetailViewCustomZoom.ascx.    To tell the Product List Widget where to find this new template, edit the backend page in Sitefinity which has the product list widget on it.   Edit the properties of the Product List Widget and click on “Advanced” at the bottom.   In the advanced settings, click on the button ControlDifinition .

In the ControlDefinition settings, scroll to the very bottom and click on the “View” button.  This will take you in the Views configuration.   Click on the ProductFontendDetail view button as shown below.  This will take you in the properties for the product list detail view configuration.

Near the bottom of the view window, you will see a configuration setting for template path.   Here is where you want to tell the product list widget the new view/template you want to use.

It is very important that you make sure this path is correct.  If it is not, or there are errors in your new template, you will not see any product detail information displayed.   Save all screens and publish the page and you should now have Magic Zoom Plus installed as an alternate way of showing product images.

Video in action

Please watch my video below for more detail information