Dependent Attributes

[gjh42]

This sounds like you want what is called "dependent attributes", which is not supported in standard Zen Cart or any other general purpose cart system.

If you want one feature to appear only after another has been chosen, you will need to do some fancy custom javascript coding. There will be no template available for it in any form.

[wolf111]

i dont find any mod about dependent attributes, i guess that i need to high sb to do this for me, what do i get a dependent attributes mod?

[gjh42]

If you want to hire someone for this, either use oDesk, or contact one of the professionals who post regularly in the forum. You can tell something about their competency from the answers they give here.

[wolf111]

i give 2 choices to the customers: A Normal card, or B Card with their own text,
if they choose A, they get a drop down attributes, if they choose B, they get some text and drop down attributes.

A. Normal card
- drop down (blue card/white card/ pink card)

B. Card with your own text
- text of first line (text required)
- text of second line (text option)
- text color (drop down)
- background color (drop down)
- font (radio)
...

do you think it difficult ? in what price range ?
is there a professional username list i could contact from zencart forum?

[gjh42]

There is no list available. Just look through the forum at posters who give good advice about topics similar to yours; professionals will generally have a link to their site in their signature.

You would need some javascript for this kind of testing.

[mypctechs]

Hey Wolf111, I am in the same boat as you right now. I have a drop-down with 5 items and, when one is selected, I need to modify the contents of a group of checkboxes.

After searching the internet I found one reference to 'this feature coming soon in a future version of Zen-Cart', could that be version 2.0?

Anyways - This looks like something I will need to custom code for my client. If I find out anything useful along the way I will let you know.

[mypctechs]

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 ...


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!

[gjh42]

Thanks for posting this! It should be a big help for those who are barely js-literate but understand code (like me:). I can see using this to improve the functionality of some of my stone-set jewelry pieces.

[quick1]

this js is nice, but there's one issue,

if you select one option from the dropdown attrib-1, it works correct
if you add the product to cart, then click the product link from the cart and back to the product page, it shows all hidden options, only after you select the attrib-1 dropdown option again, those options would be hidden according to the js code

any ideas to fix this issue?

[enjoiracin]

I was wondering if there is any way to do the following:

Say I have a product that is available as a single item and also is available to choose as a combination.
So a customer would choose either if they would like the single item (Priced $10.00) or if they want to make it a combo (Priced $20.00).
If they select the single item they can just go ahead and add the item to the cart.
If they select the combo option the customer then chooses from what other item they want (from a drop down window) with their product to make it the combo.
After selecting the product combination they can then add it to the cart.

I know this is a bit confusing and complicated but I was really hoping there is some way this can be done.

I tried to search for something like this but had no luck...