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>

<script type="text/javascript" language="JavaScript">
<!-- 
[-- SC_JAVASCRIPT extras --]
// -->
</script>

<style type="text/css">
/***********************/
/***  Page Defaults  ***/
/***********************/
body {
  color: #[-- STORE.SC_TextColor --];
  background-color: #[-- STORE.SC_BackgroundColor --];
  [-- IF STORE.SC_BackgroundImage --]
  background-image: url("[--STORE.SC_BackgroundImage--]");
  [-- END_IF --]
}
</style>

</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 --]

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>

<script type="text/javascript" language="JavaScript">
<!-- 
[-- SC_JAVASCRIPT extras --]
// -->
</script>

<style type="text/css">
/***********************/
/***  Page Defaults  ***/
/***********************/
body {
  color: #[-- STORE.SC_TextColor --];
  background-color: #[-- STORE.SC_BackgroundColor --];
  [-- IF STORE.SC_BackgroundImage --]
  background-image: url("[--STORE.SC_BackgroundImage--]");
  [-- END_IF --]
}
/**********************************/
/***  Table of Products (Cart)  ***/
/**********************************/
table.cart {
  width: 100%;
  padding-top: 1em;
  border-collapse: separate;
  border-spacing: 3px;
}

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>

</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 --]

Next: Confirmation & Thank You Addresses

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

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

Ordering Instructions, Comments, and E-Mail List CSS

Check These Out

Top Template Tips

Update Your Templates

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