Changing the AJAX-driven Product Preview

To change the look of the window that is shown when you mouse over a product name or image (AJAX-driven product preview), follow these instructions:

1. Edit the styles in pc/ei-tooltip.css (e.g. to change the font color)
2. Edit the graphics used for the pop-up. They can be edited by editing some PNG files included in the “pc/images” folder (these are Fireworks editable files). The files are:
   • lower-left-combo.png
   • lower-right-combo.png
   • up-left-combo.png
   • up-right-combo.png
   • topcap.png
   • titlemiddle.png
   • bottomcap.png
   • contentmiddle.png

By default ProductCart uses the thumbnail image for the preview. Let's say you want to use a larger image inside the preview (see instructions below), or simply you want to use a large preview window. There are two things that you will need to do:

1. Edit the styles in “pc/ei-tooltip.css”. Specifically, you will need to adjust the size of the preview to accommodate a much larger image. Change all instances of “285px” to the new width of your preview.
2. Edit the graphics used for the pop-up. All images with a width of 285 need to be re-sized the width specified in step one. They can be edited by editing some PNG files included in the “pc/images” folder (these are Fireworks editable files). The files are:
   • topcap.png
   • titlemiddle.png
   • bottomcap.png
   • contentmiddle.png
3. Edit the width parameters in “pc/ei-tooltip.js”. Change all instances of “285px” to the new width of your preview.

Question: How can I load the medium size image instead of the thumbnail image?

Answer: You can do this by making a small code change to the file pc/xml_getPrdInfo.asp.

1. Download the file to your desktop using an FTP program
2. Open it in Notepad or your favorite HTML editor
3. Change the following line:

   pSmimageURL=rs("smallImageUrl")

   … to …

   pSmimageURL=rs("imageurl")

4. Save the file and upload it back to your server.

Question: The AJAX mouseover (tooltip) popup window is showing up a couple of inches away from where it should be (the alignment is off). How come?

Answer: Two things to check:

1. Possible CSS conflict
   The conflict is likely with a style that has ID ”#titlebox” in one of your CSS definitions and the same style used by ProductCart in “ie-tooltip.css”. If you change your CSS document to use a different ID, it should solve the alignment issue.
2. Can't find the reason
   Troubleshooting CSS-driven problems can be extremely time consuming. If you can't find the reason for the interface issue, try editing “ei-tooltip.js” to adjust the default values to work properly on your store.

The following variables define the offset values.

var offsetfromcursorX=10
var offsetfromcursorY=0

var offsetdivfrompointerX=54
var offsetdivfrompointerY=101

Talk about this article