Products in shopping cart - list vs table

Hi

What element should be used to describe product list in shopping cart?
It seems obvious that list should be coded with list element but I can see that in most cases table element is used for this purpose in e-commerce projects.
Shopping cart usually contains list of products with many additional data like amount of product (in a form of input where one can increase the amount of one product) costs, taxes, discounts… and below total cost of all products.
It looks like tabular data that’s probably why table approach is often prefered.

Let me describe my case: I have to create such a list that might contain single product, product that has i.e. extended warranty period (that is treated as a single product attached to the main product), product that contains other products (set of products, bundle). I find it difficult to decide which approach should I use to create correct markup that could describe this kind of content in the right way.

List seems easier for styling but not for describing content. However, nested list for products that are attached to main product seems like a good solution:


<ul>
	<li>
		Product 1
		<span class="amount"><input type="text" name="amount" /></span>
		<span class="cost">$100</span>
		<span class="discount">20%</span>
		<span class="final-cost">$80</span>
		<span class="del"><a href="#">delete</a></span>
	</li>
	<li>
		Product 2 - set
		<span class="amount"><input type="text" name="amount" /></span>
		<span class="cost">$100</span>
		<span class="discount">20%</span>
		<span class="final-cost">$80</span>
		<span class="del"><a href="#">delete</a></span>
		<ul>
			<li>
				Product 2-1
				<span class="amount"><input type="text" name="amount" /></span>
				<span class="cost">$100</span>
				<span class="discount">20%</span>
				<span class="final-cost">$80</span>
				<span class="del"><a href="#">delete</a></span>
			</li>
			<li>
				Product 2-2
				<span class="amount"><input type="text" name="amount" /></span>
				<span class="cost">$100</span>
				<span class="discount">20%</span>
				<span class="final-cost">$80</span>
				<span class="del"><a href="#">delete</a></span>
			</li>
		</ul>
	</li>
</ul>

How about table:


<table>
	<thead>
		<tr>
			<th scope="col">Picture</th>
			<th scope="col">Product name</th>
			<th scope="col">Amount/th>
			<th scope="col">Cost</th>
			<th scope="col">Discount</th>
			<th scope="col">Final cost</th>
			<th scope="col">Options</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><img src="#" alt="" /></td>
			<td>Product 1</td>
			<td><input type="text" name="amount" /></td>
			<td>$100</td>
			<td>20%</td>
			<td>$80</td>
			<td><a href="#">delete</a></td>
		</tr>
		<tr>
			<td><img src="#" alt="" /></td>
			<td>Product 2</td>
			<td><input type="text" name="amount" /></td>
			<td>$100</td>
			<td>20%</td>
			<td>$80</td>
			<td><a href="#">delete</a></td>
		</tr>
		<tr>
			<td><img src="#" alt="" /></td>
			<td>Product 2-1</td>
			<td><input type="text" name="amount" /></td>
			<td>$100</td>
			<td>20%</td>
			<td>$80</td>
			<td><a href="#">delete</a></td>
		</tr>
		<tr>
			<td><img src="#" alt="" /></td>
			<td>Product 2-2</td>
			<td><input type="text" name="amount" /></td>
			<td>$100</td>
			<td>20%</td>
			<td>$80</td>
			<td><a href="#">delete</a></td>
		</tr>
	</tbody>
</table>

However I see one main problem here: all products are describe the same no matter if it’s one single product or set of products attached to main product. I bet screen readers won’t read it correctly.
Styling table is also not a pleasant task i.e. background color, border and border-radius for one row. That would probably mean additional markup for each td to style it like this. UL is easier here.

What do you think about it? I feel I should go with table approach but also feel that it should be better solved than what I proposed above. Can you help with any suggestions

[font=verdana]This is one case where a <table> makes perfect sense … you’re using the structure of the table to pair up the column headings (price etc) with the row headings (product name). If that’s how you want to present it. There may be good reasons for presenting it as a table, allowing customers to compare the different products on offer easily.

On the other hand, if the products don’t comfortably sit together like that, if they aren’t easy to compare, you might find lists an easier way to go. If you do that, have you thought about using <dl> lists and including the labels for each data point?

It’s one of those cases where there is no right answer – it’s what you think will work best for your site.[/font]

My shopping carts were always tables. I think you could do a list, but I would only seriously think of replacing a table with a list in e-commerce if I were focussing on mobile (tables don’t squish, yo).

Some examples: http://stommepoes.nl/Jeansselling/jeansselling2/winkelwagen.html
http://stommepoes.nl/Jeansselling/jeansselling2/winkelwagen4.html (customer info worked best as a definition list, while the product was still in a table).

One extra thing I’d add in today is, if someone were able to update their cart without a page refresh, I’d throw an aria-live region on the total so the new price is announced to screen readers etc.

If you end up going with the list, you may want to:

  • use heading tags
  • have hidden text labelling all those numbers

If it’s just one or two items, not so bad, but turn what’s in your tags into plain text. Can you tell what that all is?


	[b]<h3>[/b]Product 2 - set[b]</h3>[/b]
		<span class="amount">[b]<label for="amount_productID" class="ac">Amount: </label>[/b]<input type="text" [b]id="amount_productID"[/b] name="amount" /></span>
		<span class="cost">[b]<span class="ac">price:</span>[/b] $100</span>
		<span class="discount">[b]<span class="ac">discount:</span>[/b] 20%</span>
		<span class="final-cost">[b]<span class="ac">total:</span>[/b] $80</span>
		<span class="del"><a href="#">remove</a></span>
...

And now that we’ve labelled each number, it’s starting to turn into a definition list for me.

That can be really wordy, but as I said, if there’s more than one product then you need to have at least the option to hear what number goes with what. With a table with proper headings, users should be able to hear them… Detlev Fischer did some test when the table headers got kinda weird though and those tests weren’t promising :frowning:
http://www.3needs.org/en/testing/code/data-table-mark-up-1.html
http://www.3needs.org/en/testing/code/data-table-mark-up-2.html

To be honest I don’t see <dl> as an option here. It’s not a definition of a product or cart or whatever. Price or delete from the cart button doesn’t describe the product, so I am not considering <dl>.

I’m going to use table but the most difficulties I see is with fancy styling.

@Stomme poes: yes. These are a classic examples where table should be used. The problem occurs if you would like to list also subitems that are attached to the product. Additionally tr and td is hard for fancy styling. Let’s say you would like to add border for the row with round corners. I guess images are the only way to solve it or maybe messy divs inside each td.

Anyway, thanks guys for your opinions.

DL gets to have broader use than terms and definitions. Though there are some who like to really stick to that, in general they’re worth considering whenever you have key-value pairs.

Name: Joe
Nationality: Canadian
Job description: bus driver
… etc.

Product: Foolamp
Price: 30,000
Model: 28ueyf4kjuh
Make: Super Extra
Color: Aqua-tan
Bundle: lamp-bundle
etc…

If you’ve got a mockup/idea of the style you’re going for, it’s possible someone’s got some table-css-fu that could work. Or not.