Jump to content



Member Since 06 Feb 2010
Offline Last Active Nov 24 2010 03:51 AM

Topics I've Started

Free Dynamic Preview Modified for Product List

12 February 2010 - 09:19 PM

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:


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:

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


2. Replace the code in /controllers/customers/categories.php:
fn_gather_additional_product_data($products[$k], true, false, true, true, true);                        

fn_gather_additional_product_data($products[$k], true, true, true, true, true);

3. Replace the following code in /skins/YOURSKIN/customers/blocks/list_templates/grid_list.tpl

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

{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"}

4. Replace everything in image_dp.tpl with the following code:

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

{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 $images.icon.image_y}
{assign var="image_height" value=$images.icon.image_y}
{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 $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}
{assign var="icon_image_path" value=$images.icon.image_path}

{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"}
{assign var="new_width" value=$images.detailed.image_x}
{assign var="new_height" value=$images.detailed.image_y}

{if $show_detailed_link && $images.detailed_id}

<a{if $obj_id && !$no_ids} id="detailed_href1_{$obj_id}"{/if} href="{$images.detailed.image_path}" rev="{$images.detailed.alt}" alt="{$images.detailed.alt}" onMouseOver="Tip('<img src={$images.detailed.image_path} width={$new_width} height={$new_height} >', PADDING, 6, BGCOLOR, '#ffffff')" onMouseOut="UnTip()">

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

<img class="{$valign} {$class}" {if $obj_id && !$no_ids}id="det_img_{$obj_id}"{/if} src="{$icon_image_path|default:$config.no_image_path}" {if $image_width}width="{$image_width}"{/if} {if $image_height}height="{$image_height}"{/if} alt="{$images.icon.alt}" onMouseOver="Tip('<img src={$images.detailed.image_path} width={$new_width} height={$new_height} >', PADDING, 6, BGCOLOR, '#ffffff')" onMouseOut="UnTip()" {if $image_onclick}onclick="{$image_onclick}"{/if} border="0" />

{if $show_detailed_link && $images.detailed_id}

<object {if $valign}class="valign"{/if} classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="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}>
<param name="movie" value="{$images.icon.image_path|default:$config.no_image_path}" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="allowScriptAccess" value="sameDomain" />
{if $flash_vars}
<param name="FlashVars" value="{$flash_vars}">
<embed src="{$images.icon.image_path|default:$config.no_image_path}" quality="high" wmode="transparent" {if $image_width}width="{$image_width}"{/if} {if $image_height}height="{$image_height}"{/if} allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" {if $flash_vars}FlashVars="{$flash_vars}"{/if} />

{if $show_detailed_link}
<p class="{if !$images.detailed_id}hidden{/if} {$detailed_link_class} center" id="detailed_box_{$obj_id}">
<a {if $obj_id && !$no_ids}id="detailed_href2_{$obj_id}"{/if} href="{$images.detailed.image_path}" class="cm-thumbnails-opener view-large-image-link">{$lang.view_larger_image}</a>


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

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

Swimwear site - converted to CS-CART from ZEN-CART

10 February 2010 - 05:19 PM

Please have a visit to my new website, which has just been converted from zen-cart:

Swimwear Place

I have developed two custom mods for my site.

1. Script to automatically update currency exchange rate. If you can add a link to my website on your site, I can offer it for free. Or else, it costs $9.00 US.

2. Script to export order, order detail and shipping information into one csv file. If you can add a link to my website , I can offer it free. Or else, it costs $19.00 US.

I can be reached at: webmaster@swimwearplace.com