Deliver superior customer experiences with an AI-driven platform for creating and deploying cognitive chatbots
Deliver Awesome UI with the most complete toolboxes for .NET, Web and Mobile development
Automate UI, load and performance testing for web, desktop and mobile
A complete cloud platform for an app or your entire digital business
Detect and predict anomalies by automating machine learning to achieve higher asset uptime and maximized yield
Automate decision processes with a no-code business rules engine
Optimize data integration with high-performance connectivity
Connect to any cloud or on-premises data source using a standard interface
Build engaging multi-channel web and digital experiences with intuitive web content management
Personalize and optimize the customer experience across digital touchpoints
Build, protect and deploy apps across any platform and mobile device
The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.
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 . )
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.
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.
Please watch my video below for more detail information
View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.
Copyright © 2018 Progress Software Corporation and/or its subsidiaries or affiliates.
All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.