Change SelectBox Option Behavior?

I would like to add ‘Select Option’ as the default variant for all selectbox options in 2.0.12. This will force customers to use the dropdown menu and make a selection. Too many customers are just leaving the default first option and not realizing they missed an option.



I did this in 1.3.5 SP4, but I can not figure it out for the 2.0.x cart.



Any help would be appreciated on how to add an invalid option variant of ‘Select Option’ to all selectbox options. I am probably going about it in the wrong way.



Thanks,



David

Anyone have any suggestions or insights?

OK. Stepping a way from this for a few weeks and coming back has helped. I think I got it working.



In product_options.tpl change

```php

{if $po.option_type == “S”} {Selectbox}








{foreach from=$po.variants item=“vr” name=vars }

{$vr.variant_name} {if $show_modifiers}{hook name="products:options_modifiers"}{if $vr.modifier|floatval}({include file="common_templates/modifier.tpl" mod_type=$vr.modifier_type mod_value=$vr.modifier display_sign=true}){/if}{/hook}{/if} {/foreach}
}
{/foreach}
[COLOR="Red"]
{*Begin Mod*}

{if $details_page}
Select Option
{/if}
{*END Mod*}
[/COLOR]



```

Note: you have the put the 'select option' at the end of the list so that it doesn't imapct the order of the options once in the cart.

In product_data.tpl change

```php

{if $show_list_buttons}
<{if $separate_buttons}div class="buttons-container"{else}span{/if} id="cart_buttons_block_{$obj_id}">
{hook name="products:buy_now"}
{if $product.feature_comparison == "Y"}
{if $separate_buttons}

{/if}
{include file="buttons/add_to_compare_list.tpl" product_id=$product.product_id}
{/if}
{/hook}

{/if}
{/hook}
[COLOR="Red"] {*DAVID MOD*}
{if $details_page && $product.has_options}

Select Required Options

{/if}
{*END DAVID MOD*}[/COLOR]

{/capture}

```

In exceptions.js chnage

```php
if (pr_o[id][i]['type'] == 'S') {
pr_o[id][i]['selected_value'] = document.getElementById(pr_o[id][i]['id']).value;

[COLOR="Red"]//David Mod

var padd = $('#cart_buttons_block_' + id); // add to cart button
var spadd = $('#cart_add_block_' + id);
var spadd_select_options = $('#cart_add_block_select_options_' + id);

var INVALID=pr_o[id][i]['selected_value'];

if (INVALID == 'invalid'){

var GO = 0;
padd.hide();
spadd.hide();
spadd_select_options.show();

}
else
{
if ( GO != 0) {
padd.show();
spadd.show();
spadd_select_options.hide();

}
}
//END MOD[/COLOR]

} else if (pr_o[id][i]['type'] == 'C') {

```


Now the Add to Cart Button is hidden until they choose all valid dropdown options.

Sample page this is working on is [url]http://www.kilts-n-stuff.com/highland-footwear/boots/boots-side-lace.html[/url]

Note: I also modified the code to display the inventory option amount when it is selected.

Enjoy,

David

2020 February 19, 2010, 12:00am 4

Thanks for the mod! I posted a related feature request in the bug tracker regarding product options and it looks like that has been added to the roadmap:

[QUOTE]# Product options improvement: consequential exceptions, required options[/QUOTE]

Hopefully, that will provide similar functionality to your mod.

Glen

struck February 20, 2010, 12:00am 5

Very nice work Triplets!



Anyone selling products of which it is critical that the correct options are selected will appreciate this.



Can save alot of grief & wasted time!

page February 20, 2010, 12:00am 6

I think this is what I am doing in a different non modded way - which I discovered by accident just the other day.



Set to track stock with variants with the “select option” as the first one.



Build or rebuild the variants.



Then delete the “select option” variant.



Done.



Appears on the list but cannot be added to the cart.



It also does not say out of stock!

triplets February 20, 2010, 12:00am 7

Page,



I saw your post the other day when I was working on the mod. But we already had thousands of options in our database and my mod accomplishes this for all options in one stroke. If I only had a few options, your approach seems reasonable, Anyway, I hope this feature gets added to cs-cart by default.

jerryrider February 22, 2010, 12:00am 8

Triplets,



I had the same issue and your solution looks great. I’m actually in the process of having the CS team develop an ‘additional options’ modification and part of the mod is exactly what you’re doing here - adding the ‘Please Select’ as the first default option for Drop-Down menus.



I’ll have to check and make sure that the Add to Cart button won’t become active until all options are selected - thanks for making that salient - I had totally forgotten about the problems that could arise without it!



Cheers,



J

roginator February 23, 2010, 12:00am 9

yeah, i could really do with this too. great work but i’m not so keen on the add to cart button only appearing when the options have been selected. i would prefer a message that appears saying “please select a size” (or whatever). i’m surprised that this isn’t already built into CS-Cart seeing as it’s been around for so long.

johnbol1 February 23, 2010, 12:00am 10

Yeah,

we had same problem too but only just did a quick work round on our csv inport file bay adding please select as one of the options, Size: S[ Please choose, Small Med,Lge,]; Colour: S[Please choose, Red,Green,Blah,Blah,].

I pinted out that customers could still add these “please choose” options to the basket and to which one of my colleagues said that isnt such a bad thing as at least they have purchased and just need a call or email for the size and colour.



