Announcement:Materials and articles for ProductCart 5 can be found at our brand new support center.

Create an account to edit articles | See Formatting Syntax for Wiki syntax | We look forward to your contribution!

Changing the AJAX-driven Product Preview

Changing the Look

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

The ajax driven product preview offers customers a quick preview of the product that they are looking at

Changing the Size

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.

Changing the Picture Shown

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.

Troubleshooting

Offset Issues

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

Discussions


QR Code
QR Code Changing the AJAX-driven Product Preview (generated for current page)