Styling "One Page Checkout"

The checkout process in ProductCart v4 was redesigned completely compared to previous version of ProductCart. An AJAX-driven, “one page checkout” system was added to ProductCart with the objective to simplify, speed up, and visually improve the checkout process. We will refer to it as OPC, which stands for “One Page Checkout”.

The following is a list of CSS documents that affect the look of One Page Checkout:

• pc/OnePageCheckout.css
  Includes a number of style definitions, such as the ones discussed below with regard to using a one- vs. two-column layout.
• includes/spry/SpryAccordionOPC.css
  Used by the Adobe® Spry accordion widget that OPC is based on. There you can find styles that change the look of the panels. Look at the bottom of the CSS document for styles that are specific to ProductCart. Be extra careful when changing this document as changes can have major effect on OPC. Make sure to back up the file before editing it.

The main CSS documents included in your header.asp file also affect OPC, of course (e.g. font type, colors, etc.).

By default, OPC is organized in one column, with the “Order Preview” panel located at the bottom of the other panels. Here is a visual example of how the page looks at the beginning of the checkout process. Note the “Order Preview” below the login/checkout panel.

This layout option is used by default because it uses less horizontal real estate and will fit in most Web store designs. The two-column layout option described below, on the other side, cannot be used unless you switch to a different Web site design for your checkout page, or if you are using a store design that is particularly wide (i.e. it does not contain a left and/or right side).

In most cases, your store design does contain a left and/or right column to host things such as category navigation, other links, banners, login/search boxes, a shopping cart summary, etc. In this scenario, you can still use the 2-column layout, if you wish to do so, by following the steps outlined below.

You can quickly change OPC so that it is organized in two columns with the “Order Preview” panel located to the right-side of the main panels. Here is a visual example of how the page looks at the beginning of the checkout process, when this second layout option is used.

To switch to using this second layout, follow these steps. As always, make sure to create back-up copies of everything you will need to edit, before you make any edits.

The first step is to create an edited version of your store design that provides more horizontal real estate. In some cases (such as with the default ProductCart v4 header/footer files), this might mean that you simply need to edit header.asp and remove some code. In other cases, you might need to edit both header.asp and footer.asp. For example, you may need to remove the left- and right-side columns, if they exist.

You can name your new files as you wish. Here we will assume that you have renamed them header2.asp and footer2.asp.

Let's assume that you simply needed to remove a bit of code from header.asp (e.g. a left-side column with your navigation) to create more horizontal space. You have saved the edited file with the name header2.asp. Now you need to “tell” OPC to use this edited Web store interface. To do so:

1. Download OnePageCheckout.asp from the pc folder
2. Open it Notepad or your favorite HTML editor
3. Locate the line of code that reads

   <!--#include file="header.asp"-->

   and change header.asp to the name of the new file. In this example, it will change to header2.asp

   <!--#include file="header2.asp"-->

OPC uses 2 additional CSS documents compared to all other ProductCart pages:

• OnePageCheckout.css Contains styles applied throughout OPC. * SpryAccordionOPC.css Contains styles that pertain to the panels used by OPC to organize information. OPC uses an edited version of an Adobe Spry accordion.

You will need to make two simple changes to OnePageCheckout.css to “turn on” the 2-column layout. Follow these instructions:

1. Download OnePageCheckout.css from the pc folder
2. Open it Notepad or your favorite HTML editor
3. Locate the section of the code that reads:

   /* Right-Side Order Preview - START
   /* Uncomment the following rows to display the order preview  */
   /* on the right side of thepage. Change the widths of the two  */
   /* layers as needed. To uncomment, add the closing comment tag HERE

   and change HERE with a closing comment tag. That is, the last line becomes:

   /* layers as needed. To uncomment, add the closing comment tag */

   This has the effect of activating all of the styles that follow in the document (all the styles you need to activate the two column layout are there already: you just need to activate them).

