X-Cart forums

[jb5ep]

OK. this is far too challenging for a Friday evening, but I can't find any existing threads that relate to it, so here goes...

The Problem:
-The site i'm putting together sells 'wedding stationery'.
- For each item of stationery, you can select one of 10 'typefaces' for the message in your stationery
- This typeface selection is implemented using the Product Options label, in my test XC install. Something like this:

http://www.ocpx.com/images/temp/product_pre.png

However.....

- What i'd like to do is include a 'preview' capability, so when you select a typeface from the dropdown, you also see a preview next to the drop down of the typeface you're selecting. Something like this:

http://www.ocpx.com/images/temp/product_post.png

- I've already implemented this on a static site (http://www.jellyfishdesigns.com/contact_us.shtml - see the 'Design for these samples' dropdown at the bottom) that uses this script:

<script language="JavaScript" type="text/javascript">
function previewPic(sel) {
document.previewpic.src = "" + sel.options[sel.selectedIndex].value;
}
function showPic(sel) {
images = new Array();
images[1] = "images/anya.jpg";
images[2] = "images/bibi.jpg";
images[3] = "images/cari.jpg";
images[4] = "images/disco.jpg";
images[5] = "images/elke.jpg";
images[6] = "images/estra.jpg";
images[7] = "images/fiora.jpg";
images[8] = "images/gracia.jpg";
images[9] = "images/hasna.jpg";
images[10] = "images/lettie.jpg";
images[11] = "images/nomi.jpg";
images[12] = "images/talia.jpg";
images[13] = "images/zia.jpg";
window.location.href = images[sel.selectedIndex+1];
}
</script>

The advice i'm after is:

- Is there any way to implement this in XC using the default Product Options module and hacking away at tpl's (i.e. without touching any core files)?

I've compared the preview script on the static site, but this looks horrendously difficult to implement as Xc allocates a unique 'po{$v.classid}' in 'Modules/Product_Options/customer_options.tpl'.

Any thoughts from you XC experts out there?

Cheers

[balinor]

This mod has been in demand for quite a while now, and I don't believe it has been implemented yet. It would indeed be a great addition to X-Cart.

[jb5ep]

Anyone else have a need for this functionality?

cheers,

[balinor]

Like I said, there is a large demand for a mod like this. A developer could make some good money if they coded it

[ianwebster]

This is quite easy to do actually.

Take a look at www.lastangelsonearth.co.uk/heavenly/product.php?productid=1019

In my case I am replacing the main image when you select a colour from the dropdown. Basically the skin1/modules/Product_Options/check_options.tpl file has everything you need (only there is a minor flaw in the code -- probably cos they want to charge you to fix it!!)

I changed this:

var image_dir = "{if $full_url}{$http_location}{else}{$xcart_web_dir}{/if}/image.php?productid={$productid}&variantid=";

to this:

var image_dir = "{if $full_url}{$http_location}{else}{$xcart_web_dir}{/if}/image.php?productid={$product.productid}&variantid="; 

Then in product.tpl you need your "typeface" image to have an id of "product_thumbnail" - in my case (because I am changing the main image) I used this

{if $images ne ""} 
{if $images[0].avail eq "Y"} 
{if $images[0].tmbn_url}[img]{$images[0].tmbn_url}[/img]{else} 
[img]{$xcart_web_dir}/product_image.php?imageid={$images[0].imageid}[/img]{/if} 
{/if} 
{else} 
{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url id="product_thumbnail"} 
{/if}

but you could have a separate image which has an id of "product_thumbnail" with its own size properties etc

Then all you need to do is to add some additional entries to your "xcart_thumbnails" table for each productid/variantid variation - each typeface would have the "image_path" and "variantid" field set accordingly (I have used phpMyAdmin to do this so far as i have not got around to making proper changes to my administration yet)

et voila !!

only downside from your viewpoint is that you need to add image entries to the database for each product/variant combination (not just a single image for each variant typeface) but works nonetheless

[mrdigital]

