Free Dynamic Preview Modified for Product List

domfang February 12, 2010, 12:00am 1

I have recently converted my swimwear site from zen-cart to cs-cart. I implemented the free dynamic preview module contributed by Tirade. But I have made some changes to this mod so it works for the product list page too. Also my changes allow to limit the size of popup images. You can view the effect at:

[URL=“http://www.swimwearplace.com/skirted-bikini/”]http://www.swimwearplace.com/skirted-bikini/[/URL]

I am new to CS-CART, and I’d like to contribute to the community, and share ideas with other people.

Here are the steps you need to do if you want to implement this module:

First perform the required steps in the following thread which was contributed by Tirade.

[URL=“http://forum.cs-cart.com/showthread.php?t=14229”]http://forum.cs-cart.com/showthread.php?t=14229[/URL]
Replace the code in /controllers/customers/categories.php:

```php fn_gather_additional_product_data($products[$k], true, false, true, true, true); ```

with

```php fn_gather_additional_product_data($products[$k], true, true, true, true, true); ```
Replace the following code in /skins/YOURSKIN/customers/blocks/list_templates/grid_list.tpl

```php {include file=“common_templates/image.tpl” image_width=$settings.Appearance.thumbnail_width obj_id=$obj_id_prefix images=$product.main_pair object_type=“product” } ```

with

```php {include file=“addons/my_changes/common_templates/image_dp.tpl” image_width=$settings.Appearance.thumbnail_width obj_id=$obj_id_prefix images=$product.main_pair object_type=“product”} ```
Replace everything in image_dp.tpl with the following code:

```php {* $Id: image.tpl 7493 2009-05-19 06:49:31Z lexa $ *}

{strip}

{assign var=“max_preview_width” value=300}

{if $show_thumbnail != “Y”}

{if !$image_width}

{if $images.icon.image_x}

{assign var=“image_width” value=$images.icon.image_x}

{/if}

{if $images.icon.image_y}

{assign var=“image_height” value=$images.icon.image_y}

{/if}

{else}

{if $images.icon.image_x && $images.icon.image_y}

{math equation=“new_x * y / x” new_x=$image_width x=$images.icon.image_x y=$images.icon.image_y format=“%d” assign=“image_height”}

{/if}

{/if}

{/if}

{if $show_thumbnail == “Y” && ($image_width || $image_height) && $images.image_id}

{assign var=“object_type” value=$object_type|default:“product”}

{assign var=“icon_image_path” value=$images.icon.image_path|fn_generate_thumbnail:$image_width:$image_height:$make_box}

{if $make_box == true}

{assign var=“image_height” value=$image_width}

{/if}

{else}

{assign var=“icon_image_path” value=$images.icon.image_path}

{/if}

{if !$images.icon.is_flash}

{if $images.detailed.image_x > $max_preview_width }

{assign var=“new_width” value=$max_preview_width}

{math equation=“x / y * z” x=$images.detailed.image_y y=$images.detailed.image_x z=$max_preview_width format=“%d” assign=“new_height”}

{else}

{assign var=“new_width” value=$images.detailed.image_x}

{assign var=“new_height” value=$images.detailed.image_y}

{/if}

{if $show_detailed_link && $images.detailed_id}
’, PADDING, 6, BGCOLOR, ‘#ffffff’)” onMouseOut=“UnTip()”>

{/if}

{if !($object_type == “category” && !$icon_image_path)}

’, PADDING, 6, BGCOLOR, ‘#ffffff’)” onMouseOut=“UnTip()” {if $image_onclick}onclick=“{$image_onclick}”{/if} border=“0” />

{/if}

{if $show_detailed_link && $images.detailed_id}

{/if}

{else}
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0” {if $image_width}width=“{$image_width}”{/if} {if $image_height}height=“{$image_height}”{/if}>

{if $flash_vars}

{/if}

{/if}

{if $show_detailed_link}

{$lang.view_larger_image}

{/if}

{/strip} ```

5. If you want to change the size of popup images, you can change the following code in image_dp.tpl

```php {assign var="max_preview_width" value=300} ```

I have implemented this for product grid view. With very minor change, you can make it work for list view.

I am new to CS-CART, so my changes may not be upgarde friendaly. I hope somebody can improve this.
gni February 17, 2010, 12:00am 2
Hi Domfang

Thanks for all your sharing!

I have followed the steps by Tirade. It all worked.

I have followed your steps, it all worked in Grid view too

BUT … I can’t work how to tweak it to work in LIST view?!

SCRATCH this … the LIST VIEW effect finally worked!

Don’t know why it took a while to kick in, slow connection maybe!

I tweaked the files under

/skins/YOUR_SKIN/customer/blocks/list_templates

Product_list

Simple_list

to include the changes for the image_dp.tpl file that was made

{include file=“/common_templates/image_dp.tpl” image_width=$settings.

LASTLY

My additional images are now missing from normal view?

They appear when I click on the image, but they are not showing like before beneath the main image and under the words ‘View larger Image’ & they don’t load at all?

Any help would be appreciated

But thanks again for all your input!

EG

[url]http://www.gemnetwork.com.au/gemstone-beads/peridot/peridot-faceted-4mm.html[/url]

Regards GNI
gni February 17, 2010, 12:00am 3

Also …

The line in the ‘image_dp.tl’ file

{assign var=“max_preview_width” value=300}

When I change it to the value 400, the images are stretched and not ‘normal’.

I tried putting on 400x400 but it created an error.

Is there a way I can include other sizes.

If I use 600, the images look fine as they were originally created at 600x600 pixels

So I only have 300 or 600. 300 is OK, but I’m curious to know how it can be changed
gni February 17, 2010, 12:00am 4
UPDATE

I’ve worked out why the Mouse-Over effect appeared to not work at the start.

I clicked on a Banner to go a LIST view of items quickly.

I have confirmed that when I do a keyword search, the results do NOT have the mouse-over effect, a very small white box appears instead.

(My banner HTML is copied from a search)

SO - in my case

This effect only works partially. It does not work perfectly.

No mouse-over effect via a search

Additional images missing/unable to be viewed.

Shame, it was precisely what many of my customers wanted

Domfang

Just confirmed the mouse-over effect doesn’t work on your site when you do search as well
gni February 17, 2010, 12:00am 5

OK so anyone suggest a good paid for MOD, that will do the mouse-over effect.

I really need to have my extra images available, and searches need to work as well.

Thanks
domfang February 18, 2010, 12:00am 6
GNI, your additional images are still there. I think they are just too small now.

I have modified image_dp.tpl file so it allow to show different preview size for product list page and product detail page. Also it will get rid of a very small white box appeared on the search page. I will figure out how to show preview on search result page. Just don’t have much time now.

If you have any questions, please email me.

[QUOTE]{* $Id: image.tpl 7493 2009-05-19 06:49:31Z lexa $ }

{strip}

{if $show_thumbnail != “Y”}

{if !$image_width}

{if $images.icon.image_x}

{assign var=“image_width” value=$images.icon.image_x}

{/if}

{if $images.icon.image_y}

{assign var=“image_height” value=$images.icon.image_y}

{/if}

{else}

{if $images.icon.image_x && $images.icon.image_y}

{math equation=“new_x * y / x” new_x=$image_width x=$images.icon.image_x y=$images.icon.image_y format=“%d” assign=“image_height”}

{/if}

{/if}

{/if}

{if $show_thumbnail == “Y” && ($image_width || $image_height) && $images.image_id}

{assign var=“object_type” value=$object_type|default:“product”}

{assign var=“icon_image_path” value=$images.icon.image_path|fn_generate_thumbnail:$image_width:$image_height:$make_box}

{if $make_box == true}

{assign var=“image_height” value=$image_width}

{/if}

{else}

{assign var=“icon_image_path” value=$images.icon.image_path}

{/if}

{if !$images.icon.is_flash}

{if $show_detailed_link && $images.detailed_id}

{assign var=“max_preview_width” value=400}

{if $images.detailed.image_x > $max_preview_width }

{assign var=“new_width” value=$max_preview_width}

{math equation=“x / y * z” x=$images.detailed.image_y y=$images.detailed.image_x z=$max_preview_width format=“%d” assign=“new_height”}

{else}

{assign var=“new_width” value=$images.detailed.image_x}

{assign var=“new_height” value=$images.detailed.image_y}

{/if}

’, PADDING, 6, BGCOLOR, ‘#ffffff’)” onMouseOut=“UnTip()”>

{/if}

{ display product list images *}

{if !($object_type == “category” && !$icon_image_path)}

{assign var=“max_preview_width” value=280}

{if $images.detailed.image_x > $max_preview_width }

{assign var=“new_width” value=$max_preview_width}

{math equation=“x / y * z” x=$images.detailed.image_y y=$images.detailed.image_x z=$max_preview_width format=“%d” assign=“new_height”}

{else}

{assign var=“new_width” value=$images.detailed.image_x}

{assign var=“new_height” value=$images.detailed.image_y}

{/if}

{if $images.detailed.image_x == 0 }

{else}

’, PADDING, 6, BGCOLOR, ‘#ffffff’)” onMouseOut=“UnTip()” {if $image_onclick}onclick=“{$image_onclick}”{/if} border=“0” />

{/if}

{/if}

{if $show_detailed_link && $images.detailed_id}

{/if}

{else}