Search Descriptions Version
 
 
This article applies to:

Advanced Product Image Display Instructions & User Guide For ADNSF Version 9.4.1.0 And Higher


Introduction

Thank you for purchasing the Advanced Image Viewer. This package is packed full of great features including the jQuery Zoom plugin. The Advanced Image Viewer is also a great starting point for creating your own custom image display without modifying AspDotNetStorefront's core source code.

Skills Required

  • Basic Knowledge of FTP

Simple Installation

This installation package contains a “Web” directory that contains all of the files necessary to install this package. Please note that it is always a good idea to make a backup of your website before deploying files to your website.

To install the Advanced Multi-Image Viewer follow these directions:

  1. Connect to your AspDotNetStorefront site using your favorite FTP program.
  2. Upload the contents of the App_Code folder from this package to the App_Code folder on your website.
  3. Upload the contents of the jscripts folder from this package to your website's jscripts folder.
  4. Upload the contents of the Skin_X folder to your website App_Themes folder. For example /App_Themes/Skin_1/
  5. Upload the contents of the XmlPackages folder from this package to your website XmlPackages folder.
  6. Perfect! Now login to the admin console of your site, and navigate to the product management screen.
  7. Choose product.advancedimageviewer.xml.config from the xmlpackage dropdown, then "Save and Close" the product editing.
  8. Navigate to the product page on the front end of your website, and add ?install=true to the end of the URL.
    • For example http://www.mystore.com/p-1-my-product.aspx?install=true
    • Make sure to hit enter or the go button on your navigation bar (This step will create new configuration options documented below).
  9. Back in the admin console, reset the cache to make sure appconfig parameters created during installation get initialized.
  10. Congratulations! Your installation is complete. Refresh your product page to see the Advanced Multi-Image Viewer in action. Use the options section below to configure it just the way you want.

NOTE: This product will have a conflict with the Smart Mini-Cart fly-to-cart image animation, so be sure to read the note in "Merge Animation" Step 4 concerning code changes with the xml display packages in the installation instructions for the Smart Mini-Cart.

Options:

AppConfig Parameters

ImageViewer.UseVariantImages: Set this to true to have the advanced image viewer display variant images rather than product images.

String Resources

ImageViewer.ViewsLabel: The label text above the view icons.

ImageViewer.ColorsLabel: The label text above the color icons.

ImageViewer.VariantsLabel: The label text above the variant icons if you use variant images instead of product images.

Image Setup

Dimensions

All of the alternate views and color images need to have the same height and width dimensions.

Multi-Image Manager

The multi-image manager grid needs to be complete. See the examples below.

Good Examples:

Bad Example:

Default Image

It's best to put the same image in the first view slot as you put for the default image.

Variant Image Setup

It is also possible to setup your advanced image viewer to display variant images rather than product images. To do this set the appconfig titled ImageViewer.UseVariantImages to true. Variant images do not support multiple views so they are easier ot setup. Simply upload Large, Medium, and Icon images to each of your variants and each will be represented on the product page by it's image.

Adding the Advanced Multi-Image Viewer to your Custom Product XmlPackage

The installation package for the Advanced Multi-Image Viewer comes with a product xmlpackage that already includes the Advanced Multi-Image Viewer. If you already have a custom xmlpackage that you would like to add the Advanced Multi-Image Viewer to, you can follow the instructions below to help you through this process. Please note that this process is much more advanced than the initial installation process and you may want to enlist the help of an AspDotNetStorefront developer if you are unfamiliar with xmlpackages.

Skills Required

  • XSLT
  • HTML

Before you get started

Please note that the image viewer and color options should only be displayed once on the product page. The Advanced Multi-Image Viewer was not designed to work with product pages that have multiple add to cart forms.

We recommend making a copy of your original xmlpackage so you can get back to what you started with.

Instructions

  1. Open up the xmlpackage that you would like to add the Advanced Multi-Image Viewer to, for example page.kitheader.xml.config for Kit products (note that you can add the image zoom feature but 'color attributes' do not pertain to Kit Products.)
  2. Find the place where the product image is being displayed. There may be several places depending on the xmlpackage. It should look something link this:
    aspdnsf:LookupProductImage(ProductID, ImageFilenameOverride, SKU, 'medium', 1, $AltText)
  3. Replace the code above with the following code for the main image viewer. If there are several places you can replace each of them:
    aspdnsf:XmlPackage('vortxmultiimage.xml.config', concat('productid=', ProductID))
    That will get you the image viewer and the view images. Now we need to add the color icons to the product page. You can place the code where ever you want on your product page, but I recommend placing it just above your add to cart form.
  4. Search for the following line of code:
    <xsl:value-of select="aspdnsf:AddtoCartForm(ProductID, VariantID, 1)" disable-output-escaping="yes"/>
  5. Add the color icons code just above it like this:

    <xsl:value-of select="aspdnsf:XmlPackage('vortxmultiimage.xml.config', concat('productid=', ProductID, '&#38;widgettodisplay=coloricons' ))" disable-output-escaping="yes" />

    <xsl:value-of select="aspdnsf:AddtoCartForm(ProductID, VariantID, 1)" disable-output-escaping="yes"/>
  6. Test out the modified page to make sure it is working. If you see errors you may need to modify the values of the names of the parameters being passed into the Advanced Multi-Image Viewer to the names of XSLT parameters available in your custom XmlPackage.
  7. If you need to create the AppConfigs, String Resources, and Topics that go along with the Advanced Multi-Image Viewer simply navigate to you product page URL and add the "?install=true" query string.