X-Cart forums

[jeanne]

Try hitting the 'Update' button instead of that link "The image will be saved as the product thumbnail..." at the bottom. The image should upload.

Jeanne
4.0.16

[komarik]

Does any1 knows if it's possible to have Radio buttons with images instead of a drop down box?
Thanks

[ianwebster]

Mike did a cool mod using css based colour swatches (not radio buttons but the same principle -- if you really wanted radios instead of colour swatches it would be very easy to do). Have a look at

http://forum.x-cart.com/viewtopic.php?t=23190&postdays=0&postorder=asc&sta rt=0

In actual fact the posted code needs some very minor modification to make the colour swatches active -- contact Andrew (his username is AsiaPlay) to get help on this as he has completed his this week

[komarik]

Hey thanx for pointing me to the right direction. i did change it to radio buttons instead of a drop down. and i have images next to the name, but images are all the same.

What i did is i took this code from skin1/modules/Product_Options/product_variants.tpl

[img]{$xcart_web_dir}/image.php?productid={$product.productid}&variantid={$v.variantid}[/img]

here is my /modules/Product_Options/customer_options.tpl

{* $Id: customer_options.tpl,v 1.16.2.3 2005/02/08 08:54:55 max Exp $ *}
{if $product_options ne ''}
<SCRIPT type="text/javascript" language="JavaScript 1.2">
var alert_msg = '{$alert_msg}';
</SCRIPT>
{include file="modules/Product_Options/check_options.tpl"}

{foreach from=$product_options item=v}
{if $v.options ne '' || $v.is_modifier eq 'T'}
<TR>
<TD valign="top"><FONT class="CustomerMessage">{if $usertype eq "A"}{$v.class}{else}{$v.classtext|default:$v.class}{/if}</FONT></TD>
<TD>
  

{if $cname ne ""}
  {assign var="poname" value="$cname[`$v.classid`]"}
  {else}
  {assign var="poname" value="product_options[`$v.classid`]"}
  {/if}
  {if $v.is_modifier eq 'T'}
  <INPUT id="po{$v.classid}" type="text" name="{$poname}" value="{$v.default}">
  {else}
  {* RADIO BUTTONS *************************************************}


  <table width="100%" style="border:1px solid #FFFFFF ">
  {foreach from=$v.options item=o}
    <tr>
         <td>
      <label>
        <input type="radio" name="{$poname}" value="{$o.optionid}"{if $o.selected eq 'Y'} selected{/if}>
       {$o.option_name}
      {if $v.is_modifier eq 'Y' && $o.price_modifier ne 0} ({if $o.modifier_type ne '%'}{include file="currency.tpl" value=$o.price_modifier
    display_sign=1}{else}{$o.price_modifier}%{/if}){/if}</label>           </td>
             <td>
[img]{$xcart_web_dir}/image.php?productid={$product.productid}&variantid={$v.variantid}[/img]

</td>
    </tr>
{/foreach}
    </table>
   
  


</p>
  

{/if}
  </p></TD>
</TR>
{/if}
{/foreach}
{/if}


{if $product_options_ex ne ""}
<TR>
    <TD colspan="2"><FONT id="exception_msg" color="red">{if $err ne ''}{/if}</FONT></TD>
</TR>
{if $err ne ''}
<TR>
   <TD colspan="2"><FONT class="CustomerMessage">{$lng.txt_product_options_combinations_warn}:</FONT></TD>
</TR>
{foreach from=$product_options_ex item=v}
<TR>
   <TD>{foreach from=$v item=o}{if $usertype eq "A"}{$o.class}{else}{$o.classtext}{/if}: {$o.option_name}
{/foreach}
</TD>
</TR>
{/foreach}
{/if}
{/if}

[not_so_young_greg]

Thanks ianwebster and others for the mod and different add-ons. It works well. Unfortunatelly - in my opinion - this mod is not finished yet. If one implements all the suggested changes he gets his images changed with variants but what about the thumbnail image in the cart? It stays the same (it is the original thumbnail) which - I think - confuses customers quite a bit.

To make myself clear - lets say you change the colour of the t-shirt you want to buy by choosing the right variant, you see it on screen nice and clean and then you click on the "add to cart" button, you go to the cart section and .... you see your have just bought your T-shirt in a different colour. Now that seems to be more confusing now than before.

Or is it just me who cannot grasp the whole idea?

[ianwebster]

Well this depends on how much modification you have made to the visual aspects of your cart (and is really a completely separate thread). Nevertheless, if you visit the following url and add 2 different colours to your shopping bag and then view the shopping bag, you will see it in action

