More Modifications:
This adds onmouseover/out/click styles to your radio buttons and the table rows that they are wrapped in(see code). It makes it a lot easier for users to navigate through the options.
Wish I had an example, but my site is not live right now. Not for another month at least. (Getting some custom mods from X-Cart). Trust me when I say this is worth the time to implement.
If you have any trouble with this mod, PM me.
enjoy.
In skin1/modules/product_options/customer_options.tpl:
Where:
Code:
{foreach from=$product_options item=v}
Replace with:
Code:
{foreach from=$product_options item=v}
{assign var=id value=$v.class|replace:' ':''|lower}
skin1/modules/product_options/customer_options.tpl:
Where:
Code:
{if $v.is_modifier eq 'T'}
<input id="po{$v.classid}" type="text" name="{$poname}" value="{$v.default|escape}" />
{else}
<select id="po{$v.classid}" name="{$poname}"{if $disable} disabled="disabled"{/if}{if $nojs ne 'Y'} onchange="javascript: check_options();"{/if}>
{foreach from=$v.options item=o}
<option value="{$o.optionid}"{if $o.selected eq 'Y'} selected="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 plain_text_message=1}{else}{$o.price_modifier}%{/if}){/if}</option>
{/foreach}
</select>
{/if}
Replace with:
Code:
{if $v.is_modifier eq 'T'}
<input id="po{$v.classid}" type="text" name="{$poname}" value="{$v.default|escape}" />
{else}
<table width="100%" cellpadding="4" cellspacing="0" border="0" style="border:1px solid #999999;" >
<tr>
<td>
<table id="{$id}Table" class="radiorow" border="0" cellpadding="2" cellspacing="0" width="100%">
{foreach from=$v.options item=o name=radio}
<tr id="{$id}Row{$smarty.foreach.radio.iteration}" {if $o.selected eq 'Y'}class="alternateproductselect"{/if}
onmouseover="hoverRow('{$id}Radio{$smarty.foreach.radio.iteration}', '{$id}Row{$smarty.foreach.radio.iteration}');"
onmouseout="clearRow('{$id}Radio{$smarty.foreach.radio.iteration}', '{$id}Row{$smarty.foreach.radio.iteration}');"
onclick="selectRadio('{$id}Table', '{$id}Radio{$smarty.foreach.radio.iteration}', '{$id}Row{$smarty.foreach.radio.iteration}');check_options();">
<td valign="middle"><input type="radio" name="{$poname}" id="{$id}Radio{$smarty.foreach.radio.iteration}" value="{$o.optionid}" {if $o.selected eq 'Y'}checked="checked" {/if} onclick="selectRadio('{$id}Table', '{$id}Radio{$smarty.foreach.radio.iteration}', '{$id}Row{$smarty.foreach.radio.iteration}');check_options();"/></td>
<td valign="middle" width="100%"><strong>{$o.option_name}{if $v.is_modifier eq 'Y' && $o.price_modifier ne 0} [{if $o.modifier_type ne '%'}Add {include file="currency.tpl" value=$o.price_modifier plain_text_message=1}{else}{$o.price_modifier}%{/if}]{/if}</strong></td>
</tr>
{/foreach}
</table>
</td>
</tr>
</table>
{/if}
skin1/modules/product_options/func.js:
Where:
Code:
/*
Get product option value
*/
function getPOValue(c) {
if (!document.getElementById('po'+c) || document.getElementById('po'+c).tagName.toUpperCase() != 'SELECT')
return false;
return document.getElementById('po'+c).options[document.getElementById('po'+c).selectedIndex].value;
}
/*
Get product option object by class name / class id
*/
function product_option(classid) {
if (!isNaN(classid))
return document.getElementById("po"+classid);
if (!names)
return false;
for (var x in names) {
if (names[x]['class_name'] != classid)
continue;
return document.getElementById('po'+x);
}
return false;
}
/*
Get product option value by class name / or class id
*/
function product_option_value(classid) {
var obj = product_option(classid);
if (!obj)
return false;
if (obj.type != 'select-one')
return obj.value;
var classid = parseInt(obj.id.substr(2));
var optionid = parseInt(obj.options[obj.selectedIndex].value);
if (names[classid] && names[classid]['options'][optionid])
return names[classid]['options'][optionid];
return false;
}
Replace with:
Code:
/*
Get product option value -modified
*/
function getPOValue(c) {
if (document.getElementsByName('product_options['+c+']')) {
var radios = document.getElementsByName('product_options['+c+']');
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
return radios[i].value;
}
}
}
}
/*
Get product option object by class name / class id
*/
function product_option(classid) {
if (!isNaN(classid))
return document.getElementById("po"+classid);
if (!names)
return false;
for (var x in names) {
if (names[x]['class_name'] != classid)
continue;
return document.getElementById('po'+x);
}
return false;
}
/*
Get product option value by class name / or class id
*/
function product_option_value(classid) {
var obj = product_option(classid);
if (!obj)
return false;
if (obj.type != 'select-one')
return obj.value;
var classid = parseInt(obj.id.substr(2));
var optionid = parseInt(obj.options[obj.selectedIndex].value);
if (names[classid] && names[classid]['options'][optionid])
return names[classid]['options'][optionid];
return false;
}
function selectRadio(tableName, radioButtonName,rowName)
{
var table = document.getElementById(tableName);
var radioButton = document.getElementById(radioButtonName);
var row = document.getElementById(rowName);
if (table && radioButton && row) {
var rows = table.getElementsByTagName('tr');
radioButton.checked = true;
for (var i = 0; i < rows.length; i++) {
rows[i].className = 'alternateproductdefault';
}
row.className = 'alternateproductselect';
}
return true;
}
function hoverRow(radioButtonName, rowName)
{
var radioButton = document.getElementById(radioButtonName);
var row = document.getElementById(rowName);
if (radioButton && row) {
if (!radioButton.checked) {
row.className = 'alternateproducthover';
}
}
return true;
}
function clearRow(radioButtonName, rowName)
{
var result = null;
var radioButton = document.getElementById(radioButtonName);
var row = document.getElementById(rowName);
if (radioButton && row) {
if (radioButton.checked) {
row.className = 'alternateproductselect';
} else {
row.className = 'alternateproductdefault';
}
if (radioButton.checked) {
result = radioButton;
}
}
return result;
}
function showHide(id)
{
var moreInfoBox = document.getElementById(id);
if (moreInfoBox.style.display == 'none')
{
moreInfoBox.style.display = 'block';
}
else
{
moreInfoBox.style.display = 'none';
}
}
skin1/skin1.css:
Add:
Code:
.radiorow {
cursor: pointer;
}
.radiorow td {
padding: .375em .5em;
}
.alternateproductselect {
color: #######; /* Text Color for selected option */
background-color: #######; /* Background color for selected option */
}
.alternateproductdefault {
color: #000000;
background-color: transparent;
}
.alternateproducthover {
color: #######; /* Text Color for non-selected options */
background-color: #######; /* Background color for non-selected options */
}