X-Cart forums - Product Options Customizaion ?

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Product Options Customizaion ? (https://forum.x-cart.com/showthread.php?t=33019)

Product Options Customizaion ?

I was wondering, if instead of having a drop down list for product options, I could set them up as radio buttons instead? And, also making one required before checkout?

Re: Product Options Customizaion ?

Sure, just change the code to radio instead of select in the template. modules/product_options/customer_options.tpl.

Re: Product Options Customizaion ?

Thanks, but I am not sure where in the code to change?

<?php
/************************************************** ***************************\
+-----------------------------------------------------------------------------+
| X-Cart |
| Copyright (c) 2001-2007 Ruslan R. Fazliev <rrf@rrf.ru> |
| All rights reserved. |
+-----------------------------------------------------------------------------+
| PLEASE READ THE FULL TEXT OF SOFTWARE LICENSE AGREEMENT IN THE "COPYRIGHT" |
| FILE PROVIDED WITH THIS DISTRIBUTION. THE AGREEMENT TEXT IS ALSO AVAILABLE |
| AT THE FOLLOWING URL: http://www.x-cart.com/license.php |
| |
| THIS AGREEMENT EXPRESSES THE TERMS AND CONDITIONS ON WHICH YOU MAY USE |
| THIS SOFTWARE PROGRAM AND ASSOCIATED DOCUMENTATION THAT RUSLAN R. |
| FAZLIEV (hereinafter referred to as "THE AUTHOR") IS FURNISHING OR MAKING |
| AVAILABLE TO YOU WITH THIS AGREEMENT (COLLECTIVELY, THE "SOFTWARE"). |
| PLEASE REVIEW THE TERMS AND CONDITIONS OF THIS LICENSE AGREEMENT |
| CAREFULLY BEFORE INSTALLING OR USING THE SOFTWARE. BY INSTALLING, |
| COPYING OR OTHERWISE USING THE SOFTWARE, YOU AND YOUR COMPANY |
| (COLLECTIVELY, "YOU") ARE ACCEPTING AND AGREEING TO THE TERMS OF THIS |
| LICENSE AGREEMENT. IF YOU ARE NOT WILLING TO BE BOUND BY THIS |
| AGREEMENT, DO NOT INSTALL OR USE THE SOFTWARE. VARIOUS COPYRIGHTS AND |
| OTHER INTELLECTUAL PROPERTY RIGHTS PROTECT THE SOFTWARE. THIS |
| AGREEMENT IS A LICENSE AGREEMENT THAT GIVES YOU LIMITED RIGHTS TO USE |
| THE SOFTWARE AND NOT AN AGREEMENT FOR SALE OR FOR TRANSFER OF TITLE.|
| THE AUTHOR RETAINS ALL RIGHTS NOT EXPRESSLY GRANTED BY THIS AGREEMENT. |
| |
| The Initial Developer of the Original Code is Ruslan R. Fazliev |
| Portions created by Ruslan R. Fazliev are Copyright (C) 2001-2007 |
| Ruslan R. Fazliev. All Rights Reserved. |
+-----------------------------------------------------------------------------+
\************************************************* ****************************/
#
# $Id: customer_options.php,v 1.31.2.1 2007/03/22 13:54:55 svowl Exp $
#
if ( !defined('XCART_SESSION_START') ) { header("Location: ../../"); die("Access denied"); }
if (empty($err)) $err = "";
$product_options = func_get_product_classes($productid, !empty($product_info['is_taxes']));
$product_options_ex = func_get_product_exceptions($productid);
$product_options_js = func_get_product_js_code($productid);
$variants = func_get_product_variants($productid, $user_account['membershipid']);
$membershipid = ($current_area == 'C') ? $user_account['membershipid'] : $userinfo['membershipid'];
if (empty($options))
$options = func_get_default_options($productid, $product_info['min_amount'], $user_account['membershipid']);
if (!empty($product_options) && !empty($options) && is_array($options)) {
# Defined preselected options
foreach ($product_options as $k => $v) {
if (preg_match("/^\d+$/S", $options[$v['classid']])) {
if ($v['is_modifier'] == 'T') {
$product_options[$k]['default'] = $options[$v['classid']];
} else {
$product_options[$k]['options'][$options[$v['classid']]]['selected'] = 'Y';
}
} else {
$product_options[$k]['default'] = $options[$v['classid']];
}
}
}
if (!empty($product_options))
$smarty->assign("product_options",$product_options);
if (!empty($product_options_ex))
$smarty->assign("product_options_ex", $product_options_ex);
if (!empty($variants)) {
foreach ($variants as $v) {
if ($v['taxed_price'] != 0) {
$smarty->assign("variant_price_no_empty", true);
break;
}
}
$smarty->assign("variants", $variants);
}
$smarty->assign("err", $err);
$smarty->assign("product_options_count", is_array($product_options) ? count($product_options) : 0);
$smarty->assign("product_options_js", @trim($product_options_js));
?>

Re: Product Options Customizaion ?

That's the php file, you want the .tpl file. skin1/....

Re: Product Options Customizaion ?

Thanks for your help here. Unfortunlatley, I have a non-developer brain. I recognize the select and options, but, I've tried a number of combos to insert a radio control, but I am stuck.

Any possiblity you could post the replace code? Please :)