I think triplets mod is the best way to go but just sharing our own discussion for the other novices.







John

interfacefactory February 24, 2010, 12:00am 11

Nice mod, thanks! Works best when category view is limited to “grid”. The mod doesn’t work in “list” view.

triplets February 24, 2010, 12:00am 12

It was only designed for the Grid View. But you can make the exact same mod changes in the list template. I suspect it is the {if $details_page} line that would need to be modified to include the list page.

interfacefactory February 24, 2010, 12:00am 13

Thanks for the update…I prefer the grid view, so it’s working great as intended.

grabbags February 25, 2010, 12:00am 14

Great, mod! Thanks for sharing.

idg June 24, 2010, 12:00am 15

I can’t get the availability message to be hidden on the initial page load when both options are set to select. I did have CS cart make some modifications to exceptions.js a few weeks ago so perhaps that is why its not working. Any idea how I can get the availability message hidden using the Amount in Stock and Exceptions code pieces from exceptions.js? Thanks in advance.

// ***************************************** A M O U N T I N S T O C K **********************************/
//
// Changes amount in stock if product inventory is in track with options
//
function fn_change_amount(id)
{
var key = '';
var pqty = $('#qty_' + id); // input with qty
var pstock = $('#qty_in_stock_' + id); // qty in stock line
var istock = $('#in_stock_info_' + id); // "in stock" text
var padd = $('#cart_buttons_block_' + id); // add to cart button
var bis = $('#bis_' + id); // back in stock button
var spadd = $('#cart_add_block_' + id);
var badd = $('#bulk_addition_' + id); // bulk add to cart checkbox

key = fn_get_option_combination_key(id, '_');

if (typeof(pr_a[id][key]) != 'undefined') {
if (pr_a[id][key]['amount']) {
if (pr_a[id][key]['amount'] > 0) {
pstock.show();
pstock.html(pr_a[id][key]['amount'] + ' ' + lang.items);
istock.show().addClass('in-stock').removeClass('out-of-stock').html(lang.in_stock);
pqty.show();
//padd.show();
bis.hide();
spadd.show();
badd.attr('disabled', false);
} else {
if (allow_negative_amount) {
pstock.hide();
istock.hide();
pqty.show();
//padd.show();
bis.hide();
spadd.show();
badd.attr('disabled', false);
} else {
pstock.html('' + lang.text_out_of_stock + '');
istock.addClass('out-of-stock').removeClass('in-stock').html(lang.text_out_of_stock);
pqty.hide();
//padd.hide();
bis.show();
spadd.hide();
badd.attr('disabled', true);
}
}
return true;
}
}

for (var i in pr_a[id]) {
pstock.html('' + lang.text_out_of_stock + '');
pqty.hide();
padd.hide();
bis.hide();
spadd.hide();
badd.attr('disabled', true);
break;
}

return true;
}


// ************************************************** E X C E P T I O N S ****************************************/
//
// Check all selected options variants in exceptions
//
function fn_check_exceptions(id)
{
var m = 0; n = 0; k = 0; index = 0;
if (typeof(pr_o[id]) == 'undefined') {
return true;
}

// Define Selected values for each option
for (i in pr_o[id]) {
if (!document.getElementById(pr_o[id][i]['id'])) {
continue;
}
if (pr_o[id][i]['type'] == 'S') {
pr_o[id][i]['selected_value'] = document.getElementById(pr_o[id][i]['id']).value;

} else if (pr_o[id][i]['type'] == 'C') {
if (document.getElementById(pr_o[id][i]['id']).checked) {
pr_o[id][i]['selected_value'] = document.getElementById(pr_o[id][i]['id']).value;

} else {
pr_o[id][i]['selected_value'] = document.getElementById('unchecked_' + pr_o[id][i]['id']).value;
}
} else if (pr_o[id][i]['type'] == 'R'){
for (var k = 0; k < document.getElementById(pr_o[id][i]['id']).getElementsByTagName("INPUT").length; k++) {
if (document.getElementById(pr_o[id][i]['id']).getElementsByTagName("INPUT")[k].checked == true) {
pr_o[id][i]['selected_value'] = document.getElementById(pr_o[id][i]['id']).getElementsByTagName("INPUT")[k].value;
}
}
}
}


idg June 25, 2010, 12:00am 16

Anyone? I tried various different placements within the js code and the availability message still shows. I’d appreciate if someone who has knowledge can take a look at this and figure out where I need to place the code that will hide the availability message.

vanderex August 26, 2010, 12:00am 17

this is broken in 2.1 i think the function is not in the file no more… any fix ?

vanderex September 1, 2010, 12:00am 18

the function is now in product_options.tpl but has changed alot…

any idea ? on 2.1

interfacefactory January 25, 2011, 12:00am 19

We’ve noticed with Triplets mod that users can order out-of-stock items by changing options when viewing the cart. (v2.0.12 for now)



If “red” is out of stock, users can choose “blue”, add to cart, then select “red” in the view cart screen.



Anyone know a way to disable product options in the view cart screen?

dezigner February 14, 2011, 12:00am 20

[quote name=‘vanderex’]the function is now in product_options.tpl but has changed alot…

any idea ? on 2.1[/QUOTE]



I’m using 2.1.3 but it confusing to make enable this option for me… anyone knows hot to make “please select” apear first in dorp down?