Product option text colour

[nanodac]

Hi everyone,

I am currently sorting out another of our companies websites wherein we have a large proportion of producsts which are ex-stock, with the rest being on a 3 week lead time.

For example, 'Product A' is available in 'high voltage' and 'low voltage' versions. I have created one product page for 'Product A', with a drop down menu to select the desired voltage option.

In this scenario say 'high voltage' is ex-stock, and 'low voltage' is on a 3 week lead time. Is there any way that I can change the colour of the items on a 3 week lead time within the dropdown menu? I've have tried adding a few different HTML codes but to no avail.

Thanks in advance for any help received!

[NormanRouxel]

Go to Design / Library / Variables, right-click Choices and create a variable called NonStockItem of type True/False, default false, place of setting Choice.

See attached image for details.

Go to Design / Library / Layouts / Choices and edit layout Drop Down Choice and replace the code:

<option value="<Actinic:Variable Name="ChoiceSelectedValue"/>"><Actinic:Variable Name="ChoiceDisplayLabel"/></option>

to

<option value="<Actinic:Variable Name="ChoiceSelectedValue"/>" <actinic:block if="%3cactinic%3avariable%20name%3d%22NonStockItem%22%20%2f%3e">style="background-color:red"</actinic:block>><Actinic:Variable Name="ChoiceDisplayLabel"/></option>

Now your choices will have a setting under Properties called NonStockItem that you can set to true to display them in red in the choice list.

You may want to change the inline style above to use a class name (if you know CSS).

If your first entry in the drop-down list might be an out of stock item then you will have a problem because browsers highlight the selected choice and that highlight will override the background colour. In these cases you may have to consider making a dummy first entry "Select voltage" to overcome this. Or re-arrange your Choices so that a non-stock item never comes first.

[NormanRouxel]

It may be better using radio buttons for the choices as you won't have the first item being obscured problem.

If so create the variable as above.

Then go to Design / Library / Layouts / Choices / Radio Button Choice and replace the line:

<actinic:variable name="ChoiceLayout" value="Radio Button Choice" />

with

<actinic:block if="%3cactinic%3avariable%20name%3d%22NonStockItem%22%20%2f%3e"><span style="color:red"></actinic:block><Actinic:Variable Name="ChoiceDisplayLabel"/><actinic:block if="%3cactinic%3avariable%20name%3d%22NonStockItem%22%20%2f%3e"></span></actinic:block>

[nanodac]

Thanks very much for that Norman, it worked a treat!

[NormanRouxel]

If using drop-downs, best check in all browsers (IE, Firefox, Safari, Chrome, Opera) as drop-downs are somewhat unpredicatable.

[nanodac]

I'm opting for the radio buttons anyway I think to avoid problem of the first item being obscured.

Thanks again.

[nanodac]

Hi again,

One little problem.

I have decided to go with the radio button options, however the only way I can get the clickable radio buttons to appear next to the option name is by ticking the 'include prices' box. However, with this selected, the font no longer appears as a different colour.

Just to clarify I'm using v10 Business Edition

[NormanRouxel]

You'll have to fix whatever radio button layout you've chosen yourself.

Use the Design tab to view your product. Click one of the Radio Buttons in the Preview window to get at the underlying layout. Make a similar change as posted in #3 above to the code.

[nanodac]

Cheers Norman, worked a treat!