Wolf111, I've decided to write up a quick solution (in my case) to handle this issue. My scenario involves a drop down box which, when different elements have been selected, will show or hide checkboxes from another attributes group.
This is by no means meant to be a solution that will work for everyone, but it should help you with direction on creating similar functionality for your store. Honestly my solution is very basic at this point, but works for ME. If you can setup your main attribute as a drop down box, then use checkboxes for the sub-attributes, and those checkboxes are not using images this will work :shocking:...
STEP #1:
includes/modules/attributes.php contains code to draw checkboxes. There are 3 blocks of code that I needed to modify under case '0':, case '1':, and case '2': The first thing to do is wrap a DIV around each checkbox so I can later find them with JavaScript. The base code for case 0 is similar to this:
$tmp_checkbox .= zen_draw_checkbox_field('id[' . $products_options_names->fields['products_options_id'] . ']['.$products_options_value_id.']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<label class="attribsCheckbox" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options_details . '</label><br />' . "\n";
Wrap a DIV around case0, case1, and case2. Also put an ID to the DIV and get rid of the unnecessary BR like this:
$tmp_checkbox .= '<div id="div-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . zen_draw_checkbox_field('id[' . $products_options_names->fields['products_options_id'] . ']['.$products_options_value_id.']', $products_options_value_id, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '"') . '<label class="attribsCheckbox" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '-' . $products_options_value_id . '">' . $products_options_details . '</label></div>' . "\n";
STEP 2:
The next thing you'll need to do is drop a javascript code hook into your drop-down box. attributes.php draws the drop downs, and the code looks something like this:
$options_menu[] = zen_draw_pull_down_menu('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_array, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '"') . "\n";
You want to change that code to insert JavaScript that calls a function whenever the drop down changes. We use the onchange event.
$options_menu[] = zen_draw_pull_down_menu('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_array, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '" onchange="setOptions(\'attrib-' . $products_options_names->fields['products_options_id'] . '\');"') . "\n";
STEP 3:
Now you'll need to drop a JavaScript script into the header of your site. This checks to see if the drop-down box ID matches the ID of your actionable drop-down, and if it does goes about hiding the DIVS you've selected. In my case, I already know that the ID of the drop-down is attrib-1. So, the base JavaScript in the head of the site looks something like this...
<script type="text/javascript">
function setOptions(chosen) {
if (chosen == "attrib-1") {
alert('yes');
}
}
</script>
STEP 4:
Test! If it works, you'll get a pop up box when you change the drop-down box. You shouldn't get a pop up box anywhere else than the drop down that you want to use to hide the checkboxes.
STEP 5:
Now you'll need to write your JavaScript. I can't provide a good example for your site since it depends on the attrib-# ID of your drop-down box and also depends on the div-# ID of your checkboxes. I'll give you an example of what my new JavaScript header code looks like for my site.
<script type="text/javascript">
function setOptions(chosen) {
if (chosen == "attrib-1") {
var index = document.getElementById("attrib-1").selectedIndex;
if (document.getElementById("attrib-1").options[index].text == 'Red') {
document.getElementById('div-9-59').style.display = "none";
document.getElementById('div-9-60').style.display = "none";
document.getElementById('div-9-61').style.display = "none";
document.getElementById('div-9-62').style.display = "none";
document.getElementById('div-9-55').style.display = "block";
document.getElementById('div-9-56').style.display = "block";
document.getElementById('div-9-57').style.display = "block";
document.getElementById('div-9-58').style.display = "block";
}
else {
document.getElementById('div-9-55').style.display = "none";
document.getElementById('div-9-56').style.display = "none";
document.getElementById('div-9-57').style.display = "none";
document.getElementById('div-9-58').style.display = "none";
document.getElementById('div-9-59').style.display = "block";
document.getElementById('div-9-60').style.display = "block";
document.getElementById('div-9-61').style.display = "block";
document.getElementById('div-9-62').style.display = "block";
}
}
}
</script>
This should get you started.. Let me know if you need any help!
