X-Cart forums - Product Options Customizaion ?

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

        }