2 options for a product and each option has multiple attribute labels

[stucoleman]

Hi,

I've been searching but can't seem to find anything relating to what I'm trying to achieve.

Essentially what I'm trying to do is allow the user to select from two or more options and each option will have a series of labels with a radio button at the end, similar to http://www.perfumeempire.com.au/depa...&labelid=21254 (this is not my site and it isn't using Zencart, but I want to lay it out the same in my Zencart)

So I would have 'Product', 'RRP', 'You Save', 'Price' and depending on which final checkbox they chose it would be a different price.

I've looked into the 'Product Attribute Grid' mod but I can't work out how to do it and not sure if you can with that.

I hope that makes sense. Any help would be greatly appreciated as I've been going crazy over the last couple days trying to do it!!

Thanks,
Stu

[kobra]

That will require a good bit of custom coding to acheive that result

You might first determine how important this is to you and then get some estimates on the cost to have the code written and then you can decide

[stucoleman]

Thanks for the quick response!

I actually did work out another way to do this using js. It was a few hours mucking around, but for anyone trying to do a similar thing I did the following:

1. make the attribute labels all be radio buttons
2. Use CSS to hide the radio buttons of the attributes you just want to be labels, leave one attribute displaying its radio buttons for the user to select from
3. onsubmit of the form call a js function that checks which radio button was selected and the change its corresponding hidden radio buttons to be selected as well.

 <script language="JavaScript">
<!--

function selectAttributes()
{
var j = 0;

var aryClassElementsPrice = getElementsByClassName( 'class4', document.body );
var aryClassElementsSize = getElementsByClassName( 'class5', document.body );
var aryClassElementsName = getElementsByClassName( 'class2', document.body );

	for(i=0; i<aryClassElementsPrice.length; i++)
            {
                        if(aryClassElementsPrice[i].checked==true)
                        {
									aryClassElementsSize[i].checked = true;
									aryClassElementsName[i].checked = true;
									j++;
                        }
						
      		}
			if(j == 0)
			{
				alert("Please select a size");
			}
			else
			{
				document.cart_quantity.submit();
			}
			       
}

function getElementsByClassName( strClassName, obj ) {
    var ar = arguments[2] || new Array();
    var re = new RegExp("\\b" + strClassName + "\\b", "g");

    if ( re.test(obj.className) ) {
        ar.push( obj );
    }
    for ( var i = 0; i < obj.childNodes.length; i++ )
        getElementsByClassName( strClassName, obj.childNodes[i], ar );
    
    return ar;
}

//-->
</script>