Home » Forums » Ubercart » Support
4 replies [Last post]
Thu, 12/17/2009 - 00:41
jacobson
jacobson's picture
Offline
Joined: 05/28/2009
Juice: 13
Was this information Helpful?

I have a new Ubercart implementation where I need to make one attribute checkbox visible / invisible depending on the selection a customer makes in an attribute select box. By default the checkbox would be invisible and become visible if a certain option in the select box is chosen and become invisible again if that option is unchosen. I cannot find any Ubercart module to do this, but am I missing just not finding it?

If there is no such module, can this be done with Javascript? I think the Javascript would be pretty easy (though I have no skill in JS), but I cannot figure out how to get the JS to be called by the Select Box OnChange event since the Select Box is generated by UC code.

Thanks.

Top
Thu, 12/17/2009 - 15:01
#1 View page
jrowny
jrowny's picture
Offline
Joined: 01/08/2009
Juice: 297
Re: Make Attribute Visible Based on Another Attribute

You can use jQuery to do this relatively easy. jQuery is probably already loaded by Drupal but you can enforce it to be loaded by adding a file called "script.js" in your theme.

I think the jQuery will look something like:

$('.attribute-2').hide();                               

$('.attribute-1 select').change(function(){           
    if($('.attribute-1 select').val() == "monkey"){      
      $('.attribute-2').show();                         
    }else{                                               
      $('.attribute-1').hide();                          
      $('.attribute-2 input').attr('checked',false);    
    }
});

Pretty easy huh?

Top
Thu, 12/17/2009 - 15:44
#2 View page
jacobson
jacobson's picture
Offline
Joined: 05/28/2009
Juice: 13
Thanks Much

Wow. That does look easy. 'attribute-1' and 'attribute-2' are just the ids of those form elements, and the jQuery script just goes into my page.tpl file in a < script > tag?

Top
Thu, 12/17/2009 - 17:05
#3 View page
jrowny
jrowny's picture
Offline
Joined: 01/08/2009
Juice: 297
Re: Thanks Much

I would put it in node-product.tpl.php or even in the description of the product if it only applies to that one product. Just set the filter for full HTML. This obviously won't work if your client uses it or someone who does not know what's going on.

Yes, I'm not sure exactly the structure of attributes but in my Acquia Prosper theme, it's layed out like that with divs and class attribute-x where x is the ID of the attribute

Take a look at your source. jQuery selectors work exactly like CSS selectors. A "dot" referes to a class and a "pound" refers to an id.

$('#someDiv').hide(); hides a div with id="someDiv"
$('.someDiv').hide(); hides a div with class="someDiv"
$('.someDiv select').hide() hides a select inside of a div with class="someDiv"

Make sense?

jQuery makes javascript fun!

Top
Thu, 12/17/2009 - 17:23
#4 View page
jacobson
jacobson's picture
Offline
Joined: 05/28/2009
Juice: 13
Fantastic

Thank you very much.

Top