Formatting the cart

Merchant OrderForm Web Based Shopping Cart System @ 2001
 Documentation for formatting the cart for your site

Table of Contents | FAQ | Installation | Security Issues | Building Input Pages | Formatting
Configurations1 | Configurations2 | About Configurations | Troubleshooting | Customizing

These programs are protected by copyright and may not be resold or distributed. Please see the copyright notice for more information on your end user license for this program.

What's In This Document:

Use this as a reference for all formatting features. There are two separate areas that you'll be working in to customize the look and feel of the screens, navigation, tables, text, and buttons

  1. Cart screen templates, which surround the dynamic script output. These are standard HTML files you create and upload to the ../mofcart/ directory on the server. MOF reads these templates to use as headers and footers for the various cart screens.

  2. Settings in mof.conf and mofpay.conf, which have various configurations for formatting the tables, text, and navigation buttons in the dynamic script output


How Do I .. ?

 

Formatting sections in the mof.conf and mofpay.conf configuration files

  1. CART SCREEN TEMPLATES
  2. CSS SUPPORT FOR FORMS, BUTTONS, AND LINKS
  3. FORMATTING THE ORDERS TABLE
  4. FORMATTING THE DESCRIPTION TD AREA
  5. TRASH CAN MODE FORMAT
  6. SHIPPING-BILLING SCREEN FORMATTING
  7. TOP NAVIGATION MENUS
  8. OTHER NAVIGATIONAL LINKS
  9. BOTTOM NAVIGATION MENUS

 

CART SCREEN TEMPLATES Sections LIst How Do I ?

Use: Allows you to create your own HTML screens that MOF uses to surround the various cart screens

How It Works:

MOF uses regular HTML pages as templates to surround all of the various cart screens. This allows you to create the headers and footers for the cart screens using an HTML editor. When building these templates keep in mind that MOF will insert all of it's output at a designated point in the template page.  So you don't want to crowd up the template file, but make it with plenty of middle space to house MOF's output.

As MOF moves through various screen, it grabs the appropriate template for that screen, and consolidates the template with program output. All program output is inserted where the insertion marker appears in the template page ..

<!--MOF-INPUT-AREA-->

The insertion marker is in HTML comment format. Make sure this comment marker is embedded in your template where you want MOF to insert the program output.

Tips for making templates:

It's probably a good rule to keep the templates simple.  MOF will read your template files line for line, consolidate it's output with the file, and spit back a complete html page to the browser via the cgi gateway.  So you won't be able to include anything like SSI calls in the templates.  The cgi gateway will not process SSI directives.  Also, you don't want to place anything in your templates that would trigger a reload or OnLoad() scripting directive.  You cannot reload a cgi script from the browser unless you do it manually from the refresh button.  Cgi scripts are looking for input, and an OnLoad() script directive in your template will trigger an OnLoad Event if the browser is re-sized  This results in an error message because nothing was submitted to the MOF scripts.  There should be only one way to trigger a reload of the script output, and that is when someone clicks the reload or refresh button on their browser.  Only then, does the browser know that it's supposed to submit any input that is in cache from the script.

The OnLoad() Events scripted into web pages are often used with a dynamic Java script menu system.  You can use Java script or fancy stuff, but just be careful.  Make sure any fancy Java script or anything else will be compatible processing through the cgi gateway.  You can use CSS style sheets, images, links, and all kinds of other stuff in your templates.  Java script will process via the cgi gateway fine, as long as it doesn't trigger reload events.  

It is safest to use Full URLs for any links, images, CSS, etc., in your templates.  The cgi gateway looks for this stuff from a  position relative to the cgi-bin, which is not necessarily the same position as if you were calling up the template file via the world wide web. If, when you test the art, the screens are missing images and CSS formatting, etc., then just use the Full URL. That fixes it every time

If you are using SSL, then your templates will need to reference only objects via the HTTPS protocol, otherwise, a user will get the browser message "viewing non secure items over a secure page." 