4. Now locate the code

   	/* Container */
   	/* Remove or comment out this style if you use the 2-column layout */
   	/* for One Page Checkout */
   	#opcOrderPreviewDIV {
   		margin-top: 15px;
   	}

   and change the “margin-top” statement, if needed.

Always make sure to back up any files before you replace them, especially when you are dealing with such important files as you are in this case. A quick way to back up any files is to create a “backup” folder in your local folder structure and download there the files that are currently on the Web server. In this case, create a “backup” folder in your local pc folder.

The files that you need to back up are:

• OnePageCheckout.asp
• OnePageCheckout.css

… and any other files that you might have changed (e.g. did you change another CSS file to change the layout?).

You are now ready to upload your edited files. In the example discussed above, where we only had to edit header.asp to change the layout of our store to allow for more horizontal space, the files to upload to the pc folder are:

• header2.asp
• OnePageCheckout.asp
• OnePageCheckout.css

Refresh your browser to see the changes in action (otherwise you might be looking at cached content). The “Order Preview” should now be showing on the right side of the main OPC panel (as shown in the screen shot included earlier in this document).

To edit the width of the two panels and their distance from the left- and right-side borders of your store design, use the following style definitions in the file OnePageCheckout.css:

	#opcMainContainer {
		width: 620px;
		float: left;
		margin-left: 10px;
		margin-bottom: 20px;
	}

	#opcOrderPreviewDIV {
		float: right;
		width: 450px;
		margin-right: 10px;
	}
	
	#opcOrderPreview {
		width: 445px;
	}

Specifically:

• Change the width of opcMainContainer to change the side of the main panels (left side panels)
• Change the width of opcOrderPreviewDIV and opcOrderPreview to change the side of the Order Preview. The first is the “container” DIV for the Order Preview, the second one is the HTML table that organizes the Order Preview itself. So you can target them separately for even more control on the look of that portion of the page.

Lower in the code of the same CSS document you will find the following style definition. This style sets a top margin for the Order Preview that separates it from the main OPC panels when the one-column layout is used. That margin is typically not needed in a two-column layout. So you can either set the margin to 0, completely remove that style definition, or comment it out.

	/* Container */
	/* Remove or comment out this style if you use the 2-column layout */
	/* for One Page Checkout */
	#opcOrderPreviewDIV {
		margin-top: 15px;
	}

You can further fine-tune the look of the two panels by using the OnePageCheckout.css document. Remember to upload the edited version to the pc folder and to refresh the browser (sometimes you have to refresh it twice) to make sure you are not looking at cached content.

The small “box” that shows the order total towards the top of the page is styled by the following style definitions contained in the file SpryAccordionOPC.css, which is located in the includes/spry folder.

#pcOPCtotal {
	border: 2px solid #CCC;
	background-color: #06C;
	padding: 3px 12px 3px 12px;
	margin-top: -10px;
	margin-right: 20px;
	float: right;
	position: relative;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

To hide it, change “margin-top: -10px;” to “margin-top: -1000px;” (this will “push” it out of sight).

By default the Order Preview section of One Page Checkout does not show the following information:

• Store address
• Customer billing address (it is already shown in the “Address” panel)
• Customer shipping address (it is already shown in the “Address” panel)

You can change this system behavior and show this information by performing a small code change.

1. Download the file opc_orderVerify.asp from the pc folder using your favorite FTP software
2. Make a back-up copy.
3. Open the file in Notepad or your favorite HTML editor and locate the section

   '// ONE PAGE CHECKOUT SETTING
   '// Hide company address, customer billing and shipping addresses
   '// in the Order Preview section.
   
   Dim pcIntHideAddresses
   pcIntHideAddresses = 1 ' Addresses are hidden
   'pcIntHideAddresses = 0 ' Addresses are shown
   
   '// ONE PAGE CHECKOUT SETTING - END

4. Change

   pcIntHideAddresses = 1

   to

   pcIntHideAddresses = 0

5. Save the file and upload it to the Web server.

• Technical notes about One Page Checkout
• How to have the Order Comments field open by default in One Page Checkout
• Cascading style sheets in ProductCart
• Upgrading to v4