The 2026 Drupal Business Survey is open. Your response will help shape the future of the Drupal business ecosystem.My understanding (please correct me if I'm wrong) is that a final release of Ubercart 2 is around the corner, with some last details getting tidied up before a RC version. Ubercart 3 will be what focuses on an overhaul and more Drupal-savvy means of things like attributes and the catalog display, but we won't see these things for Ubercart 2.
It's difficult (aka. get out yer product tpl file) to do custom styling and ordering for fields, attributes, product information, add to cart, etc. As the poster in this thread mentions (http://www.ubercart.org/forum/support/9763/ordering_product_fields), you have to flip back and forth between CCK's Manage/Display Fields screens and Ubercart's Product Fields settings, and there's some voodoo in the middle with weights between the two that isn't immediately obvious. Since they're not all CCK fields, you also can't control things like label or teaser vs. full node display or group fields together as needed into fieldgroups. And then there's the fun double images or double prices issue :)
But I think we all agree that more CCK/Views integration would be awesome and is Ubercart's destiny. However, what I'm wondering is what is possible in the meantime in Ubercart 2?
Perhaps by adding some helpful classes for targeting like items while theming, we could alleviate some of the pain.
These are some of the things that have come up most for us when theming Ubercart. It's impossible as it stands now to:
- add styling (ie. a border, shading) around both the weight and dimensions
- add styling around product information *and* attributes
- style or group together *just* attributes (without quantity/add to cart), or do things like even/odd styling
-- markup does not identify attributes, with inconsistencies like this (a radio attribute vs a dropdown attribute, with extra markup and closing tags removed for brevity):
<div class="form-item">
<label></label>
<div class="form-radios">
<div id="edit-attributes-2-5-wrapper" class="form-item">
<div id="edit-attributes-2-4-wrapper" class="form-item">
</div>
</div>
<div id="edit-attributes-1-wrapper" class="form-item">
<label for="edit-attributes-1">Size: </label>
<select id="edit-attributes-1" class="form-select" name="attributes[1]">
</div>It would be a huge help in the meantime just to have an "attribute" class added to the outer div of each attribute, even/odd classes on each of these, a "product-info" class on product information fields, a wrapper div around attributes, another wrapper div around attributes + quantity field... any others? I don't think we can rely on anything else being together, since these fields are rearrangeable.
Thoughts?
| Comment | File | Size | Author |
|---|---|---|---|
| #4 | classes_markup.patch | 2.31 KB | Island Usurper |
| #3 | classes_markup.patch | 2.33 KB | Island Usurper |
Comments
Comment #1
savvypatachonica commentedWell put, stephthegeek. This is a feature that is long overdue.
The ability to theme product pages is severely hindered by the current clumsy markup. I have wasted far too much time with tasks as basic as adjusting the spacing between attribute pulldowns and cart buttons.
Giving more direct control over field labels and placement of individual fields (for instance being able to print attributes and cart buttons separately) is also a definite must.
Comment #2
Island Usurper commentedI've thrown together some markup into a patch here, so tell me how much it helps, or if there's more that can be done. I've added wrappers around each attribute element, giving them an even/odd class as well as a wrapper around the whole group. Each of the product info fields now have the "product-info" class in addition to the specific ones they had before.
I didn't make a wrapper around attributes and the quantity field. It sounds like you want to exclude the Add to cart button, which is a little tricky, and I don't know how any additional fields that might be added by other modules should be handled. Technically, attributes should be treated the same way since they are added in through hook_form_alter() to begin with. I think this particular thing should be dealt with in each site's theme.
There's only so much flexibility in the attributes and cart buttons. They all belong in the same form, so they have to stay within the same
<form>element. This is an even worse problem than trying to move node information out of the content region, because if you do put the attributes somewhere else, then the product isn't added to the cart with all of the right information.Comment #3
Island Usurper commentedComment #4
Island Usurper commentedErg. You'd think I'd learn how to use functions before putting them into code.
Comment #5
stephthegeek commentedCool! This is a great step.
I'm not entirely clear on the reason is for "I didn't make a wrapper around attributes and the quantity field."
We're just talking about styling and moving things around here (through CSS, not PHP), so I'm not proposing that we do anything here that would affect or split up the functionality of the add to cart form.
What I'm referring to is something like wanting to:
- put shading behind the entire attributes area
- put a border around just the quantity field and add to cart button
- have attributes and quantity in one column, and float add to cart button beside them
You're saying that additional fields that may be injected here by other modules would make this difficult?
Comment #6
Island Usurper commentedMaybe difficult isn't the right word. I could write the theme function to put a wrapper around every element in the form except for the submit button. It just seems a little too specific for a module's implementation.
For example, I don't know how I would write markup that would let one person put a border around just the quantity field and the add to cart button, and let another person put the attributes and quantity in one column, and float the add to cart button beside them.
If someone writes up some multi-select or hierarchical attributes, or maybe an image upload to customize the product, they can get their own wrapper no problem. But as the maintainer of the whole add to cart form, I can't make the decision whether to put them in a bigger wrapper that includes any other fields or not.
Do they go with the single-select attributes, or the quantity field? Are they all together, with the button separated off, or are they all separate pieces with their own unique styles? Since these are design questions, and will have different answers for each site, I'm going to take the most generic path possible, which is to put semantic wrappers around each individual piece.
Comment #7
stephthegeek commentedOk, point taken. These wrappers around each piece are a huge help :)
Comment #8
Island Usurper commentedGlad to hear it.
Committed.