Checkout - Review Code Sample

Here is some example code and CSS to build the Checkout - Review step for the store. This is, of course, an example and you have the flexibility to lay out the page to suit your own design. 

Below is a screenshot of the layout that this code will build.  

HTML:

Below is the HTML / Branch code that would go in the Template field for the Checkout - Billing content template. 

<h1>Checkout</h1>
{if #review.form.errors}
  <ul class="errors">
    {loop items="#review.form.errors" value="error"}
      <li>{#error.message}</li>
    {/loop}
  </ul>
{/if}
<ul id="checkoutsteps">
  <li><a href="{#review.urls.cart}">Shopping Cart</a></li>
  <li><a href="{#review.urls.checkoutShipping}">Shipping Address</a></li>
  <li><a href="{#review.urls.checkoutBilling}">Billing &amp; Payment</a></li>
  <li class="currentstep">Confirmation</li>
  <li class="last">Receipt</li>
</ul>
<p>Please confirm that the information below is correct. Note that <span class="error">your order is not complete</span> until you click the "Submit My Order" button at the bottom of the page</p>
<h2>Products</h2>
<table cellspacing="0" class="shopping-cart">
  <thead>
    <tr class="headings">
      <th class="product">Item</th>
      <th class="price">Price</th>
      <th class="quantity">Quantity</th>
      <th class="price">Total</th>
    </tr>
  </thead>
  <tbody>
    {loop items="#review.cart.products" value="product"}
      <tr>
        <td class="product"><div class="product-img"><a href="{#product.url}">{#product.primaryImages.thumb.tag}</a></div><div class="product-name"><a href="{#product.url}">{#product.productName}</a>
          {loop items="#product.options" value="option"}
            <br />{#option.label}: {#option.value}
          {/loop}
        </td>
        <td class="price">{#product.currentPrice.value}{if #product.pricePerUnit exists && #product.pricePerUnit != "None"} / {#product.pricePerUnit}{/if}</td>
        <td class="quantity">{#product.quantityTotal.withFraction}</td>
        <td class="price">{#product.totalPrice.value}</td>
      </tr>
    {/loop}
    <tr class="totals">
      <td>&nbsp;</td>
      <td class="quantity-span" colspan="2">Subtotal</td>
      <td class="price">{#review.cart.subtotalBeforeDiscounts}</td>
    </tr>
    {if #review.cart.coupons}
      {loop items="#review.cart.coupons" value="coupon"}
        <tr class="totals">
          <td>&nbsp;</td>
          <td class="quantity-span" colspan="2">{#coupon.name}<br />({#coupon.code})</td>
          <td class="price">-{#coupon.savingsValue}</td>
        </tr>
      {/loop}
      <tr class="totals">
        <td>&nbsp;</td>
        <td class="quantity-span" colspan="2">Subtotal</td>
        <td class="price">{#review.cart.subtotal}</td>
      </tr>
    {/if}
    <tr class="totals">
      <td>&nbsp;</td>
      <td class="quantity-span" colspan="2">Shipping</td>
      <td class="price">{#review.cart.shipping.total}</td>
    </tr>
    <tr class="totals">
      <td>&nbsp;</td>
      <td class="quantity-span" colspan="2">Sales Tax</td>
      <td class="price">{#review.cart.taxes.total}</td>
    </tr>
    <tr class="totals">
      <td>&nbsp;</td>
      <td class="quantity-span" colspan="2">Total</td>
      <td class="price">{#review.cart.total}</td>
    </tr>
  </tbody>
</table>
<h2>Shipping Address</h2>
<p>
  <a href="{#review.urls.checkoutShipping}">Edit</a><br />
  {#review.shipping.firstName} {#review.shipping.lastName}<br />
  {#review.shipping.address}<br />
  {#review.shipping.city}, {#review.shipping.state} {#review.shipping.zipCode}<br />
  {#review.shipping.country}<br />
  {#review.shipping.phone}<br />
  {#review.shipping.email}</p>
<h2>Billing Address</h2>
<p>
  <a href="{#review.urls.checkoutBilling}">Edit</a><br />
  {#review.billing.firstName} {#review.billing.lastName}<br />
  {#review.billing.address}<br />
  {#review.billing.city}, {#review.billing.state} {#review.billing.zipCode}<br />
  {#review.billing.country}<br />
  {#review.billing.phone}<br />
  {#review.billing.email}
</p>
<h2>Credit Card</h2>
<p>
  <a href="{#review.urls.checkoutBilling}">Edit</a><br />
  {#review.creditCard.type}<br />
  {#review.creditCard.number}<br />
  {#review.creditCard.expirationMonth}/{#review.creditCard.expirationYear}
</p>
{#review.form.tag.open}
  <p><input type="submit" name="submit" value="Submit My Order" /></p>
{#review.form.tag.close}


CSS:

Ideally this CSS would go in your CSS file, however, you could also put it in the Inline CSS textbox for the content template.

#checkoutsteps {list-style: none; margin: 0; padding: 0;}
#checkoutsteps li {font-size: small; display: inline; color: #aaa; padding: 0 10px; border-right: 1px solid #999;}
#checkoutsteps li.currentstep {color: #000;}
#checkoutsteps li.last {border-right: none;}
.shopping-cart {width: 100%; border-top: 1px solid #C3C3C3; border-right: 1px solid #C3C3C3; clear: both;}
.shopping-cart th {background: #F0F0F0;}
.shopping-cart th, .shopping-cart td {border-bottom: 1px solid #C3C3C3; border-left: 1px solid #C3C3C3; padding: 3px;}
.shopping-cart .link {font-size: 90%; white-space: nowrap;}
.shopping-cart .product {width: 55%}
.shopping-cart .price {width: 5%;}
.shopping-cart .quantity {width: 15%;}
.shopping-cart .quantity input {width: 30px;}
.shopping-cart .price {width: 20%;}
.shopping-cart .product-img {border: 1px solid #ccc; background-color: #e9e9e9; padding: 3px; width: 80px; height: 80px; float: left;}
.shopping-cart .product-img img {max-width:80px;max-height:80px;width:auto;height:auto;}
.shopping-cart .product-name {margin-left: 100px;}
.shopping-cart tr.totals {font-weight: bold;}
.shopping-cart tr.totals a {font-weight: normal;}
.shopping-cart .quantity-span {text-align: right;}