Confirmation Page, Thank You Page, and E-Mail Receipt Templates: Ordering Instructions, Comments, and E-Mail Lists

Confirmation Page,
Thank You Page, and
E-Mail Receipt
Template Examples
Introduction
Required Tags
Page Colors
Title, Header, and Footer
Order Number
Products and Totals
Ordering Instructions,
Comments, and E-Mail List
Addresses
Payment
Custom Checkout Fields
Buttons

Confirmation Page, Thank You Page, and E-Mail Receipt Templates:
Ordering Instructions, Comments, and E-Mail Lists

The Shopping Cart Page has an optional "ordering instructions" box, and the Shipping Page has an optional comments box and a checkbox for an opt-in e-mail list. You can display the contents of any and all of these elements on the Confirmation Page and Thank You Page, and on the E-Mail Receipt. The output from the tags is the same in all cases.

You should use an [-- IF --] test with each tag to determine if the feature is enabled and if the customer entered any text.
The [-- SC_OrderingInstructions --] tag and the [-- SC_Comments --] tag display the field label and the text that was entered by the customer. The text is not editable on these pages.
The [-- Email_List --] tag displays the text defined by the merchant, such as "Add me to your E-mailing list." If you use the [-- IF Email_List --] tag to test whether the customer checked the box, you can have the template display a different line of text instead of using the output of the [-- Email_List --] tag.

Confirmation Page Example: Ordering Instructions, Comments, and E-Mail List

The Thank You Page and E-Mail Receipt use the same tags shown here for the Confirmation Page.

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

<title>Confirm Your Order</title>

</head>

<body>

[-- ShopSiteMessages --]

[-- ConfirmationHeader --]

# Start the confirmation page form
[-- SC_Form --]

<table border="0" width="0" align="center">
  <tr>
    <td align="right">
      [-- SC_Cart --]
    </td>
  </tr>
  <tr>
    <td align="right">
      [-- SC_Totals --]
    </td>
  </tr>

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

[-- IF SC_Comments_Text --]
  <tr>
    <td align="center">
      [-- SC_Comments --]
    </td>
  </tr>
[-- END_IF --]

[-- IF Email_List --]
  <tr>
    <td align="center">
      [-- Email_List --]
    </td>
  </tr>
[-- END_IF --]

</table>

</form>

[-- ConfirmationFooter --]

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

Resulting Page

Ordering Instructions, Comments, and E-Mail List CSS

Here is a list of the CSS selectors used in the ordering instructions and customer comments display. The output of the [-- Email_List --] tag does not contain any CSS classes or attributes.

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.
table.comm	The table containing the customer comments.
td.comm_hdr	The cell containing the comments header.
td.comm	The cell containing the textarea field in which customers can type comments.

This example shows the Confirmation page with a style sheet applied.

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

<title>Confirm Your Order</title>

th {
  text-align: center;
}

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

/***************************************/
/***          Table of Totals        ***/
/***  Subtotal, Tax, Shipping, etc.  ***/
/***************************************/
table.totals {
  color: #[--STORE.SC_TextColor--];
  vertical-align: middle; 
  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;
}

/**********************************/
/***  Comments/More Info Table  ***/
/**********************************/
table.comm {
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

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

/*****************************/
/*** 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;
}
</style>