You can make your templates to include whatever messages you want.  Our example templates have been refined from various feedback, and have messages that are short and simple.  But, you can put longer messages at the top of each of those pages if you think you need to explain things more to those who will be using your cart.

About printing

Invision your templates as your business letterhead, with the business address, phone number, etc. This allows customers to print the Order confirmation and have all your contact information on the printed copy. You'll also need to take note of how wide that Order confirmation, and Web copy template is. Anything over about 680 width and the totals to the right side of the invoice are not printable, but off the page. You can limit the width of the page, place a 640 wide table to surround the order tables, limit the actual width of the order tables, or even make your template width adjusting instead of fixed width. With a width adjusting page, the print utility will squeeze it down to fit

List of templates:
file where is it used
mofcookies.html Redirect screen for cookies errors
moferrors.html Redirect screen for custom error messages
   
mofviewcart.html Viewcart or add to cart screen. Ordering online is easy ..
mofshipping.html Shipping information, insurance, tax, discount coupons screen
mofsummary.html Order summary screen, shows all computations for order
mofvalidate.html Validation messages screen: Please Try Again ..
 
* mofbilling.html Billing information, payment methods, comments screen
* mofconfirmation.html Order confirmation screen. Thank you for your order ..
   
** mofinvoice.html Web copy of Order confirmation (if using this feature)
 
mofstyle.css CSS support for navigation buttons, links
   
help.html Pop up help window (optional)
pop-shipping.html Pop up shipping information window (optional)
pop-cvvcid.html Pop up "what is cc verification" window (optional)
pop-check.html Pop up check field window (optional)
pop-terms.html Pop up terms and conditions window (optional)

* Note: If the MOF Back End is installed under SSL, then these templates must have all objects referenced via the HTTPS (SSL) protocol. If you are having trouble with browser insecure messages, and/or images are not showing up, then check that you have correct HTTPS references to all images and objects in these two templates

** Security Warning:

The template that makes the Web Copy of the invoice (if this feature is enabled) should always include the meta tags to minimize robot scanning and listing in the search engines.  You don't want your customer's invoice showing up at the Alta Vista search engine under their address.  Our packaged template mofinvoice.html has this installed properly.  If you make your own template for this function, then make sure you get this meta tag installed correctly, so that those pages, when they are created, will have a No Index, No Follow meta tag to the search engines.

<meta name="robots" content="noindex,nofollow">

Take extra measures:

We also strongly recommend that you create password protection for the ../invoices/ directory on the server. This is the only totally safe way to prevent non compliant robots from indexing your invoices directory. It's very easy to do for Unix/Linux servers, and will insure the safety of your customers' invoices.

Htpasswd Password Manager v1.0, Free, available at CGI-Factory.com, will do the job.
http://www.cgi-factory.com/software/

We've created settings in the mofpay.conf file to have a user : password printed in the customer mail order confirmation. You only need one password to protect the directory from non compliant indexing bots. Customers just need the general access password. Don't worry about your customers prying into the directory, because invoice files are created with random numbering, so it would be hard to guess what another customer's invoice file is named.

Javascript submit

You can trigger the various Form submits throughout the cart by linking to them with Javascript from your templates. For help on this see Docs > Customizing.html

 

CSS SUPPORT FOR FORMS, BUTTONS, AND LINKS Sections LIst How Do I ?

Use: Allows CSS formatting of all HREF links and Form INPUT elements embedded in the cart's dynamic output.

Note: see the mofstyle.css style sheet included in the package in your ../mofcart/ directory for comments on what the different Class attributes will format. Basically, the CSS formatting is for all the HREF links in the Top Navigation scheme, Recalculation button, various Edit images, and links in the actual line item text in the Order summary.