Re: Product Options Customizaion ?

first, backup skin1/modules/product_options/customer_options.tpl

then replace

Code:

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

with

Code:

{foreach from=$v.options item=o}

<input id="po{$v.classid}" type="radio" name="{$poname}" value="{$o.optionid}" />{$o.option_name}

<br />

{/foreach}

as for having a selection required before checkout, its a bit more involved and it may mess with the form validation since to check if there is something selected for radio buttons you need to loop through all of them

Re: Product Options Customizaion ?

Most excellent - many thanks!

I didn't wrap the radio in the 'foreach' statement. Now I know. Thanks again!

Re: Product Options Customizaion ?

This worked great for me, however, there is one thing that I can not get to work. With the drop down box, when you select a color, it changes the product image to that color. With the radio buttons, I can get it to select the default color on load, but I can not get it to change the product image when I select a different color.

Here is the code that was in customer_options.tpl

Code:

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

I replaced the above with this:

Code:

{foreach from=$v.options item=o}

<input id="po{$v.classid}" type="radio" name="{$poname}"{if $disable} disabled="disabled"{/if}{if $nojs ne 'Y'} onchange="javascript: check_options();"{/if} value="{$o.optionid}" {if $o.selected eq 'Y'} checked="checked"{/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}

<br />

{/foreach}

Anyone able to help me figure out how to make it change the product image?

Thanks!!! :)

Re: Product Options Customizaion ?

How do u get the price to display next to each? when they are different prices for variants for example

Re: Product Options Customizaion ?

The replacement code I posted does work with the price modification. However, it will not change the price on the product page nor the image like the drop down box will. I am hoping in the next day or two to have figured out where to change the js to use the radio button instead of the drop down box.

HOWEVER, if you use the code above, it will still add the correct options and option prices to the cart when the customer selects the option they would like and hits add to cart.

Soon as I figure out the js part, I will post back.

Re: Product Options Customizaion ?

good job so far, its much clearer with radio buttons, the customer can see it on the page, instead of it being hidden in a drop down they have to click

Re: Product Options Customizaion ?

use

Code:

{foreach from=$v.options item=o}

<input id="po{$v.classid}" type="radio" name="{$poname}" value="{$o.optionid}" {if $nojs ne 'Y'} onclick="javascript: check_options();"{/if}/>{$o.option_name}

<br />

{/foreach}

to include the javascript for updating the price and image and what not

Re: Product Options Customizaion ?

Ok, I changed what I had which was:

Code:

{if $nojs ne 'Y'} onchange="javascript: check_options();"{/if}

to (the only difference in your code & mine)

Code:

{if $nojs ne 'Y'} onclick="javascript: check_options();"{/if}

and that did not work to update the prices, etc.

Re: Product Options Customizaion ?

that code didnt update the price

Re: Product Options Customizaion ?

well i checked out the javascript file itself...it seems like using radio options will break a lot of the code, its not going to be as simple as a replace

the problem with using radio inputs is that now a group of options will all share the same id and name, so its going to require more manipulation with DOM or with the naming scheme of the inputs

