X-Cart forums

[pyap]

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:

{foreach from=$product_options item=v}

Replace with:

{foreach from=$product_options item=v}

{assign var=id value=$v.class|replace:' ':''|lower}

skin1/modules/product_options/customer_options.tpl:

Where:

{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:

{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:

/*
	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:

/*
	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:

	.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 */
	}

[hhiker]

OOH! OOH! OOH!

I was posting as you posted the modifications!

Going to try them now.

[RichieRich]

remarkable the price now changes also in the other browsers as advised in post #28

well done

[hhiker]

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.

I only have it part working at the moment. The mouseover is not working. I am going to work on that here shortly. It is BREAK TIME!!!

Soon as I get it totally working, I will post a link for ya'll to see. I am sure it is something I did. I already missed one thing and had an error on the page. Again, it is break time!!!

[pyap]

Before you get too far, I missed a step.....a very important one.

In skin1/modules/product_options/customer_options.tpl:

Where:

{foreach from=$product_options item=v}

Replace with:

{foreach from=$product_options item=v}

{assign var=id value=$v.class|replace:' ':''|lower}

Also, make sure you edit the CSS colors to match your site. I took the colors out so you have to choose your own....or you won't see anything.

One of these days I'll get it right the first time. I just can't seem to keep track of everything I've done. Perhaps I should take notes.....

Hopefully this is the whole mod.

I'll edit the original too.

[hhiker]

Yeah, I saw the CSS thing. Changed that to not show anything anyhow. I have enough roll overs going that I think if I do anymore, I will drive people away. I am the only coder so I pick n choose what options to offer to the boss.


You are doing good at documenting. You are doing it here on the board. Don't feel bad, I have only documented a handful of things b/c by the time I get it right, I forget what I started with or just flat forget to document.


When you get time, I can not get the mouseover to work. And I am not getting a pointer either.


See here: http://www.highlandhiker.com/Eagle-Creek-Tarmac-ES-22-Rolling-Carry-On-p-70.html


Warning, that might change as I am editing live...

[pyap]

check PM's.

[pyap]

Here's a screenshot of the code in action:

http://www.absoluteexhibits.com/screenshot.jpg

[SamD]

Thank you for your mod! Now, I want to display price, SKU, availability for each different product variants and SKUs. Is it possible?

[davidsaldana]

This seems like a great mod, but does it work if you want to have both drop downs, and radio buttons? Sometimes, when there are 20 different color choices, you want to use a drop down, but other times when there are only 2 or 3 options, radio buttons would be best.