There's also another CSS file called mofstyle-with-boxes.css. This has a handful of classes for formatting for all the INPUT elements throughout the cart; text boxes, dropboxes, radio buttons, checkboxes, textarea; however, Netscape v6.x doesn't act right with it, and the old Netscape browsers can't use it at all. If you use the box classes, be aware that Netscape v4.0 (if it's still out there) will not be able to use the cart at all, since it can't display dropboxes formatted this way

With the newer browsers (v 5.x), you can simply delete the mofstyle.css and all CSS styles will be gone. The cart will continue to display okay. If you want to do away with the CSS styles correctly, you should eliminate the reference to the CSS sheet in the 9 templates, because older Netsapce (v 4.0) may show a resource not found message if you simply delete the CSS file, rather than ignore the absence of the file.

Note: the CSS style sheet is specified in the template headers

All other formatting for regular text throughout the cart is done in the mof.conf and mofpay.conf configuration files, explained below.

 

FORMATTING THE ORDERS TABLE Sections LIst How Do I ?

Note: Both mof.conf and mofpay.conf have the same settings for formatting. You will need to make them both uniform so the orders table displays the same through all cart screens.

TableCapture.gif

$tableborder_color = "border=1 bordercolor=#E8E8E8";
 contains both the border=1 and color attribute
This allows you to set overall border attributes like those MSIE dark-light bordercolors.

$action_message_bg = "background=\"http://path/to/image.gif\"";
$action_message_bg_preview = "background=\"http://path/to/image.gif\"";
These two are background settings. You can use an image or just specify a color
Our example uses image files to create the top tab appearance.

$returntofont
 This returns everything to the font you started with in your templates

Trick:

If you need a background image for a color only setting, like $tableheading, then you'll have to perform sort of a trick to make the resulting HTML come out correct:
$tableheading = "\"\" background=\"../image.gif\"";

This forces the "" closure of the color attribute, then inserts the background attribute. The resulting HTML comes out looking like this:

<td bgcolor="" background="../image.gif">


 
FORMATTING THE DESCRIPTION TD AREA Sections LIst How Do I ?

All extra user input is listed in the Description section of the orders table.

DescriptionCapture.gif

Note: Both mof.conf and mofpay.conf have the same settings for formatting. You will need to make them both uniform so the orders table displays the same through all cart screens.

How to do your own formatting:

You can disable the <li> printing in mof.conf, and control all the formatting in extra user input with some creative embedding of HTML [pseudo tags] in the input. Disable the $makelist function in mof.conf, then anything printed in the description areas will be one long string, including any HTML formatting via you pseudo tags. You can also control the sorting of extra user input by arranging field names for the input. For help on Setting up user input options see: Docs > USER INPUT OPTIONS


TRASH CAN MODE FORMAT Sections LIst How Do I ?

Use: Allows you to place text or images next to the quantity boxes in the orders table, to delete that product from the orders table. You can place text or an image to display

1 Turn on trash can mode
0 Turn it off
$trash_can_mode = 1;

text:
$trash_can_icon = "<font size=1 color=red>Del</font>";

image:
$trash_can_icon = "<img align=top src=\"http://localhost/mofcart/trashcan.gif\" border=0 width=14 height=21 alt=\"Delete This Item From Cart\">";

 

SHIPPING-BILLING SCREEN FORMATTING Sections LIst How Do I ?

ShippingCapture.gif

Note: the four validation images far right can be set to images or text.

  1. Blue Arrow - shows required fields when entering page for first time - Required
  2. Red Arrow - shows empty field after form submitted and returned - Missing
  3. Question Mark - shows validation problems, no enough characters, etc. - Incomplete
  4. Green check Mark - shows if the Field is validated - Okay

Note: some of the names are different in the mofpay.conf settings

  • $final_heading
  • $final_text
  • $info_missing
  • $info_incomplete
  • $info_required
  • $info_okay
  • $font_final_titles
  • $info_message_bg

 

TOP NAVIGATION MENUS Sections LIst How Do I ?