hello, is it possible to do what this site is doing http://www.bigandtallworld.com/imagefolio/scripts/imageFolio.cgi?action=view&link=T-Shirts_Muscles_Tanks_a...image=8650.jpg i would like this feature and possibly others will too

[ianwebster]

It seems feasible but is way outside the boundaries of this thread. I guess you need to ask x-cart for a quote.

Actually there is another example discussed on these forums which takes into account the stock levels as well (and in that case I would be interested) - here is the actual site

http://www.justhom.com/HOM-H01-light-micro-pr-106.html

[jb5ep]

Hi ianwebster,

Then all you need to do is to add some additional entries to your "xcart_thumbnails" table for each productid/variantid variation

This sounds like a pretty good interim solution - any chance you could explain the above a bit more?

Many thanks,

[ianwebster]

This is the structure for your xcart_thumbnails table:

CREATE TABLE `xcart_thumbnails` (
  `productid` int(11) NOT NULL default '0',
  `image` mediumblob NOT NULL,
  `image_path` varchar(255) NOT NULL default '',
  `image_type` varchar(64) NOT NULL default 'image/jpeg',
  `variantid` int(11) NOT NULL default '0',
  PRIMARY KEY  (`productid`,`variantid`)
) TYPE=MyISAM;

The xcart programmers have kindly organised things so we can have more than one entry for a product (each with the same productid but a different variantid)

the variantid is an id they have allocated for a unique variant of a product (in your case each typeface in that style). I have changed my product_variants.tpl file so I can easily see these variantids. add a new column as follows:

<TR class="TableHead"> 
<TD width="40%">{$lng.lbl_variants}</TD>
<TD>#VARIANT ID</TD>
<TD>{$lng.lbl_price}</TD>
<TD>{$lng.lbl_weight}</TD>
<TD>{$lng.lbl_amount}</TD>
<TD>{$lng.lbl_sku}</TD>
</TR>
{foreach from=$variants item=v}
<TR{cycle name="classes" values=" class=TableSubHead,"}>
<TD><TABLE>
{foreach from=$v.options item=o}
<TR>
<TD>{$o.class}:</TD>
<TD>{$o.option_name}</TD>
</TR>
{/foreach}
</TABLE></TD>
<TD>{$v.variantid}</TD>
<TD><INPUT type="text" size="8" name="vs[{$v.variantid}][price]" value="{$v.price}"></TD>
<TD><INPUT type="text" size="5" name="vs[{$v.variantid}][weight]" value="{$v.weight}"></TD>
<TD><INPUT type="text" size="5" name="vs[{$v.variantid}][avail]" value="{$v.avail}"></TD>
<TD><INPUT type="text" size="8" name="vs[{$v.variantid}][productcode]" value="{$v.productcode}"></TD>
</TR>
{foreachelse}
<TR>
<TD align="center" colspan="4">{$lng.lbl_variants_list_empty}</TD>
</TR>
{/foreach}

Obviously it would be nice if you could add extra entries to the xcart_thumbnails table using the administration interface but I havent got around to doing that part on mine yet.

However, you can manually add a new entry in the xcart_thumbnails table for each product/typeface combination. For arguments sake, lets say your "Anya Evening Invitations" product has an id of 16153. There should already be an entry in the xcart_thumbnails table where the productid is 16153 and the variantid is 0 (this will be your default thumbnail which is entered by the existing administration interface)

Now you need to add another entry for each typeface that is available in the "Anya Evening Invitations" range
ie make a new entry with productid = 16153 and variantid = whatever the variantid is for your "typeface 01" - the path to your typeface graphic will depend on where you are storing your images (i am assuming that you are not using blobs). Then add new entries for each additional typeface in that range.

Caveat -- some parts of the standard xcart code can be quite draconian about removing stuff from the xcart_thumbnails table if you make radical changes to your variant setup after doing all this manually - i am currently making changes to some of the administration files so that 1) you can add images directly in the admin and 2) so their code is less brutal -- but dont hold your breath cos this manual technique has worked well for me and so these changes to the admin are not that high on my priority list

