Product Options Conditional Logic


Trying to to create some conditional logic on some global options fields, but am having some difficulty.

Its essentially a SHOW / HIDE conditional logic that only shows a text field if the customer selects yes.

I've removed the product ID from the DOM product options TPL so that the same code can be used globally on the website

So basically when the page loads, #opt_76 is set to hide

When "option_3599" is set to "17022", then #opt_76 is set to show

When "option_3599" is set to "17021", then #opt_76 is set to hide again

$('#opt_76').hide(); // INITIAL SET TO HIDE

$.ceEvent(‘on’, ‘ce.ajaxdone’, function(data) {
// alert(‘Ajax done’);

$(function() {

      if($('#option_3599').val() == '17022')  {
          $('#opt_76').show(); // SET TO YES SHOW

      if($('#option_3599').val() == '17021')  {
          $('#opt_76').hide(); // SET TO NO HIDE



Its seems a global show is kicking in from the Ajax call,

Any ideas on how to get this to work?

Or are there any better solutions to get this to work?



I'm also looking for an option like this. If you choose option x hide option y.

If you do not find ready to use solution, we will be glad to develop it for your store.

Ballpark figure to give us the correct way to execute this piece of jquery? I can do the rest

I suggest you to use hooks in the fn_gather_additional_product_data function since it is called on page load and after each option change