Javascript Validation for Product Options
 

Hi Guys,

I applied the select XXX product options dropdown change from mffowler but this simple change isn't working for me. I am getting a javascript error that I am having trouble solving. I get the following error in Firefox:- document.getElementById("29") has no properties.

In Explorer I get object required on line 155. I found line 155 to be this <!--

Can someone see what I am doing wrong? I have attached a screen dump of the product options page in my admin. This js error prevents the product from being selected.

Re: Javascript Validation for Product Options
 

For 4.1.x, try this:

[edited] File: /skin1/modules/Product_Options/customer_options.tpl

FIND


REPLACE WITH:


THEN -- in the product options javascript, use something like this:


and of course, change the 'po' in the js to the actual product option number.

Re: Javascript Validation for Product Options
 

Carp,

My product.options.tpl looks like this. Is this the right code I need to replace (maybe just the first <td>?

{foreach from=$v.options item=o}
<tr>
<td>{if $o.avail ne 'Y'}<font color="red">{/if}{$o.option_name}{if $o.avail ne 'Y'}</font>{/if}</td>
{if $v.is_modifier eq 'Y' && $o.price_modifier ne 0}
<td>{$o.price_modifier|formatprice}</td>
<td>{if $o.modifier_type|default:"$" eq '$'}{$config.General.currency_symbol}{else}%{/if}</td>
{/if}
</tr>
{foreachelse}
<tr>
{if $geid ne ''}<td>&nbsp;</td>{/if}
<td colspan="{if $v.is_modifier eq 'Y'}3{else}1{/if}">{$lng.lbl_options_list_empty}</td>
</tr>
{/foreach}</table>
</td>
</tr>
{foreachelse}
<tr>
{if $geid ne ''}<td width="15" class="TableSubHead">&nbsp;</td>{/if}
<td align="center" colspan="7">{$lng.lbl_product_options_list_empty}< /td>
</tr>
{/foreach}

Re: Javascript Validation for Product Options
 

SOrry -- should have been more clear.. I update the previous post. Edit File: /skin1/modules/Product_Options/customer_options.tpl

Re: Javascript Validation for Product Options
 

I thought it didn't look right. Once I changed the right template everything looks sweet as. Thanks Carp. I can go to sleep now.

Re: Javascript Validation for Product Options
 

Hi Carpeperdiem,

I notice in the "Validation Javascript" below, you have two production option lines listed. If my item have only one product option group, should I remove the second line? Or change the production option to the same PO number on both lines?

For example, in one of my item with only 1 product option and the product option number is 500. Should I have the "Validation Javascript" to look like this instead?

--------------------------------------------------------------------------------------------------------------------------
if (document.getElementById('po500').selectedIndex == 0)
{ alert('Please select a size for your item.'); return false;
}
else return true;
--------------------------------------------------------------------------------------------------------------------------

Thank you
-Tuan

Re: Javascript Validation for Product Options
 

OK.....I think I got it "half-way" working. (Would that be the same as not working? lol....)

I have the "skin1\modules\Product_Options\customer_options.tp l" file revised with the codes above and "Validation Javascript" added to the product option. I went to the product details page and click "Add to Cart", I would get the "Please make a selection" pop-up message window. So this part is working as expected.

And here is the part that isn't working....I went ahead and select one of the available product option listed and the clicked "Add to Cart". It took me to the "Your Shopping Cart" page with an empty cart instead of adding that item with the selection option.

Maybe I've been staring that the monitors for too long and overlooked something. Here is the "Validation Javascript" used

----------------------------------------------------------------------------------------------------------------------------
if (document.getElementById('po630').selectedIndex == 0)
{ alert('Please make a selection.'); return false;
}
else return true;
----------------------------------------------------------------------------------------------------------------------------


And here is my "skin1\modules\Product_Options\customer_options.tp l" file
----------------------------------------------------------------------------------------------------------------------------
{* $Id: customer_options.tpl,v 1.24 2006/04/07 05:19:21 svowl Exp $ *}
{if $product_options ne ''}
{if $nojs ne 'Y'}
<tr style="display: none;"><td>
<script type="text/javascript" language="JavaScript 1.2">
<!--
var alert_msg = '{$alert_msg}';
-->
</script>
{include file="modules/Product_Options/check_options.tpl"}
</td></tr>
{/if}

{foreach from=$product_options item=v}
{if $v.options ne '' || $v.is_modifier eq 'T'}
<tr>
<td valign="middle" height="25">{if $usertype eq "A"}{$v.class}{else}{$v.classtext|default:$v.class }{/if}</td>
<td valign="middle">
{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|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}
*}

<option>Please Select Your {$v.classtext|default:$v.class}...{if $o.selected eq 'Y'} selected="selected"{/if}</option>
{foreach from=$v.options item=o}
<option value="{$o.optionid}">{$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}
</td>
</tr>
{/if}
{/foreach}
{/if}


{if $product_options_ex ne ""}
<tr>
<td colspan="2"><font id="exception_msg" color="red"></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}<br />{/foreach}<br /></td>
</tr>
{/foreach}
{/if}
{/if}
----------------------------------------------------------------------------------------------------------------------------

Re: Javascript Validation for Product Options
 

looks correct. should work.

Re: Javascript Validation for Product Options
 

Hmmm.....I'm running version 4.1.9. Not sure if that would make a difference. Have you tried this on version 4.1.9 yet? Maybe I should test it on a 4.1.8 installation and see.

Thanks
-Tuan

Re: Javascript Validation for Product Options
 

yes. works fine. I'll PM you a link to show you on my test server.