Option of 'An Option' / Conditional Choice

[davidwills]

How can you create an option caveat to another option being selected i.e. a sub-menu choice which is only viewable if the customer selects it?

Example:

Want a gift box?
What colour?

The problem is that we offer some items for vending machines, a customer can buy the product with options of vending pack size and either we or they can re-pack that. At the moment you could in theory select the re-packing service without buying a secondary carton to have it repack into.

[ElegantWeddings]

There are several threads on this forum talking about this subject, it is called "daisy chain"
Do a search for those words, you will see.

[ScribeTime]

This is something that I've been working on this week and really need on my site as well. I'm definitely not experienced in working with javascript, but I did find some code after doing a search on "show hide divs javscript" (or something similar).

What I found was information on how to combine javascript, divs, and CSS to show or hide something on a page. Unfortunately, I have not been able to get it to work on my site although I've tried a few snippets of javascript code.

If I can get something working soon, I'll post how I accomplished this.

[davidwills]

This is something that I've been working on this week and really need on my site as well. I'm definitely not experienced in working with javascript, but I did find some code after doing a search on "show hide divs javscript" (or something similar).

What I found was information on how to combine javascript, divs, and CSS to show or hide something on a page. Unfortunately, I have not been able to get it to work on my site although I've tried a few snippets of javascript code.

If I can get something working soon, I'll post how I accomplished this.

Thanks... :)

[ScribeTime]

Although I haven't worked through this enough to figure out a true solution for displaying daisy chain options, I was able to hide the options (the entire group) on my site using Jquery and show them only if a customer clicks a button stating "Click here to personalize...". (I'm definitely not a programmer, but found various snippets of code online and was able to get a basic solution to work). Unfortunately I lost the original site that I found the script on so that I could give credit where credit is due.

To do this...

Step 1 - I saved a copy of my existing listing template in case something went wrong (which many times before this one it did).

Step 2 - I then copied the script below right before the opening <form> tag within my listing template:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#divOptionsBlock').hide();
$('a#button').click(function () {
$('#divOptionsBlock').toggle(400);
});
});
</script>

Step 3 - Next I created a new row in the listing template right before this block of code: <!--START: PRODUCT_OPTIONS_BLOCK-->

The code for the new row is:
<tr>
<td><a id="button" href="#"><img src="assets/templates/[template]/images/personalize_but.jpg" border="0"></a></td>
</tr>

Note that the id named, "button" in this row corresponds to the click function code shown in the script above:
$('a#button').click(function () {

You would replace the 'a#button' with 'a#youridname'

If you didn't want to use a button and instead wanted something like the words, "Click here to personalize" - you could just replace the <img src="assets.... code above with the words that you want to display and that would also be what your customer clicks on to show whatever options you want them to see.

The "divOptionsBlock" id name (in the script) is the 3dcart given name of the Product Options block.

I think that this is it. Hopefully I haven't forgotten something. I'm sure that if you wanted to have a radio button or something other than an image or text, the script could be adjusted to make this happen.

[jfirestone]

This would be fantastic if there was a way to get it to see the options that are displaying on the page.