Shopping Cart Page Template: Ordering Instructions

Shopping Cart Page
Template Examples
Introduction
Required Tags
Page Colors
Title, Header, and Footer
Product Listing
Tax and Shipping
Surcharges
Totals
Coupons
Buttons
Ordering Instructions
Payment Selection
Customer Registration

Shopping Cart Page Template: Ordering Instructions

Merchants can enable an Ordering Instructions text box that lets customers type additional instructions for the order. Your template should use the [-- IF SC_OrderingInstructions --] tag to test whether this option is enabled and, if it is, use the [-- SC_OrderingInstructions --] tag to display the box. You can place the box anywhere on the page that fits your layout.

[-- DEFINE ShoppingCart --]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>[-- STORE.SC_YourShoppingCart --]</title>

</head>

<body>

[-- ShopSiteMessages --]

[-- ShoppingCartHeader --]

# Start the shopping cart form
[-- SC_Form --]

<tr>
    <td>
      <table border="0" style="line-height:150%" width="100%">
        <tr>
          <td align="left" valign="top">
            
            <br>[-- SC_Tax_Shipping --]
            [-- SC_Surcharge --]
          </td>

<td width="20px"> </td>
 
          <td align="right" valign="top">
            
            [-- SC_Totals --]
          </td>
        </tr>
      </table>
    </td>
  </tr>

[-- IF SC_Coupon --]
  <tr>
    <td align="center">
      [-- STORE.CouponCaption --] [-- SC_Coupon --] [-- BUTTON ApplyCoupon --]
    </td>
  </tr>
  [-- END_IF --]

<tr>
    <td align="center">
      [-- BUTTON Recalculate --] [-- BUTTON EmptyCart --]
    </td>
  </tr>

[-- IF SC_OrderingInstructions --]
  <tr>
    <td align="center">
      [-- SC_OrderingInstructions 4 60 --]
    </td>
  </tr>
  [-- END_IF --]

<tr>
    <td align="center">
      [-- BUTTON ContinueShopping --] [-- BUTTON Checkout --]
    </td>
  </tr>

</table>

</form>

[-- ShoppingCartFooter --]

</body>
</html>
[-- END_DEFINE ShoppingCart --]

Resulting Page

Ordering Instructions CSS

Here is a list of the CSS selectors used in the ordering instructions display.

table.instruct	The table containing the ordering instructions.
td.instruct_hdr	The cell containing the ordering instructions header.
td.instruct	The cell containing the textarea field in which customers can type ordering instructions.
textarea.instruct	The textarea field in which customers can type ordering instructions.

This example is the same as the one above, plus it includes a brief style sheet with selectors for some of the ordering instructions elements.

[-- DEFINE ShoppingCart --]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>[-- STORE.SC_YourShoppingCart --]</title>

/***********************/
/***  Hyperlinks     ***/
/***********************/
a:link { 
  color: #[-- STORE.SC_LinkColor --];
}
a:visited { 
  color: #[-- STORE.SC_VisitedLinkColor --];
}
a:hover { 
  color: #[-- STORE.SC_LinkColor --];
}
a:active { 
  color: #[-- STORE.SC_ActiveLinkColor --];
}

/**********************************/
/***  Table of Products (Cart)  ***/
/**********************************/
table.cart {
  width: 100%;
  padding-top: 1em;
  border-collapse: separate;
  border-spacing: 3px;
}

th {
  text-align: center;
}

td.cart_delete, td.cart_cp_delete {
  padding: 3px;
  width: 50px;
  text-align: center; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_quantity, td.cart_cp_quantity {
  padding: 3px;
  width: 70px;
  text-align: center; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_name, td.cart_cp_name {
  padding: 3px;
  text-align: left; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_sku, td.cart_cp_sku {
  padding: 3px;
  text-align: left; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_price, td.cart_cp_price {
  padding: 3px;
  font-style: italic;
  text-align: right; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_total, td.cart_cp_total {
  padding: 3px;
  text-align: right; 
  background-color: #[-- STORE.SC_ShadeColor --];
  white-space: nowrap;
}

td.cart_op {
  padding: 3px;
  text-align: left; 
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_op1, td.cart_op2 {
  padding: 3px;
  background-color: #[-- STORE.SC_ShadeColor --];
}

td.cart_empty {
  padding: 3px;
  text-align:center;
  background-color: #[-- STORE.SC_shadecolor --];
}

select.cart {
  text-align: left;
}

textarea.cart {
  vertical-align: middle; 
}

/* Delete Item Button */
input.button154 { 
  color: #[--STORE.SC_TextColor--];
  cursor: pointer;
}

/******************/
/*** Surcharges ***/
/******************/
table.surcharge { 
  text-align: right;
  padding-right: 15px;
}

td.surcharge {
  font-weight: bold;
}

select.surcharge {
  font-weight: normal;
}

/***************************************/
/***          Table of Totals        ***/
/***  Subtotal, Tax, Shipping, etc.  ***/
/***************************************/
table.totals {
  color: #[--STORE.SC_TextColor--];
  vertical-align: middle; 
  width: 100%;
  line-height: 150%;
}

td.totals_txt, td.totals_all_txt {
  text-align: right;
  padding-right: 15px;
}

td.totals, td.totals_all {
  text-align: right;
  padding-right: 3px;
}

td.totals_all, td.totals_all_txt {
  font-weight: bold;
}

/*****************/
/***  Coupons  ***/
/*****************/
td.coupon {
  padding-top: 10px;
  text-align: center;
  vertical-align: middle;
}
input.button152 { 
  color: #[--STORE.SC_TextColor--];
  cursor: pointer;
}

/*****************************/
/*** Ordering Instructions ***/
/*****************************/
table.instruct {
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}
td.orderinginstructions {
  padding-top: 20px;
}

td.instruct_hdr {
  font-weight: bold;
  text-align: left;
}

/*****************/
/***  Buttons  ***/
/*****************/
td.buttons {
  text-align: center;
  padding-top: 20px;
}
</style>

</head>

<body>

[-- ShopSiteMessages --]

[-- ShoppingCartHeader --]

# Start the shopping cart form
[-- SC_Form --]

[-- IF SC_Coupon --]
  <tr>
    <td class="coupon">
      [-- STORE.CouponCaption --] [-- SC_Coupon --] [-- BUTTON ApplyCoupon --]
    </td>
  </tr>
  [-- END_IF --]

<tr>
    <td class="buttons">
      [-- BUTTON Recalculate --] [-- BUTTON EmptyCart --]
    </td>
  </tr>

[-- IF SC_OrderingInstructions --]
  <tr>
    <td class="orderinginstructions">
      [-- SC_OrderingInstructions 4 60 --]
    </td>
  </tr>
  [-- END_IF --]

<tr>
    <td class="buttons">
      [-- BUTTON ContinueShopping --] [-- BUTTON Checkout --]
    </td>
  </tr>

</table>

</form>

[-- ShoppingCartFooter --]

</body>
</html>
[-- END_DEFINE ShoppingCart --]

Resulting Page