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>

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

[-- ShoppingCartHeader --]

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

<table width="600" style="margin-left:auto; margin-right:auto" align="center">
  <tr>
    <td>
      [-- SC_Cart --]
    </td>
  </tr>

  <tr>
    <td>
      <table border="0" style="line-height:150%" width="100%">
        <tr>
          <td align="left" valign="top">
            <!-- Table for the shipping and tax selections etc. -->
            <br>[-- SC_Tax_Shipping --]
            [-- SC_Surcharge --]
          </td>

          <td width="20px"> </td>
 
          <td align="right" valign="top">
            <!-- Table for totals, etc. -->
            [-- 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 --]

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>

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

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

<table width="600" style="margin-left:auto; margin-right:auto" align="center">
  <tr>
    <td>
      [-- SC_Cart --]
    </td>
  </tr>

  <tr>
    <td>
      <table border="0" style="line-height:150%" width="100%">
        <tr>
          <td align="left" valign="top">
            <!-- Table for the shipping and tax selections etc. -->
            <br>[-- SC_Tax_Shipping --]
            [-- SC_Surcharge --]
          </td>

          <td width="20px"> </td>
 
          <td align="right" valign="top">
            <!-- Table for totals, etc. -->
            [-- SC_Totals --]
          </td>
        </tr>
      </table>
    </td>
  </tr>

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

Next: Cart Payment

Shopping Cart Page Template: Ordering Instructions

Ordering Instructions CSS

Check These Out

Top Template Tips

Update Your Templates