Shopping Cart Page Template: Product Listing

If you've followed the previous three examples, you now have the basic framework for your Shopping Cart Page template and you're ready to put in some content. The list of products in the cart is usually given a prominent location on the cart page.

  • The [-- SC_Cart --] tag produces a complete HTML table containing the entire list of products ordered by the customer, including any coupons and drop-down lists for products with ordering options.
  • You can specify the columns that you want displayed and the order of those columns, such as [-- SC_Cart delete quantity name sku price total --]
  • If you want the different parts of the page to line up, you should wrap them in an HTML table or use some CSS div tags. This example is not a complete template and doesn't require an HTML table, but it has one which will be used more in succeeding examples.
    [-- 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">
    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 --]
    [-- SC_Cart --]
    </form>
    [-- ShoppingCartFooter --]
    </body>
    </html>
    [-- END_DEFINE ShoppingCart --]

Product Listing CSS

The HTML tags in the table of products have CSS classes, and you can modify the look of the table by defining the selectors for those classes in a style sheet. You can control many aspects of the table, such as the font used, the widths of the cells, and background colors. This example uses the table shade color defined by the merchant for the background color, and it sets column widths and border spacing.

Here is a list of the CSS selectors used in the product table. The th.cart_ selectors are the column headers, the td.cart_ selectors are the product rows, and the td.cart_cp_ selectors are the coupon rows (coupons are only in Shopsite Pro).

table.cart The table containing the list of products ordered.
th.cart_delete
td.cart_delete
td.cart_cp_delete		 Cells in the column containing the "Remove" button.
th.cart_quantity
td.cart_quantity
td.cart_cp_quantity		 Cells in the Quantity column.
th.cart_name
td.cart_name
td.cart_cp_name		 Cells in the Name column.
th.cart_sku
td.cart_sku
td.cart_cp_sku		 Cells in the SKU column.
th.cart_price
td.cart_price
td.cart_cp_price		 Cells in the Price column.
th.cart_total
td.cart_total
td.cart_cp_total		 Cells in the Total column.
td.cart_op
td.cart_op1
td.cart_op2		 Cell containing product ordering options, and empty cell to the left and right of ordering options, respectively.
select.cart Select list of ordering options.
input.button154 The "Remove" button.

This example shows a brief style sheet with selectors for some parts of the product listing table.

    [-- 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">
    body {
       color: #[-- STORE.SC_TextColor --];
       background-color: #[-- STORE.SC_BackgroundColor --];
       [-- IF STORE.SC_BackgroundImage --]background-image: url("[--STORE.SC_BackgroundImage--]");[-- END_IF --]
    }
    table.cart {
       width: 700px;
       border-collapse: separate;
       border-spacing: 1px;
    }
    table.cart td {
       padding: 3px;
       background-color: #[-- STORE>SC_ShadeColor --];
    }
    .cart_delete, .cart_cp_delete, .cart_quantity, .cart_cp_quantity, .cart_empty {
       width: 70px;
       text-align: center;
    }
    .cart_name, .cart_cp_name, .cart_sku, .cart_cp_sku, .cart_op, select.cart {
       text-align: left;
    }
    .cart_price, .cart_cp_price, .cart_total, .cart_cp_total {
       text-align: right;
       white-space: nowrap;
    }
    .cart_price, .cart_cp_price {
       font-style: italic;
    }
    </style>
    </head>
    <body>
    [-- ShopSiteMessages --]
    [-- ShoppingCartHeader --]
    [-- SC_Form --]
    [-- SC_Cart --]
    </form>
    [-- ShoppingCartFooter --]
    </body>
    </html>
    [-- END_DEFINE ShoppingCart --]
Next: SC Tax & Shipping