Shopping Cart Code Sample

Here is some example code and CSS to build the shopping cart page 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 shopping cart content template. 

<h1>Shopping Cart</h1>
{if #cart.updateForm.errors}
  <ul class="errors">
  {loop items="#cart.updateForm.errors" value="error"}
    <li>{#error.message}</li>
  {/loop}
  </ul>
{/if}
{#cart.updateForm.tag.open}
  <a href="{#cart.urls.continueShopping}" class="continue-shopping">Continue Shopping</a>
  <a href="{#cart.urls.checkout}" class="checkout-button">Checkout</a>
  <table cellspacing="0" class="shopping-cart">
    <thead>
      <tr class="headings">
        <th class="link">&nbsp;</td>
        <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="#cart.products" value="product"}
      <tr>
        <td class="link"><label>{#product.fields.remove.tag} remove</label></td>
        <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}
          </div>
        </td>
        <td class="price">
          {#product.currentPrice.value}{if #product.pricePerUnit exists && #product.pricePerUnit != "None"} / {#product.pricePerUnit}{/if}
        </td>
        <td class="quantity">
          {#product.fields.quantity.tag}{#product.fields.partialQuantity.tag}
        </td>
        <td class="price">{#product.totalPrice.value}</td>
      </tr>
    {/loop}
    {if #cart.coupons}
      <tr>
        <td class="quantity-span" colspan="4">Subtotal</td>
        <td class="price">{#cart.cartTotalBeforeDiscounts.value}</td>
      </tr>
      {loop items="#cart.coupons" value="coupon"}
        <tr>
          <td class="quantity-span" colspan="4">{#coupon.name} ({#coupon.code})</td>
          <td class="price">-{#coupon.savingsValue}</td>
        </tr>
      {/loop}
    {/if}

      <tr class="totals">
        <td colspan="2"><input type="submit" name="submit" value="Update cart" /></td>
        <td class="quantity-span" colspan="2">Total</td>
        <td class="price">{#cart.cartTotal.value}</td>
      </tr>
    </tbody>
  </table>
{#cart.updateForm.tag.close}
{#cart.updateForm.tag.open}
  <div class="coupon">
    Have a coupon? {#cart.updateForm.fields.coupon.tag} <input type="submit" value="Apply" />
  </div>
{#cart.updateForm.tag.close}
<div style="clear: both;"></div>
<a href="{#cart.urls.continueShopping}" class="continue-shopping">Continue Shopping</a>
<a href="{#cart.urls.checkout}" class="checkout-button">Checkout</a>

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.

.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;}
.coupon {margin:20px 0 0;text-align:right;}
.continue-shopping {float:left;margin:20px 0;}
.checkout-button {float: right; margin: 20px 0; font-weight: bold;}