SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    HTML Code:
    <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:
    HTML Code:
    <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

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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/je...nkelwagen.html
    http://stommepoes.nl/Jeansselling/je...kelwagen4.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?
    Code:
    	<h3>Product 2 - set</h3>
    		<span class="amount"><label for="amount_productID" class="ac">Amount: </label><input type="text" id="amount_productID" name="amount" /></span>
    		<span class="cost"><span class="ac">price:</span> $100</span>
    		<span class="discount"><span class="ac">discount:</span> 20%</span>
    		<span class="final-cost"><span class="ac">total:</span> $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 :(
    http://www.3needs.org/en/testing/cod...mark-up-1.html
    http://www.3needs.org/en/testing/cod...mark-up-2.html

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •