Discussions

Theming: changing the look of the product select list in a product display

Another theming question for the board. I searched this and can't find anything quite like my question.

When you create a product_display node based on a few of your products, it generates a select list for each product. What I want to do is create a grid like the sizing choices (S, M, L, etc) you see on this page. I prefer that to a drop down select list.

How might someone convert that AJAX-ified select list it gives you into an AJAX-ified unordered list? I could probably even get by if I could change the select list into radio buttons, but I don't see that as an option either.

Here are some more details:
I got pretty far on this myself. I didn't think you can make a select list do that, and I didn't think you can turn a select list into an unordered list. So I played with a little javascript from somewhere else that will take each option in the select list and create a new unordered list with it. When you click Add to Cart it submits your choice from the select list (no surprise there). So then I made the select list update appropriately each time you click on the unordered list. But it still doesn't submit the proper product when you click Add to Cart. The reason is, when you select something in the select list, it does something with AJAX, but when my program updates the select list it does not.

Other theme posts like mine:
http://www.drupalcommerce.org/node/706
http://www.drupalcommerce.org/node/2571
http://www.drupalcommerce.org/node/566

Posted: Feb 15, 2012

Comments

ursula00 on February 8, 2013

I too have the same issue and would like to render my sizes as per your link and show all sizes and have the ability to show which sizes are not available. Did you manage to implement this in the end?