[ianwebster]

Ok here are the changes you need to make to your admin. If you have a lot of products then I think you will still be better off uploading an sql file into your xcart_thumbnails table to make the additions in bulk

My product_variants.tpl now looks like this

{if $active_modules.Product_Options ne ""}

{capture name=dialog}
<TABLE border="0" {if $productids ne ''}cellspacing="0" cellpadding="4"{else}cellspacing="1" cellpadding="2"{/if} width="100%">

<FORM action="product_modify.php" method="POST" name="productvariantsform">
<INPUT type="hidden" name="section" value="{$section}">
<INPUT type="hidden" name="mode" value="product_variants_modify">
<INPUT type="hidden" name="productid" value="{$product.productid}">

<TR class="TableHead">
<TD colspan="2" align="center">{$lng.lbl_image}</TD>
<TD width="40%">{$lng.lbl_variants}</TD>
<TD>#VARIANT ID</TD>
<TD>{$lng.lbl_price}</TD>
<TD>{$lng.lbl_weight}</TD>
<TD>{$lng.lbl_amount}</TD>
<TD>{$lng.lbl_sku}</TD>
</TR>
{foreach from=$variants item=v}
<TR{cycle name="classes" values=" class=TableSubHead,"}>
<TD>[img]{$ImagesDir}/delete.gif[/img][img]{$ImagesDir}/change.gif[/img]</TD>
<TD align="center">[img]{$xcart_web_dir}/image.php?productid={$product.productid}&variantid={$v.variantid}[/img]</TD>
<TD><TABLE>
{foreach from=$v.options item=o}
<TR>
<TD>{$o.class}:</TD>
<TD>{$o.option_name}</TD>
</TR>
{/foreach}
</TABLE></TD>
<TD>{$v.variantid}</TD>	
<TD><INPUT type="text" size="8" name="vs[{$v.variantid}][price]" value="{$v.price}"></TD>
<TD><INPUT type="text" size="5" name="vs[{$v.variantid}][weight]" value="{$v.weight}"></TD>
<TD><INPUT type="text" size="5" name="vs[{$v.variantid}][avail]" value="{$v.avail}"></TD>
<TD><INPUT type="text" size="20" name="vs[{$v.variantid}][productcode]" value="{$v.productcode}"></TD>
</TR>
{foreachelse}
<TR>
<TD align="center" colspan="5">{$lng.lbl_variants_list_empty}</TD>
</TR>
{/foreach}
</TABLE>
{if $variants ne ''}


<INPUT type="submit" value="{$lng.lbl_update}">

<INPUT type="button" value="{$lng.lbl_rebuild_variants}" onclick="javascript: self.location='product_modify.php?section={$section}&productid={$product.productid}&mode=product_variants_rebuild';">


{/if}
</FORM>

{if $file_upload_data.imtype eq "T"}
{include file="main/subheader.tpl" title="Preview variant image"}
<TABLE border="0">
<TR>
<TD>[img]{$xcart_web_dir}/image.php?productid={$product.productid}&variantid={$file_upload_data.variantid}&tmp=y[/img]</TD>
</TR>
<TR>
<TD>
{$lng.txt_save_thumbnail_note}</TD>
</TR>
</TABLE>
{/if}

{/capture}
{include file="dialog.tpl" title=$lng.lbl_product_variants content=$smarty.capture.dialog extra="width=100%"}

{/if}

In image_selection.php add this new line

$file_upload_data["source"] = $source;
$file_upload_data["id"] = $id;
$file_upload_data["imtype"] = $imtype;
$file_upload_data["counter"] = 1;
########### INSERT
$file_upload_data["variantid"] = $variantid;

Also in image_selection.php, add this line

