X-Cart forums - variations javascript help

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

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

- - variations javascript help (https://forum.x-cart.com/showthread.php?t=33125)

variations javascript help

Hi all,

I've got some product variations happening and I've added the mod that adds the "select <option>" into the
drop-down menu of the product variations. (works great!)
I started with one variation, added the javascript in the product options page and all was well.
Now that I have two variations, I need a bit of help getting the right javascript happening. :?
Here is what I had for one variation that worked:

Code:

var value = product_option_value("men_size");

if (value !== 'XL' && value !== 'L' && value !== 'M' && value !== 'S') {

alert("Please select a size");

return false;

}

Here is what I have for two variations(does not work):

Code:

var value = product_option_value("men_size");

if (value !== 'XL' && value !== 'L' && value !== 'M' && value !== 'S') {

alert("Please select a size");

}

var value2 = product_option_value("colour_001");

if (value !== 'black' && value !== 'off-white') {

alert("Please select a colour");

return false;

}

I've tried a buch of different things with the Javascript for two products.
I nearly had it working once but one of the things wrong was that it was opening an alert for the size,
I'd click ok and immediatly another would open with the colour. I thought if there were going to be
two alerts I'd rather have a script that had three alerts:

1- please choose a size and colour (if neither are selected)
2- please choose a size (if only the colour has been chosen)
3- please choose a colour (if only the size has been chosen)

-hroth

Re: variations javascript help

Quote:

Originally Posted by hrothbeorht

the reason you get one alert after another is because of your "if" statement...you have 2 "if" statements, but seems what you want is a "if,elseif" statement,

ie:

if (neither selected) alert (both not selected)
elseif (color selected) alert (size not selected)
elseif (size selected) alert (color not selected)
else (submit)

also, if you dont use color-size combo validations, then you can just change the if statement to check if the index is 0 or if the value contains "select" instead of checking against all the sizes and colors

Re: variations javascript help

thanks inebriate.. I've tried what I can of your suggestions. I have not been able to try it fully becaue I'm not a "JavaScript'r"
(I'm much better at actionscript)

I'll expand on what has been modified. I think I might have left out some important info (sorry)
this is from the post:
http://forum.x-cart.com/showpost.php?p=179500&postcount=18
modifying customer_options.tpl
I replaced:

Code:

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

with:

Code:

{if $product.productid ne '9' && $product.productid ne '3' }

<option>Select {$v.classtext|default:$v.class}{if $o.selected eq 'Y'} selected="selected"{/if}</option> {/if}

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

I wish I knew how to take your advice regarding:

Quote:

also, if you dont use color-size combo validations, then you can just change the if statement to check if the index is 0 or if the value contains "select" instead of checking against all the sizes and colors

I don't know how check for what shows as the default value of the drop down menus. When I create the variations, I add only XL, L, M and small
for men_size and black, offwhite for colour_001.

It worked perfectly with one drop down.. I've tried about 50 variation in as many ways as I can to get it to work with two. I really appreciate the help but sadly I just don't get it yet:oops:

my latest rendition (still wrong) looks like this:

Code:

var value = product_option_value("men_size");

var value2 = product_option_value("colour_001");

if ((value !== 'XL' && value !== 'L' && value !== 'M' && value !== 'S') && (value2 !== 'black' && value2 !== 'offwhite')){

alert ("please choose a size and colour");

return false;

}

elseif (value !== 'XL' && value !== 'L' && value !== 'M' && value !== 'S'){

alert ("please choose a size");

return false;

}

else (value2 !== 'black' && value2 !== 'offwhite'){

alert ("please choose a colour");

return false;

}

I changed off-white to offwhite because I thought it might cause a problem.
I tried using elseif and I've tried removing the "return false" in a few places.
I've tried an elseif where you see the else. ..

still trying.. still experimenting.. but still in need of help~!

when I view the source of the page I see this where the drop down menus are:

Code:

<tr>

 <td valign="middle" height="25">size</td>

 <td valign="middle">

<select id="po462" name="product_options[462]" onchange="javascript: check_options();">

<option>Select size</option>     <option value="4187">S</option>

    <option value="4186">M</option>

    <option value="4185">L</option>

    <option value="4184">XL</option>

</select>

 </td>

</tr>

<tr>

 <td valign="middle" height="25">colour</td>

 <td valign="middle">

<select id="po464" name="product_options[464]" onchange="javascript: check_options();">

<option>Select colour</option>     <option value="4190">black</option>

    <option value="4191">offwhite</option>

</select>

 </td>

</tr>

Re: variations javascript help

change it to

Code:

var value = product_option_value("men_size");

var value2 = product_option_value("colour_001");

var val1 = value.toLowerCase().indexOf("select");

var val2 = value2.toLowerCase().indexOf("select");

if (val1 > -1 && val2 > -1){

alert ("please choose a size and colour");

return false;

}

elseif (val1 > -1){

alert ("please choose a size");

return false;

}

elseif (val2 > -1){

alert ("please choose a colour");

return false;

}

else return true;

in the next few days i will be posting up a mod to check if all the options have been selected, i posted the pseduocode to it in that other thread you mentioned

Re: variations javascript help

Hi inebriate,

I tried the script and It did not fly. I might be putting it into the wrong place.. I've been putting it into the bottom field (Validation script)
in the admin - product options page of this product.
Perhaps in need to be in a .js file?

I ran it in firefox just to have the error cosole tell me what it sees.

firefox says:
"missing ; before statement"
elseif (val1 > -1){
---------------------^

it has a link to follow, and here Is the full script as it shows:

Code:

<script type="text/javascript" language="JavaScript 1.2"><!--function FormValidation() {        if(!check_exceptions()) {        alert(exception_msg);        return false;    }        var value = product_option_value("men_size");var value2 = product_option_value("colour_001");var val1 = value.toLowerCase().indexOf("select");var val2 = value2.toLowerCase().indexOf("select");if (val1 > -1 && val2 > -1){alert ("please choose a size and colour");return false;}elseif (val1 > -1){alert ("please choose a size");return false;}elseif (val2 > -1){alert ("please choose a colour");return false;}            if(document.getElementById('product_avail'))        if(document.getElementById('product_avail').value == 0) {            alert("Out of stock");            return false;        }    return true;}--></script>

so I took this and pasted it into an online javascrip validator:
http://www.jslint.com/

It returned this:

Quote:

Error: Implied global: alert, check_exceptions, elseif, exception_msg, product_option_value
Problem at line 15 character 19: Missing semicolon.
elseif (val1 > -1){
Problem at line 16 character 1: Expected to see a statement and instead saw a block.
alert ("please choose a size");
Problem at line 16 character 1: Stopping, unable to continue. (48% scanned).

All I know is that it remains a puzzle.
I hope this information helps!

-hroth

I really appreciate this help!

Re: variations javascript help

I got it working.

I thought I'd share the script I came up with.
This goes in the Validation script window on the bottom of the product options page.

Code:

var value = product_option_value("men_size");

var value2 = product_option_value("colour_001");

var value3 = product_option_value("men_size");

var value4 = product_option_value("colour_001");

if ((value !== 'XL' && value !== 'L' && value !== 'M' && value !== 'S') && (value2 !== 'black' && value2 !== 'offwhite')) {

alert("Please select the size and colour");

return false;

}

if (value3 !== 'XL' && value3 !== 'L' && value3 !== 'M' && value3 !== 'S') {

alert("Please select a size");

return false;

}

if (value4 !== 'black' && value4 !== 'offwhite') {

alert("Please select a colour");

return false;

}

works nice now - WOO!!
far from the ideal solution but hey.. it's doing what I needed it to!

-hroth