www.lastangelsonearth.co.uk/heavenly/product.php?productid=16176

This is how I did mine:

Firstly, I created a new imageX.php file with this at the beginning:

require "./top.inc.php";
require "./config.php";

#############################
# THIS FILE IS EXACTLY THE SAME AS IMAGE.PHP EXCEPT THAT
# WE PASS IN A SKU VALUE AND THEN FIND THE RELEVANT VARIANTID
# HERE SO THAT WE CAN SHOW THE CORRECT COLOURED IMAGE IN
# THE CART
#############################

$variantid = func_query_first_cell("SELECT variantid FROM $sql_tbl[variants] WHERE productcode = '$sku'");

#############################
# NO CHANGES HEREAFTER
#############################

Then in customer/main/cart.tpl I changed the image call to this:

{*<!-- NOTE HERE
*** we have changed the image call here to use our own imageX.php
*** so that we can get access to the selected variantid from the sku
*** that we do know
*** we squeeze the size of the variant image down to the same size
*** as a normal thumbnail using width/height attributes - we dont
*** have to worry about speed regarding the size of these (variant)
*** images because the customer will already have cached the image
*** when they added it to their cart
-->***}
<A href="product.php?productid={$products[product].productid}">{**}
[img]imageX.php?productid={$products[product].productid}&sku={$products[product].productcode}[/img]</A>
{**}

PS this gives you the idea of what to do -- you will need to sort out exactly how it fits into your cart (since I have made a whole range of other changes to my cart)

PPS Of course, in light of this, we make all our product images square so that we can hard code the image attributes here (also helps with consistant display on the product pages too)

[not_so_young_greg]

Yes, it works and solves the problem.

I have learnt a lot from your posts. Cleanly written, easy to understand, one can implement it just by copying and pasting if he does not want to go into details. Simply excellent. Thank you.

[mattw]

how would change the image to call on a thumbnail when it displays in the cart (as my detailed images are all diffrent sizes) instead of using the image that is cached? i would also appreciate the same idea for the admin console. Any and all help is greatly appreciated.

[Lionel]

Hi, first of all, thanks for that great mod.

I've done everything and I've got it to work exactly as designed. However, although it is not affecting anything, I do have a javascript error on IE status bar when I click on change,gif (in admin variant). Line1 char 7 Syntax error.

Firefox tells me that the error is at javascript: void();

with a green arrow pointing at the semi-colon. Any idea?

--------------------------------------------------
edit: never mind. I placed a '0' between the brackets and it's gone.
javascript: void(0);

[ianwebster]

Originally Posted by mattw

how would change the image to call on a thumbnail when it displays in the cart (as my detailed images are all diffrent sizes) instead of using the image that is cached? i would also appreciate the same idea for the admin console. Any and all help is greatly appreciated.

here is an old php function I used to use some time ago to insert an image dynamically

<?
function InsertImagePath($imagepathname,$alttext="",$tagname="",$border="0",$vspace="0",$hspace="0")
{
error_reporting(0);
	$imagesize = GetImageSize ($imagepathname);
error_reporting(7);?>
[img]<?echo($imagepathname);?>[/img] BORDER="<?echo($border);?>" ALT="<?echo($alttext);?>" NAME="<?echo($tagname);?>" VSPACE="<?echo($vspace);?>" HSPACE="<?echo($hspace);?>"><?
}

Note: the error_reporting was to prevent bitching to screen by the server if the file was not found as I recall -- this may be different now so check out www.php.net

Sorry I dont have time to do the whole thing for you here -- my suggestion is to edit the code something like this:

<?
function InsertImagePath($imagepathname,$alttext="",$tagname="",$border="0",$vspace="0",$hspace="0")
{
error_reporting(0);
	$imagesize = GetImageSize ($imagepathname);
error_reporting(7);?>

#### we hard code the width (say 50) -- then calc the proportional height for that image ####
$width = 50;
$height = $width * (imagesize[1] / imagesize[0]);

[img]<?echo($imagepathname);?>[/img]" HEIGHT="<?echo($height;) ?> BORDER="<?echo($border);?>" ALT="<?echo($alttext);?>" NAME="<?echo($tagname);?>" VSPACE="<?echo($vspace);?>" HSPACE="<?echo($hspace);?>"><?
}

you can hardcode or exclude some of the other parameters if you know they are always the same.

My own solution to the issue in this case, as I say, was to make all my images the same size instead