$smarty->assign("dir_list",$dir_list);
$smarty->assign("imtype", $imtype);
$smarty->assign("id", $id);
$smarty->assign("return_script", $return_script);
$smarty->assign("parent_window", $parent_window);
$smarty->assign("config_data", $config_data);
########### INSERT
$smarty->assign("variantid", $variantid);

In popup_image_selection.tpl, add this after the other hidden form fields

<INPUT type="hidden" name="variantid" value="{$variantid}">

Add this new function to popup_image_selection_js.tpl

function popup_image_selectionX (imtype, id, query,variantid) {
	window.open("image_selection.php?imtype="+imtype+"&id="+id+"&variantid="+variantid+"&qry_string="+query,"selectimage","width=450,height=350,toolbar=no,status=no,scrollbars=yes,resizable=no,menubar=no,location=no,direction=no");
}

Add this to product_variants.php

if(!func_query_first_cell("SELECT COUNT(*) FROM $sql_tbl[variants] WHERE productcode = '$v[productcode]'"))
			db_query("UPDATE $sql_tbl[variants] SET productcode = '$v[productcode]' WHERE variantid = '$k'");
	}
func_set_product_by_variants($productid);
########### INSERT
	# Prepare for thumbnail updating
	$image_posted = func_check_image_posted($file_upload_data, "T");
	$store_in = ($config["Images"]["thumbnails_location"] == "FS"?"FS":"DB");
	if($image_posted)
	{
		# Get image content
		$image_data = func_get_image_content($file_upload_data, $productid);
		# Replace image (DB) or full path to image (FS) in the database
		if ($store_in == "FS") $image_data["image"] = addslashes($image_data["image"]);
		db_query("REPLACE INTO $sql_tbl[thumbnails] (productid, ".($store_in == "FS"?"image_path":"image").", image_type,variantid) VALUES ('$productid', '$image_data[image]', '$image_data[image_type]','".$file_upload_data["variantid"]."')");
	}

That deals with the administration for variant thumbnails (and my variant screen now looks like this)

http://www.lastangelsonearth.co.uk/heavenly/product_variants.jpg

But there are a couple of things to stop all our good work being rubbed out by other xcart code elsewhere so we need to change product_modify.php

if ($mode == "delete_thumbnail" && !empty($productid)) {
#
# Delete product thumbnail
#
############### REMOVED THIS
#	$image_paths = func_query("SELECT image_path FROM $sql_tbl[thumbnails] WHERE productid='$productid'");
#	if(!empty($image_paths)) {
#		foreach($image_paths as $v) {
#			@unlink($v['image_path']);
#		}
#	}
#	db_query("DELETE FROM $sql_tbl[thumbnails] WHERE productid='$productid'");
#	db_query("UPDATE $sql_tbl[products] SET image_x='0', image_y='0' WHERE productid='$productid'");
#	func_header_location("product_modify.php?mode=return&productid=$productid");
############### AND REPLACED WITH THIS
	$image_paths = func_query("SELECT image_path FROM $sql_tbl[thumbnails] WHERE productid='$productid' AND variantid='$variantid'");
# REVIEW: do we EVER want to actually delete a source file from the server? May need to check whether the source file is used elsewhere before deleting it?
	if(count($image_paths)==1)
		@unlink($image_paths[0]);
# END REVIEW
	db_query("DELETE FROM $sql_tbl[thumbnails] WHERE productid='$productid' AND variantid='$variantid'");
	if($variantid == 0)
		db_query("UPDATE $sql_tbl[products] SET image_x='0', image_y='0' WHERE productid='$productid'");
	func_header_location("product_modify.php?mode=return&productid=$productid&section=$section");
############### END
}

And we need to change product_details.tpl

###### REPLACE THIS
# <INPUT type="button" value="{$lng.lbl_delete_image}" onclick='javascript: self.location="product_modify.php?mode=delete_thumbnail&productid={$product.productid}"'>
######## WITH THIS
<INPUT type="button" value="{$lng.lbl_delete_image}" onclick='javascript: self.location="product_modify.php?mode=delete_thumbnail&productid={$product.productid}&variantid=0"'>