Re: Product Options Customizaion ?

I am good, I am not that good. Can you do it for us?! :lol:

Re: Product Options Customizaion ?

when i have time i will have a crack at it

Re: Product Options Customizaion ?

This should be close to what you're looking for. I'm not sure if it works because I have my radio button id's modified. I edited this version to work with the default x-cart installation. At a minimum, this is a good place to start for others.

Change the SELECT elements to INPUT type RADIO as mentioned in previous posts. Then...

In skin1/modules/Product_Options/func.js

Change:

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;

}

To:

Code:

/*

        Get product option value -modified

*/

function getPOValue(c) {

        if (!document.getElementsByName('product_options['+c+']'))

                return false;

        var radios = document.getElementsByName('product_options['+c+']');

        for (var i = 0; i < radios.length; i++) {

                if (radios[i].checked) {

                        return radios[i].value;        

                }

        }

}

Let me know how it goes.

-Scott

Re: Product Options Customizaion ?

It works and it works beautifully! :D/

I never really dove into JavaScript after learning too many languages that I never have had a need for. I am getting ready to dive into JavaScript & Ajax as soon as I get time. I have determined I need to.

Thanks so much! That was a very simple fix for those who know JS. =D>

Re: Product Options Customizaion ?

Just make sure you put the onclick instead of onchange like last shown in post #13 (thanks inebriate!) or it will not change everything until you click away from the radio button you just clicked.

Re: Product Options Customizaion ?

Glad I could be helpful.

Enjoy.

Re: Product Options Customizaion ?

I just checked and this doesnt work in Firefox or Safari

Re: Product Options Customizaion ?

I have it working in the following browsers:

Firefox 2.0.0.6 for Mac
Safari 2.0.4 for Mac
IE 6.0.29 for PC
Firefox 2.0.0.6 for PC

Re: Product Options Customizaion ?

How do you validate, in order to make appear a warning message if no option is selected? If you dont do this, the first option is selected and added to the cart.

Re: Product Options Customizaion ?

You could validate with javascript, but it's a lot easier if you force a selection to start with:

Code:

<input type="radio" name="{$poname}" value="{$o.optionid}"

{if $o.selected eq 'Y'}checked="checked" {/if}

onclick="check_options();"/>

Re: Product Options Customizaion ?

Quote:

Originally Posted by pyap

I have it working in the following browsers:

Firefox 2.0.0.6 for Mac
Safari 2.0.4 for Mac
IE 6.0.29 for PC
Firefox 2.0.0.6 for PC

Could you please tell me, did you do something different? I finally got back here to ask. The buttons work as in getting the right selection in the cart but they do not update in FF 2.0.0.6 for me. You can check this product (one with variants)

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

The sku and image are not changing in FF, only in IE.

Thanks!

Re: Product Options Customizaion ?

I flipped through your code, compared to mine, this should fix the problem:

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;

                        }

                }

        }

}

I fixed the original post #18 to show this code. All that is changed is:

'po'+c is now 'product_options['+c+']'

My apologies. That is my fault. I didn't check the code that I posted.

Re: Product Options Customizaion ?

Thanks Pyap!

It works perfectly in FF now. :)

I do appreicate your time in helping me get this working. I have just been pedal to the metal and not had time to stop and figure everything out.

Re: Product Options Customizaion ?

Quote:

Originally Posted by pyap

I have it working in the following browsers:

Firefox 2.0.0.6 for Mac
Safari 2.0.4 for Mac
IE 6.0.29 for PC
Firefox 2.0.0.6 for PC

It works in IE for me, but the price doesnt change for me when I change an option in other browsers.

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

        }

Re: Product Options Customizaion ?

OOH! OOH! OOH!

I was posting as you posted the modifications!

Going to try them now. :)

Re: Product Options Customizaion ?

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

well done

Re: Product Options Customizaion ?

Quote:

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!!! :lol:

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!!!

Re: Product Options Customizaion ?

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

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}

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.

Re: Product Options Customizaion ?

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... :?

Re: Product Options Customizaion ?

Here's a screenshot of the code in action:

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

Re: Product Options Customizaion ?

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

Re: Product Options Customizaion ?

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.