Checkout - Receipt Code Sample

Here is some example code and CSS to build the Checkout - Receipt 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 Complete - Thank You</h1>
<ul id="checkoutsteps">
  <li>Shopping Cart</li>
  <li>Shipping Address</li>
  <li>Billing &amp; Payment</li>
  <li>Confirmation</li>
  <li class="last currentstep">Receipt</li>
</ul>
<p>Thank you for your order. You will receive an e-mail confirmation shortly and will be contacted again when your order has shipped. Please print this page for your records.</p>
<h2>Products</h2>
<table cellspacing="0" id="cartTbl">
  <thead>
    <tr class="headings">
      <th class="product">Item</td>
      <th class="price">Price</td>
      <th class="quantity">Quantity</td>
      <th class="price">Total</td>
    </tr>
  </thead>
  <tbody>
    {loop items="#receipt.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">{#receipt.cart.subtotalBeforeDiscounts}</td>
  </tr>
  {if #receipt.cart.coupons}
    {loop items="#receipt.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">{#receipt.cart.subtotal}</td>
    </tr>
  {/if}
  <tr class="totals">
    <td>&nbsp;</td>
    <td class="quantity-span" colspan="2">Shipping</td>
    <td class="price">{#receipt.cart.shipping.total}</td>
    </tr>
    <tr class="totals">
      <td>&nbsp;</td>
      <td class="quantity-span" colspan="2">Sales Tax</td>
      <td class="price">{#receipt.cart.taxes.total}</td>
    </tr>
    <tr class="totals">
      <td>&nbsp;</td>
      <td class="quantity-span" colspan="2">Total</td>
      <td class="price">{#receipt.cart.total}</td>
    </tr>
  </tbody>
</table>
<h2>Shipping Address</h2>
<p>
  {#receipt.shipping.firstName} {#receipt.shipping.lastName}<br />
  {#receipt.shipping.address}<br />
  {#receipt.shipping.city}, {#receipt.shipping.state} {#receipt.shipping.zipCode}<br />
  {#receipt.shipping.country}<br />
  {#receipt.shipping.phone}<br />
  {#receipt.shipping.email}
</p>
<h2>Billing Address</h2>
<p>
  {#receipt.billing.firstName} {#receipt.billing.lastName}<br />
  {#receipt.billing.address}<br />
  {#receipt.billing.city}, {#receipt.billing.state} {#receipt.billing.zipCode}<br />
  {#receipt.billing.country}<br />
  {#receipt.billing.phone}<br />
  {#receipt.billing.email}
</p>
<h2>Credit Card</h2>
<p>
  {#receipt.creditCard.type}<br />
  {#receipt.creditCard.number}<br />
  {#receipt.creditCard.expirationMonth}/{#receipt.creditCard.expirationYear}
</p>


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;}