Shopping Cart Templates: Customer Registration

Customer registration changes the shopping cart in three ways when it is enabled:

Registration links
Shipping addresses
Payment methods

Note that customer registration is only available in ShopSite Pro.

Registration Links

When a ShopSite Pro merchant enables customer registration, the "sign in" and "sign up" hyperlinks are added to the shopping cart page. With the default text, they look like this:

You can place these links anywhere on the shopping cart page with the [-- SC_Registration --] tag. You can use an [-- IF SC_Registration --] tag to test if the merchant has enabled registration.

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

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

  <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">
      <br>[-- SC_PaymentSelection --]
    </td>
  </tr>

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

</table>

</form>

[-- ShoppingCartFooter --]

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

Registered Customer Shipping Addresses

ShopSite remembers the shipping addresses used by a registered customer. Those addresses are listed as radio buttons on the shopping cart page for easy selection. You don't have to change anything in your cart template; the [-- SC_Tax_Shipping --] tag automatically displays the stored shipping addresses after a customer signs in, liks this:

Registered Customer Payment Methods

ShopSite remembers the payment methods used by a registered customer (customers can turn off this feature for their accounts). Those payment methods are listed as radio buttons on the shopping cart page for easy selection. You don't have to change anything in your cart template; the [-- SC_PaymentSelection --] tag automatically displays the stored payment methods after a customer signs in, liks this:

Registration CSS

The registration links, shipping addresses, and payment methods all have assigned CSS classes so you can apply your own formatting. Here is a list of the selectors used for customer registration elements:

table.reg	Table containing the registered customer's name and the registration links.
td.reg_wel	Cell containing the registered customer's name
td.reg	Cell containing the "View/Edit Account" link
td.reg_link	Cell containing the "Sign Out" link
table.sql_addr	Table containing stored addresses
td.sql_addr_hdr	Cell containing "Select Ship To Address"
td.sql_addr_select	Cells containing radio buttons for selecting addresses
td.sql_addr	Cells containing stored addresses
table.pay_holder	Table containing stored payment methods and drop-down list of new payment methods
td.pay_holder_hdr	Cell containing "Select payment type:"
table.sql_pay	Table of stored payment methods
td.sql_pay_select	Cells containing radio buttons for selecting payment methods
td.sql_pay	Cells containing the names of the stored payment methods
td.new_payment_type	Cells containing drop-down list of other payment methods

This example cart template is quite long and includes lots of style sheet information for the entire page, including customer registration.

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

/**************************/
/*** Payment Selection  ***/
/**************************/
td.paymentselection {
  text-align: center;
  padding-top: 20px;
  font-weight: bold;
}

select.paytype {
  font-weight: normal;
}

/*********************/
/*** Registration  ***/
/*********************/
table.reg {
  color: #[-- STORE.SC_TextColor --];
  vertical-align: middle; 
  border-spacing: 0;
  padding-bottom: 1em;
}

td.reg_wel {
  font-weight: bold;
}

td.reg {
  text-align: left;
}

td.reg_link {
  text-align: left;
}

td.sql_addr_hdr {
  font-weight: bold;
}

td.sql_addr {
  padding-right: 15px;
}

table.pay_holder {
  margin-left: auto;
  margin-right: auto;
}

td.pay_holder_hdr {
  font-weight: bold;
}

td.payment_hdr {
  font-weight: bold;
  text-align: center;
}

table.sql_pay {
  margin-left: -4px;
  margin-right: auto;
}

td.sql_pay {
  padding-right: 15px;
  font-weight: bold;
}

td.new_payment_type {
  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">
 
  [-- IF SC_Registration --]
    <tr>
      <td align="center">
        [-- SC_Registration --]
      </td>
    </tr>
  [-- END_IF --]

 <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="paymentselection">
      [-- SC_PaymentSelection --]
    </td>
  </tr>

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

</table>

</form>

[-- ShoppingCartFooter --]

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

Next: Checkout Required Tags

Shopping Cart Templates: Customer Registration

Registration Links

Registered Customer Shipping Addresses

Registered Customer Payment Methods

Registration CSS

Check These Out

Top Template Tips

Update Your Templates