User's Guide

Knowledgebase

Quick Links
 
This article applies to:

Advanced Product Image Display Instructions & User Guide

Introduction

Thank you for purchasing the Advanced Multi-Image Viewer. This package is packed full of great features including the CloudZoom jQuery plugin, the AddThis bookmarking and sharing service, and all kinds of options to customize your product display. The Advanced Multi-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 skin folder
    • “/App_Themes/Skin_{YOURSKINID}/” in ML9 or MultiStore.
    • “/skins/Skin_{YOURSKINID}/” in version ML8 or lower.
  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 editing screen.
  7. Choose the product.configurable-multiimage.xml.config xmlpackage from the xmlpackage dropdown.
  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.

OPTIONS


AppConfig Parameters

ConfigurableProduct.DisableSocialLinks : This appconfig parameter can be used to disable the AddThis social networking button on your product page.

ConfigurableProduct.ShowSKU : This appconfig parameter can be used to show the SKU on the product page. This is set to "false" by default.

ConfigurableProduct.DisableStyleHelper : Disables the style helper script on product xmlpackages that use it. This appconfig is ignored on all AspDotNetStorefront editions 9 and above. If you set this to "true" you will want to include custom styles added by the helper script in your main style sheet.

ImageViewer.DisableStyleHelper : Disables the style helper script on Advanced Multi-Image Viewer. This appconfig is ignored on all AspDotNetStorefront versions 9 and above. If you set this to "true" you will want to include custom styles added by the helper script in your main style sheet.

ImageViewer.UseCloudZoom : If you set this to "true" you enable the jQuery based CloudZoom plugin (http://www.professorcloud.com/mainsite/cloud-zoom.htm). This plugin will include the jQuery javascript library on the Advanced Multi-Image Viewer product page. If you experience problems with this plugin it is most likely a conflict with another javascript library installed you your website.

ImageViewer.CloudZoomWidth :The width of the zoom window in pixels. If "auto" is specified, the width will be the same as the small image.

ImageViewer.CloudZoomHeight :The height of the zoom window in pixels. If "auto" is specified, the height will be the same as the small image.

ImageViewer.CloudZoomAdjustX : Allows you to fine tune the x-position of the zoom window in pixels.

ImageViewer.CloudZoomAdjustY : Allows you to fine tune the y-position of the zoom window in pixels.

ImageViewer.CloudZoomTint : Specifies a tint color which will cover the small image. Colors should be specified in hex format, e.g. "#aa00aa".

ImageViewer.CloudZoomTintOpacity : Opacity of the tint, where 0 is fully transparent, and 1 is fully opaque. Default is "0.3".


Topics

ProductPageAddThisCode : Use this topic to override the AddThis code on your product page. If you do please make sure that the WYSIWYG editor is not stripping out script tags. This topic must contain script tags to override the default code. To prevent script stripping you can turn the editor off using the AppConfig titled "TurnOffHtmlEditorInAdminSite".


String Resources

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

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


CSS Optimization in ML8 and lower

For easier installation we use a simple javascript function to include the style sheets for this package in the head section of the document.

If you are using version 8 of AspDotNetStorefront or earlier you may want to place the styles from the CSS file included with this package into the main style sheet of your website. This will prevent the quick flash before the styles load on your new xmlpackage page.

If you do move the styles into the main style sheet, than set the ConfigurableProduct.DisableStyleHelper AppConfig parameter to “true”.


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.




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.


  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:


    3. <xsl:value-of select="aspdnsf:LookupProductImage(ProductID, ImageFilenameOverride, SKU, 'medium', 0, $AltText)" disable-output-escaping="yes" />


  3. Replace the line above with the following code for the main image viewer. If there are several places you can replace each of them:


    4. <xsl:value-of select="aspdnsf:XmlPackage('vortxmultiimage.xml.config', concat('productid=', ProductID, '&#38;colors=', Colors, '&#38;imagefilenameoverride=', ImageFilenameOverride, '&#38;sku=', SKU, '&#38;alttext=', $AltText ))" disable-output-escaping="yes" />

    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:


    5. <xsl:value-of select="aspdnsf:AddtoCartForm(ProductID, VariantID, 1)" disable-output-escaping="yes"/>


  5. Add the color icons code just above it like this:


    6. <xsl:value-of select="aspdnsf:XmlPackage('vortxmultiimage.xml.config', concat('productid=', ProductID, '&#38;colors=', Colors, '&#38;imagefilenameoverride=', ImageFilenameOverride, '&#38;sku=', SKU, '&#38;alttext=', $AltText, '&#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.