X-Cart forums - Dynamic Variant Images Display Mod

PURPOSE: Display dynamically-sized thumbnails of all active Product Variant images directly on the product page, while forcing the main image on the product page to always display the original Product Image. Clicking on any variant thumbnail launches a Lytebox lyteshow of the original size variant images.

Here's a screenshot:
http://www.coppercupimages.com/files/variantpicssample_dontdelete.jpg

You can see this module in action at www.theholebeadshoppe.com. Look at the Lucite > Lucite Flowers category. Note that at the time of this post, the site is not yet fully functional.

DEPENDENCIES:
The free Dynamic Images module from PHP Site Solutions: http://forum.x-cart.com/showthread.php?t=41912

How To: Dynamic Images mod plus Lytebox image viewer instructions found here:
http://forum.phpsitesolutions.com/open-source-software/dynamic-images/how-to-dynamic-images-mod-plus-lyteb...viewer-t4.html

Before installing this Dynamic Variant Images Display Mod, first follow the instructions to install Dynamic Images and follow the How To┘ Lytebox image viewer instructions linked to above.

FINE PRINT: This mod is offered as a service to the community, but I cannot offer any support or suggestions for further modifications. I have this mod working in X-Cart Gold 4.1.10, but it has not been tested in any other version.

INSTRUCTIONS:

Step 1 √ Disable the default behavior that results in X-Cart switching the main image on the product page to the currently selected variant option. With a little work, someone may figure out how to make Dynamic Images resize the variant images in this context, and this can be reenabled.

Open /skin1/modules/Product_Options/func.js

FIND:

Code:

if (product_thumbnail) {

            if (variants[variantid][0][2].src && variants[variantid][0][2].width > 0 && variants[variantid][0][2].height > 0) {

                if (product_thumbnail.src != variants[variantid][0][2].src) {

                    product_thumbnail.src = variants[variantid][0][2].src;

                    product_thumbnail.width = variants[variantid][0][2].width;

                    product_thumbnail.height = variants[variantid][0][2].height;

                }

            } else if (document.getElementById('product_thumbnail').src != product_image.src) {

                product_thumbnail.src = product_image.src;

                if (product_image.width > 0 && product_image.height > 0) {

                    product_thumbnail.width = product_image.width;

                    product_thumbnail.height = product_image.height;

                }

            }

        }

COMMENT this entire bit of code out like this:

Code:

        /*

        if (product_thumbnail) {

            if (variants[variantid][0][2].src && variants[variantid][0][2].width > 0 && variants[variantid][0][2].height > 0) {

                if (product_thumbnail.src != variants[variantid][0][2].src) {

                    product_thumbnail.src = variants[variantid][0][2].src;

                    product_thumbnail.width = variants[variantid][0][2].width;

                    product_thumbnail.height = variants[variantid][0][2].height;

                }

            } else if (document.getElementById('product_thumbnail').src != product_image.src) {

                product_thumbnail.src = product_image.src;

                if (product_image.width > 0 && product_image.height > 0) {

                    product_thumbnail.width = product_image.width;

                    product_thumbnail.height = product_image.height;

                }

            }

        }

        */

Next FIND:

Code:

$tmp = false;

    if (!empty($product['variantid']) && !empty($active_modules['Product_Options']) && ($current_area == "C" || $current_area == "B")) {

        $tmp = func_query_first("SELECT image_path as image_path_P, image_x as image_x_P, image_y as image_y_P FROM $sql_tbl[images_W] WHERE id = '$product[variantid]'");

        if (!empty($tmp))

            $tmp['force_image_type'] = 'W';

    }

REPLACE with:

Code:

    /* COMMENTED OUT TO FORCE MAIN PRODUCT IMAGE TO DEFAULT TO PRIMARY PRODUCT IMAGE, INSTEAD OF USING THE DEFAULT VARIANT IMAGE (IF THERE IS ONE)

    $tmp = false;

    if (!empty($product['variantid']) && !empty($active_modules['Product_Options']) && ($current_area == "C" || $current_area == "B")) {

        $tmp = func_query_first("SELECT image_path as image_path_P, image_x as image_x_P, image_y as image_y_P FROM $sql_tbl[images_W] WHERE id = '$product[variantid]'");

        if (!empty($tmp))

            $tmp['force_image_type'] = 'W';

    }

    */

Step 2 - Create a template file for the variant thumbnail display and save it here:

/skin1/modules/Product_Options/customer_tn_options.tpl

PASTE this code into the file:

Code:

{* $Id: customer_tn_options.tpl,v 1.24 2008/08/25 05:19:21 svowl Exp $ *}

