The "cartpage" Template

The "cartpage" template is what makes cf_ezcart so simple to integrate within your web site. You may make a copy of any of your web pages and drop the cart right into in a few easy steps. The only considerations for this template are... A) you provide enough room for the cf_ezcart content. Generally 450 pixels or more wide work best, especially if you are showing pictures of your items. We would suggest not trying to use under 400 pixels in width. And B) the page is a ColdFusion (.cfm) template.

Following are step by step instructions for creating your cartpage template and dropping cf_ezcart into that template. These instructions assume uploading the files to the web server, then editing those files on the server. If you edit your files locally, or are working right at the box with the web server, adjust accordingly.

Before we begin, there is 1 very important consideration. This file may actually be loading from various levels and loading through both the http and the https addresses. Therefore any links and inline items (img tags, javsacript and css files, Flash, etc.) will have to use absolute links (http://etc). We also have to change the http to https during checkout or a warning will appear that "this secure page contains non-secure items blah blah blah", which will scare some people. Lastly, all links to your other site pages must (or should) be pointed back to your NON secure pages. Especially if using Shared SSL. Thgis will apply to any cfincludes, such as tags for your headers etc., if they're not already done.

There are 2 variables available. You may have to wrap them in cfoutput depending on whether the code is already wrapped with cfoutput. For clarity, we will show them without. These variables are available to any page running under Application.cfm, so they should be safe to load in files that may be included in other site files.
  1. request.imageserver will resolve to either of the values set in store setup for the Main Server and the Secure Server, depending upon which you are on at the moment. This should be used on all inline items. Examples:

    <script language="javascript" src="#request.imageserver#popup.js" type="text/javascript"></script>
    <link rel="Stylesheet" rev="Stylesheet" href="#request.imageserver#styles.css" type="text/css">
    <body background="#request.imageserver#images/bg.gif">
    <img src="#request.imageserver#images/joe.gif">

  2. getsetup.server will resolve to the Main Server entry from store setup. This can be used for all links and is needed so the customer doesn't stay in secure mode (slower and may cause errors in other areas of the site) if clicking on a link during or directly after checkout. You can also use your actual URL, for example "http://www.abc.com/aboutus.cfm" to link back to the About Our Company page. The main advantage to using getsetup.server is that it will change depending upon what is in the database, so you can go from a development URL or IP address to the actual domain without having to change your links again. Example:

    <a href="#getsetup.server#aboutus.cfm">About Our Company</a>

Create "cartpage" template:

  1. If you haven't done so, upload the directory named "store" and it's contents from the cf_ezcart package after unzipping. Upload to the same directory that the ezcart directory is in. Do not place it in the ezcart directory itself. If necessary, you may rename the directory from store to something else before uploading.
  2. Copy a page from your web site that you wish to use for your "cartpage" template. Rename the copy "shoppingcart.cfm" or anything that you like, as long as it ends with .cfm. Save it in the "store" directory that you uploaded.
  3. Open Application.cfm and look for the following line:
    <cfset cartpagetemplate = "store/template.cfm">
    This is the path to the cartpage template from the directory specified in Main Server (Store Setup). Place your cartpage template in the "store" directory.
  4. There should be a doctype tag similar to the following at the top of the new cartpage template:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    On the line directly after the doctype tag (or at the very top of the page if doctype is cfincluded in another file; see note), paste the following line.
    <cfinclude template="ezcartpagedefaults.cfm">
    NOTE: If you ARE using a cfinclude for the top of your file, you may paste the line above into that file.
  5. Your template should also have an opening and closing HEAD tag, between which will typically contain the TITLE tag, META tags and inline links to javascripts and/or stylesheet css files. If they are cfincluded in another file, skip to the next step. Otherwise, remove any of the following 3 tags that are present.
    1. Opening and closing TITLE tags.
    2. META Keywords
    3. META Description
  6. If the HEAD tags are in your cartpage template, simply paste this line in just after the opening HEAD tag.
    <cfinclude template="ezcartheaders.cfm">

    NOTE: If you are using a cfinclude already to include your HEAD tags, perform the following steps.
    1. Paste this line in the cartpage template itself, ABOVE the cfinclude line for you headers.
      <cfset loadezcartheaders = "1">
    2. Inside the header, paste the following code, replacing the red portion with your existing TITLE, META Description and Meta Keywords tags.
      <CFIF isDefined('loadezcartheaders')>
      <cfinclude template="ezcartheaders.cfm">
      <CFELSE>
      <title>YOUR EXISTING TITLE</title>
      <meta name="description" content="YOUR EXISTING META DESCRIPTION">
      <meta name="keywords" content="YOUR,EXISTING,META,KEYWORDS">
       </CFIF>

    NOTE: All other code within your header file should remain outside of this new code.
  7. You may open ezcartmetatagdefaults.cfm with an editor and enter a default page title, description and keywords. We have already included your site name from admin as the default title, but you may change that if you like. These items will display on the opening page of the site map (before clicking an item) and anywhere else we don't generate them automatically.
  8. In the portion of your cartpage template where you want the store's main content (products, cart, checkout, etc.), paste the following line.
    <cfinclude template="ezcartpagecontent.cfm">
  9. You may open ezcartpagecontent.cfm with an editor and load other content based on the value of "page" by adding cfcase statements with "page" values. For example, we have added "login", which loads the cf_login custom tag when page=login is passed to the "cartpage" template. Of course, you can also pass your own "page" values and load whatever you like within that section.

    We'll cover all the page values and variables passed with them and other items within the Special Links & Variables section.