X-Cart forums - Detailed Product Images Popup on Thumbnail click.

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Detailed Product Images Popup on Thumbnail click. (https://forum.x-cart.com/showthread.php?t=202)

Detailed Product Images Popup on Thumbnail click.

Okie, since I just finished doing this for another client heres what to do to make the detailed product images not appear in the details but rather appear only when the user clicks the thumbnail for more detailed pictures.

First step: Create a new php file under customer/ Lets call it product_detailed_images.php and then paste the entire code into it:

Code:

<?

require "../smarty.php";

require "../config.php";



#

# Collect product images

#

$images = func_query("select * from $sql_tbl[images] where productid='$productid' order by imageid");



$smarty->assign("images",$images);

$smarty->display("modules/Detailed_Product_Images/product_images.tpl");



?>

Now open customer/main/product.tpl in your skins directory. Add the following after the first javascript or at the top of the file:

Code:

{literal}

<SCRIPT language=JavaScript1.2>

<!--

function productimagedetail(product_id) {

 var w = "420"; //width

 var h = "420"; //height

 window.open('product_detailed_images.php?productid='+product_id,"detailedproduct","width="+w+",height="+h+",resizable,scrollbars=yes");

}

-->

</SCRIPT>

{/literal}

You can edit the height and width of the new window popup by simply editing the variable w and h, which are both equal to 420 currently.

Now find the line that is pointing to the product thumbnail it should look something like this:

Code:

{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product}{if $active_modules.Detailed_Product_Images ne ""}

Highlight this entire line and replace it with this:

Code:

{if $active_modules.Detailed_Product_Images ne ""}{/if}{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product}{if $active_modules.Detailed_Product_Images ne ""}{/if}

Now you'll want to remove the detailed product images from showing up in the product detail page, so scroll to the bottom of the file and find the line that looks like so:

Code:

{if $active_modules.Detailed_Product_Images ne ""}






{include file="modules/Detailed_Product_Images/product_images.tpl" }

{/if}

You can either remove this code OR comment it out with or {* smarty comments *}

Now moving on to the next step.

You'll probably want to create your own header or something to showup with the image popup, so edit modules/Detailed_Product_Images/product_images.tpl Here you will find the template that is being called from the newly created php file created on the first step.

You can also edit product_thumbnail.tpl in your skins directory and add an ALT description telling the user to click for a detailed image, here's how I did it:

Code:

{if $config.General.show_thumbnails eq "Y"}[img]../image.php?productid={$productid}[/img]{/if}

You can also insert a text reference underneath the product thumbnail in customer/main/product.tpl that informs the user to click for more details!

Anyhow, hope this works for anyone, if you wanting to make a donation please email me.

Thanks :wink:

fantastic custom...however i can't seem to get it working.

the link seems to work but when i click on thumbnail, the window pops up but with NO DETAILED IMAGE. What do you think is wrong?

Thanks in advance.

Do you have Detailed Product images enabled in the admin -> modules area?

Boomer, it works now...i'm an idiot cuz i forgot that i didn't add a detailed image for some of my products.

BTW - if a product doesn't have a detailed image uploaded, then why is the 'enlarge' button for instance or the link still active? Can i disable it some how when a product doesn't have a detailed image?

Thanks in advance.

If you are interested in reviewing my site, IM me, i'd rather not display my URL here till the site is completely ready. Thanks

Hello,B00MER

Thank you for your effort to help new x-carters.
I followed your instrction but i got"The page cannot be found"on new window.

what can be the problem?

Please Help.

Boomer...I need a little help with this Detail Product Image

Hi Boomer,

Nice mod!

I am having a bit of trouble though. Will your instructions work with the latest release (3.3.2 ??). I have been messing with this and I keep getting a 404 error. I even tried to let the Detailed Pic load at the bottom like normal, but that does not work. I am using the bulk upload feature in xcart admin. Any help would be more than appreciated.

Laterz

dave

Yeah, got it all to work except for the error. Any help is appreciated! :(

Make sure:

Quote:

window.open('customer/product_detailed_images.php?productid='+product_id,"detailedproduct","width=" +w+",height="+h+",resizable,scrollbars=yes");

You have edited the begining of window.open(' to reflect the relative location of your product_detailed_images.php file that you created from the code snippets above, ie:

Quote:

window.open('xcart/product_detailed_images.php?productid='+product_id,"detailedproduct","width=" +w+",height="+h+",resizable,scrollbars=yes");

hth. :wink:

Thanks! Worked like a charm! :D

Boomer,

I tried your tip.
My file is in /customer/ and I also tried the following variance, since the file is in the folder above /customer/main/ (for product.tpl)

{* $Id: product.tpl,v 1.59.2.2 2003/01/23 14:37:23 basil Exp $ *}

{literal}
<SCRIPT language=JavaScript1.2>

</SCRIPT>
{/literal}

May you can see something that I am doing wrong.
I also can not get any of my uploaded csv file referenced images to come up (detailed). If I add a detailed image, then it works.

I guess I am going to have to look into the dB. Can you help me with what table to check out??

thanks again

dave