{if $variants ne ''}

    <TABLE border="0" cellpadding="0" cellspacing="0" width="100%" width="100%">

        <TR><TD height="24" class="DialogTitle" width="100%">&nbsp;&nbsp;Available Colors</TD></TR>

    </TABLE>

    {foreach from=$variants item=v key=k}

       {foreach from=$v.options item=voarray key=vokey}

            {if $v.options ne '' && $v.avail > 0 && $v.is_image eq 'Y' && $voarray.avail eq 'Y'}

                <div class="variant-thumbnails">

                <a href="{$v.image_path_W}" title="{$voarray.classtext|escape}: {$voarray.option_name|escape} | Item Number: {$v.productcode}" rel="lytebox[detailed]"><img src="{thumb file=$v.image_path_W width=150 height=110 crop=true link=false hint=false get_image_path=true extrapolate=true}" id="product_thumbnail" class="thumb" alt="{$product.product|escape} Photo" /></a>

                <p>{$voarray.classtext|escape}: <span class="variant-name">{$voarray.option_name|escape}</span><br />Item Number: {$v.productcode}</p>

                </div>

            {elseif $v.options ne '' && $v.avail eq 0 && $v.is_image eq 'Y' && $voarray.avail eq 'Y'}

                <div class="variant-thumbnails">

                <a href="{$v.image_path_W}" title="{$voarray.classtext|escape}: {$voarray.option_name|escape} | Item Number: {$v.productcode}" rel="lytebox[detailed]"><img src="{thumb file=$v.image_path_W width=150 height=110 crop=true link=false hint=false get_image_path=true overlay="http://www.theholebeadshoppe.com/skin1/images/custom/OutOfStockOverlayImage.png" overlay_postion=5 extrapolate=true}" id="product_thumbnail" class="thumb" alt="{$product.product|escape} Photo" /></a>

                <p>{$voarray.classtext|escape}: <span class="variant-name">{$voarray.option_name|escape}</span><br />Item Number: {$v.productcode}</p>

                </div>

            {/if}

       {/foreach}

    {/foreach}

{/if}

I'll come back and talk about a few things to pay attention to in this file.

Step 3 - Call the customer_tn_options.tpl template from within the product template.

Open /skin1/customer/main/product.tpl

FIND:

Code:

<input type="hidden" name="productid" value="{$product.productid}" />

<input type="hidden" name="cat" value="{$smarty.get.cat|escape:"html"}" />

<input type="hidden" name="page" value="{$smarty.get.page|escape:"html"}" />

</form>

{/capture}

REPLACE with (nothing changes except the addition of the include line):

Code:

<input type="hidden" name="productid" value="{$product.productid}" />

<input type="hidden" name="cat" value="{$smarty.get.cat|escape:"html"}" />

<input type="hidden" name="page" value="{$smarty.get.page|escape:"html"}" />

</form>

{include file="modules/Product_Options/customer_tn_options.tpl" }

{/capture}

Step 4 - Add style code to the CSS

Open /skin1/skin1.css and /skin1/skin1_printable.css

ADD to both files:

Code:

.variant-thumbnails { border: solid 1px #e8ecd6; padding: 6px; margin: 0px 10px 10px 0px; float: left; }

.variant-name { font-weight: bold; }

OPTIONS

You will likely want to change a few things about the customer_tn_options.tpl template and the CSS stylings.

For example, you can find sample usage, including all the possible parameters to use with Dynamic Images in the comments at the top of this file:
include/templater/plugins/function.thumb_imp.php.

In this implementation, I've decided to size the thumbnails to 150px X 110px and crop and/or extrapolate if necessary.

You can see this on line 11 of the customer_tn_options.tpl.

Also, I have captured when the variant stock level is zero and used an overlay png image with the Dynamic Images overlay parameter to overlay the image with the words "Temporarily Out of Stock". You will need to either replace this image with one of your own, or remove this functionality.

The way it is written, variant thumbnails will not show up if there is no thumbnail or the option set is inactive.

I have also put a DialogTitle header above the group of images and hard-coded the title "Available Colors" (see line 5). That should probably be set as a language variable, but I haven't done that yet.

Also, I have displayed the Option names and SKU numbers below the variant thumbnails. You may want to change that.

I have only tested this mod with a single option set. I have no idea if it will work with multiple option sets. The way it loops through the variant array and variant options array may have to be tweaked - not sure.

I hope this is helpful. I'm going to post a bit of code you can use to display all of the name/value pairs in the $variants array and the $variant.options array, but I don't have it ready yet.

Good Luck!