Introduction
Thank you for purchasing the Advanced Image Viewer. This package is packed full of great features including the jQuery Zoom plugin, the AddThis bookmarking and sharing service, and all kinds of options to customize your product display. 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
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:
- Connect to your AspDotNetStorefront site using your favorite FTP program.
- Upload the contents of the App_Code folder from this package to the App_Code folder on your website.
- Upload the contents of the jscripts folder from this package to your website's jscripts folder.
-
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.
- Upload the contents of the XmlPackages folder from this package to your website XmlPackages folder.
- Perfect! Now login to the admin console of your site, and navigate to the product management screen.
-
Edit a product to apply the package to, and choose the product.configurable-multiimage.xml.config xmlpackage from the xmlpackage dropdown, then "Save and Close" the product editing.
-
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).
- Back in the admin console, reset the cache
to make sure appconfig parameters created during installation get initialized.
-
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
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.UseVariantImages: Set this to true to have the advanced image viewer display variant images rather than product images.
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.
ImageViewer.VariantsLabel: The label text above the variant icons if you use variant images instead of product images.
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.
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
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
-
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 in version 9 software (note that you can add the image zoom feature but 'color attributes' do not pertain to Kit Products.), or product.kitproduct.xml.config in version 8.
-
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)
-
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.
-
Search for the following line of code:
<xsl:value-of select="aspdnsf:AddtoCartForm(ProductID, VariantID, 1)" disable-output-escaping="yes"/>
-
Add the color icons code just above it like this:
<xsl:value-of select="aspdnsf:XmlPackage('vortxmultiimage.xml.config', concat('productid=', ProductID, '&widgettodisplay=coloricons' ))" disable-output-escaping="yes" />
<xsl:value-of select="aspdnsf:AddtoCartForm(ProductID, VariantID, 1)" disable-output-escaping="yes"/>
-
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.
- 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.