Shopping Cart Page Template: Coupons

Digital Coupons is a ShopSite Pro feature. Most customers like to enter coupon codes on the shopping cart page (although ShopSite does offer other methods), so it's good to have a text entry box for coupon codes.

Depending on the custom template tags that you use, you can either tell customers to enter a coupon code and press an "Apply Coupon" button, or tell them to press the "Recalculate" button. This example uses the "Apply Coupon" button.
Your template should use the [-- IF SC_Coupon --] tag to test whether the merchant wants a coupon code box on the shopping cart.

[-- 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 --]
[-- 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 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 --]
</table>
</form>
[-- ShoppingCartFooter --]
</body>
</html>
[-- END_DEFINE ShoppingCart --]

Coupons CSS

Most of the coupon text and form fields do not have named CSS classes. Only the "Apply Coupon" button has a named class. You can wrap a table cell or div or span around the entire set of coupon tags or around any individual tag to give you CSS control of the display.

input.button152

The "Apply Coupon" button.

This example is the same as the one above, plus it includes a brief style sheet with selectors for some of the coupon 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;
}
</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 --]
</table>

</form>

[-- ShoppingCartFooter --]

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

Next: Shopping Cart Buttons

Shopping Cart Page Template: Coupons

Coupons CSS

Check These Out

Top Template Tips

Update Your Templates