Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

Dynamic Variant Images Display Mod

 
Reply
   X-Cart forums > X-Cart 4 > Changing and adding new features
 
Thread Tools Search this Thread
  #1  
Old 08-26-2008, 05:23 PM
  coppercup's Avatar 
coppercup coppercup is offline
 

Senior Member
  
Join Date: Mar 2007
Location: Oklahoma
Posts: 117
 

Default 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!
__________________
Happy coding!
Fritz
x-cart 4.1.10

Copper Cup Images Print, Web & Multimedia Design
www.coppercupimages.com
Reply With Quote
  #2  
Old 08-26-2008, 05:48 PM
 
intel352 intel352 is offline
 

X-Wizard
  
Join Date: Dec 2005
Posts: 1,071
 

Default Re: Dynamic Variant Images Display Mod

Nice looking mod
I have too many projects on my plate at the moment, sorry I couldn't help out on your posts when you were getting this figured out, but I'm glad you got the variants bit all straightened out.

Cheers!
__________________
-Jon Langevin
WARNING: Unethical developer - NOT RECOMMENDED
See details here
Reply With Quote
  #3  
Old 08-29-2008, 09:18 AM
 
carpeperdiem carpeperdiem is offline
 

X-Guru
  
Join Date: Jul 2006
Location: New York City, USA
Posts: 5,399
 

Default Re: Dynamic Variant Images Display Mod

Fritz,

Nice code...

I don't have time to try it today, but i will, soon. And Jon, wow! Nice mod as well... I like your choice of using Lytebox.

One thing that you may want to think about for your product page Fritz, is a minor css tweak so the user has an idea that clicking on a thumbnail might do something. You might want to try a border/rollover, something like:

Code:
class="mouseover" onmouseover="this.className='mouseover2'" onmouseout="this.className='mouseover'"

Then, two css classes:

Code:
.mouseover { border: 1px solid; padding: 9px; border-color: #500000; background: #FFF0F5; text-align: center; } .mouseover2 { padding: 7px; border: 3px dotted #FF07CE; background: #dae8ff; text-align: center; }

...or something like that.

I embedded this into a TD, but I see no reason why you couldn't use this in a DIV as well. This will give your customer a sense that something will happen if they click. You could also use some javascript to do a transparency effect... whatever you choose, I would choose something, to indicate that if you click on a variant, something will happen. Just my UI geekness coming out.

Looking forward to playing with your code.

Thanks!

Jeremy
__________________
xcart 4.5.4 gold+ w/x-payments 1.0.6; xcart gold 4.4.4
Reply With Quote
  #4  
Old 09-02-2008, 05:44 AM
  coppercup's Avatar 
coppercup coppercup is offline
 

Senior Member
  
Join Date: Mar 2007
Location: Oklahoma
Posts: 117
 

Default Re: Dynamic Variant Images Display Mod

Hey Jeremy,

That is a very good idea. I will try to get that implemented as soon as possible.

Thanks for the suggestion.

Fritz
__________________
Happy coding!
Fritz
x-cart 4.1.10

Copper Cup Images Print, Web & Multimedia Design
www.coppercupimages.com
Reply With Quote
  #5  
Old 10-24-2008, 07:33 AM
 
autobulbs autobulbs is offline
 

Advanced Member
  
Join Date: Feb 2007
Location: Southampton, UK
Posts: 68
 

Default Re: Dynamic Variant Images Display Mod

Hi,

I have implemented this mod on one of my websites, but it is conflicting with the product variants changing the price. Where a variant is suppose to increase the price, the price stays the same. It works when lytebox is commented out.

Looking in my error console, it tells me that in skin1/modules/product_options/func.js, at line 21, variants[xx][1] is undefined.

Has anyone come across this before? Is there a fix?

Cheers
__________________
Autobulbs Direct Ltd
X-Cart Version: 4.2.2
eWay Designs - Custom X-Cart Templates / CMS Websites / Bespoke web applications
Reply With Quote
  #6  
Old 10-25-2008, 07:11 AM
 
PhilJ PhilJ is offline
 

X-Guru
  
Join Date: Nov 2002
Location: UK
Posts: 3,788
 

Default Re: Dynamic Variant Images Display Mod

@autobulbs, you'll find the patch in following thread will fix it...
http://forum.x-cart.com/showthread.php?t=34052&page=2
Reply With Quote
  #7  
Old 10-27-2008, 12:09 AM
 
autobulbs autobulbs is offline
 

Advanced Member
  
Join Date: Feb 2007
Location: Southampton, UK
Posts: 68
 

Default Re: Dynamic Variant Images Display Mod

Thanks PhilJ, that sorted it out
__________________
Autobulbs Direct Ltd
X-Cart Version: 4.2.2
eWay Designs - Custom X-Cart Templates / CMS Websites / Bespoke web applications
Reply With Quote
  #8  
Old 10-28-2008, 01:58 AM
 
autobulbs autobulbs is offline
 

Advanced Member
  
Join Date: Feb 2007
Location: Southampton, UK
Posts: 68
 

Default Re: Dynamic Variant Images Display Mod

There appears to be another problem with this, in that the page fails to load in Internet Explorer.

It comes up with a message box with a red cross saying:

"Internet Explorer cannot open the Internet site.
-Then my pages URL-

Operation Aborted"

It seems to work the first time I look at a page with with variants, but when i look at another page with variants, the error comes up.

Is there a fix for this error?
__________________
Autobulbs Direct Ltd
X-Cart Version: 4.2.2
eWay Designs - Custom X-Cart Templates / CMS Websites / Bespoke web applications
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Changing and adding new features


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 01:01 AM.

   

 
X-Cart forums © 2001-2020