Use: Allows you to enable full navigation from the top of the cart, and to use your own images or text for navigation.

How It Works:

All top menu functions are javascript submit() HREF links. They only reference the Form name. The real Forms are constructed only for the bottom navigation, so you cannot disable certain bottom navigation associated with Form input. If you want to display only a top navigation scheme, and not the bottom, then use a 1 X 1 transparent spacer image instead of the image buttons on the bottom navigation. This will continue to make the Form available to the submit() functions, while making the bottom navigation invisible.

Which cart screens ?

You can (1) enable or (0) disable the top menu on each cart screen separately. Only items actually enabled below will show up in the navigation bar

screens set in mof.conf

$includeViewCart = 1;
$includeShipInfo = 1;
$includeOrderSummary = 1;

screens set in mofpay.conf

$includeBillingInfo = 1;
$includeOrderConfirmation = 0;

What buttons in top navigation ?

Enable a function by defining what to display, text or image. Include any HTML you want to format the text, or specify IMG input. To disable a function set it to (null)

$menu_home_top = "HOME";
$menu_home_top_url = "URL FOR HOME LINK";
$menu_previous_top = "CONTINUE SHOPPING";
$menu_viewcart_top = "EDIT CART";
$menu_update_top = "RE-CALCULATE";
$menu_delete_top = "DELETE CART";
$menu_preview_top = "NEXT";
$menu_shipinfo_top = "CHANGE SHIPPING;
$menu_payment_top = "CHECKOUT";
$menu_help_top = "POP-UP HELP WINDOW";
$menu_help_top_url = "URL FOR HELP WINDOW";

Note: I left the examples for both text and image buttons in the mof.conf settings

Operational sequence:

MOF manages what navigation functions are allowed for a particular screen.  For example, the "Recalculate" option is only displayed on the ViewCart screen; the "Change Shipping" option is only allowed on the Order summary screen, and only if any shipping, insurance, tax, or discount coupon information is required or stored. 

Be careful if you disable options. You could remove functions that cause a customer to get stuck at some point in the cart process, without a function to proceed, return, recalculate, delete, edit, checkout, etc..

You can place the buttons in any order with the top navigation, but you cannot do that with the bottom navigation. The bottom navigation order of buttons (options) is in a set order, to manage the multiple Form complexities in the program correctly.


 
OTHER NAVIGATIONAL LINKS Sections LIst How Do I ?

Use: Allows you to enable links at various places on the Order summary screen, allowing the customer to make changes to the Shipping, insurance, tax, discount coupon information. Also, there's one setting for an up close Recalculate button directly under the quantity boxes on the Ordering online is easy screen.

Linking actual text

These settings will (1) enable or (0) disable hyper links around text that is associated with the Shipping, insurance, tax, discount coupon screen. Again, make sure the bottom navigation for $menu_edit_preview_bottom is enabled, else the submit() will not work.

Link the shipping destination address, top tab
$linkActualInfo = 1;

Link the insurance line item in summary, if applicable
$linkInsuranceLine = 1;

Link the shipping fees line item in summary, if applicable
$linkShippingLine = 1;

Link the sales tax line item in summary, if applicable
$linkTaxLine = 1;

Link the coupon discount line item in summary, if applicable
Note: ARES discounts will not link, they are not changeable by the user
$linkCouponLine = 1;

Recalculate button

This button appears on the ViewCart Ordering online is easy screen, directly under quantity boxes, up close to help customers know what to do.

$linkUpdateIMG = "RECALCULATE DIRECTLY UNDER QUANTITY BOXES";

Using edit buttons

Use these settings to place an edit image to the left of summary line items. Use the complete <img src="image.gif"> syntax. Make sure and escape the inside quotes \"

