====== 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:

  - Edit the **styles** in //pc/**ei-tooltip.css**// (e.g. to change the font color)
  - 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
{{:how_to:pc35_screen_ajax_prdpreview.gif|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:

  - 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.
  - 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
  - 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**//.

  - Download the file to your desktop using an FTP program
  - Open it in Notepad or your favorite HTML editor
  - Change the following line: <code>pSmimageURL=rs("smallImageUrl")</code>... to ...<code>pSmimageURL=rs("imageurl")</code>
  - 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:

  - 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.
  - 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.

<code>
var offsetfromcursorX=10
var offsetfromcursorY=0

var offsetdivfrompointerX=54
var offsetdivfrompointerY=101
</code>


===== Discussions =====
[[:talk:how_to:modify_product_preview|Talk about this article]]