Grid based layout on Magento product view page.

Recently I got requirement to display product options in grid based layout on product view page for Magento. See the the image above. So the user can select particular combination from the available option. So I have started R & D on it and come up with solution that I will do it through JavaScript. Because here products were configurable products. So when product view page gets loaded, you have a JSON object with all the product options. It has all the things you want like product options,price of particular option, how many products available in options. Options may be dependent on each other like if size depends on color. This dependency is also mentioned in JSON object.

So I have used that JSON object to build this grid based layout. What you have to do is when your JSON object gets loaded, you can write JavaScript code to insert controls at runtime. In case of configurable products you have to write this code inside /product/view/type/options/configurable.phtml file. While in case of normal product where you have custom options , this code will be in options.phtml.

This is just the grid based layout on top of drop downs on product view page.Product option drop downs are hidden. When you select particular option from grid layout, the corresponding options in drop downs gets selected. So when user add product to basket product with particular options gets added in to basket.

I can not mention complete code over here.But this is the technique to design any required layout on product view page. If you need further help in this you can contact me.