$linkActualIMG = "BUTTON TO RIGHT OF SHIPPING DESTINATION ADDRESS";
$linkInsuranceIMG = "BUTTON LEFT OF INSURANCE LINE ITEM IN SUMMARY";
$linkShippingIMG = "BUTTON LEFT OF SHIPPING FEES LINE ITEM IN SUMMARY";
$linkTaxIMG = "BUTTON LEFT OF SALES TAX LINE ITEM IN SUMMARY";
$linkCouponIMG = "BUTTON LEFT OF COUPON DISCOUNT LINE ITEM IN SUMMARY";

If using discount coupons, you need a way for customers to find their way back to the coupon number, or know about the coupon number. MOF stores previous coupon numbers along with the shipping information, insurance, tax. You can provide a message or image which appears next to the first sub total line item in the summary to lead back to the coupon number.

$linkHaveCouponsIMG = "DO YOU HAVE ANY COUPONS";



BOTTOM NAVIGATION MENUS Sections LIst How Do I ?

Use: Allows you to enable or disable bottom navigation options, and to use your own image buttons

Caution:

The real Forms are constructed using bottom navigation, so you cannot disable certain bottom navigation options associated with Form input. If you want to display only a top navigation scheme, and not the bottom, then use a 1 X 1 transparent spacer image instead of the image buttons on the bottom navigation. This will continue to make the Form available to the other submit() buttons, while making the bottom navigation invisible.

Operational sequence:

MOF manages what navigation functions are allowed for a particular screen.  For example, the "Recalculate" option is only displayed on the ViewCart screen; the "Change Shipping" option is only allowed on the Order summary screen, and only if any shipping, insurance, tax, or discount coupon information is required or stored. 

Be careful if you disable options. You could remove functions that cause a customer to get stuck at some point in the cart process, without a function to proceed, return, recalculate, delete, edit, checkout, etc..

The bottom navigation order of buttons (options) is in a set order, to manage the multiple Form complexities in the program correctly.

Use the complete <img src="image.gif"> syntax. Make sure and escape the inside quotes \"

$menu_home_bottom = "HOME";
$menu_home_bottom_url = "URL TO HOME";
$menu_previous_bottom = "CONTINUE SHOPPING";
$menu_editcart_bottom = "EDIT CART - RETURNS TO VIEWCART SCREEN";
$menu_update_bottom = "RECALCULATE - UPDATES QUANTITY CHANGES";
$menu_delete_bottom = "DELETE ENTIRE CART";
$menu_preview_bottom = "NEXT - GO TO ORDER SUMMARY SCREEN";
$menu_edit_preview_bottom = "CHANGE SHIPPING INFO";
$menu_payment_bottom = "CHECKOUT - GO TO BILLING INFORMATION SCREEN";
$menu_help_bottom = "POP-UP HELP WINDOW";
$menu_help_bottom_url = "URL TO POP-UP HELP WINDOW";

Tip

The Home button option is provided as a spare button. You could change this button to say "Main Catalogue" and set the URL to your main catalogue page



How to find all the places needing SSL references Sections LIst How Do I ?

If the MOF cart front end is installed under regular HTTP and the MOF cart back end is installed under HTTPS (SSL) they all of the images referenced in the back end templates and mofpay.conf settings need the full HTTPS (SSL) URL.

Two templates have images:

  • mofbilling.html
  • mofconfirmation.html

The mofpay.conf settings have images for buttons, validation cues

  • PayPal button
  • both top tabs (shipping address, billing address)
  • validation cues are images
  • top navigation images
  • bottom navigation images

Any pop-up windows need the URLs set to HTTPS, and any images the pop-up windows use must be HTTPS. See # 18. POP-UP WINDOWS section.

Any images that you pass to the cart via HTML [ pseudo tags ] tags will now be under SSL. This is tricky. The easiest solution is to reference the images via HTTPS from the front end, and input them that way; however, this does not work on Netscape v6.x versions. It seems to work on all other browsers.

 

 

These programs are copyright @ MerchantOrderForm.com, MerchantPal.com 2001