StarterCart 1.0 Beta Documentation: Checkout

Checkout

The cart checkout can be modified in several ways. Most of these will be done by changing a combination of three types of files:

  1. _cart.cfc: This is the site-specific page controller that all of the other page controllers in the checkout extend. Any variable or data changes will be done here.
  2. /admin/tags/: The custom tags in this directory drive most of the display (including all of the forms) for the checkout process as well as some of the form display in the admin.
  3. Checkout .cfm pages: The checkout pages themselves have very little code, but may still be used for some types of editing/customization.

Skinning

The forms for the checkout are skinnable. To set the for just the checkout, add it to the _cart.cfc file. So, for example, to use the "deepblue" skin your _cart.cfc would be the following:

<cfcomponent displayname="Site Cart Controller" extends="__cart" output="no">

<cffunction name="loadData" access="public" returntype="struct" output="no">
	
	<cfset var vars = StructNew()>
	
	<cfset vars.SebFormAttributes.skin = "deepblue">
	
	<cfreturn vars>
</cffunction>

</cfcomponent>

Form Changes

Any form changes can be done in the /admin/tags/ folder. It has the following custom tags:

Add New Page

The steps in the cart are defined in the checkout page controller using variables.steps with a default value of "cart-items.cfm,cart-addresses.cfm,cart-payment.cfm". To change that, simply set a new value in the psuedo-constructor of _cart.cfc. For example, to add "cart-login.cfm" at the beginning, you would have a _cart.cfc like the following:

<cfcomponent displayname="Site Cart Controller" extends="__cart" output="no">

<cfset variables.steps = "cart-login.cfm,cart-items.cfm,cart-addresses.cfm,cart-payment.cfm">

<cffunction name="loadData" access="public" returntype="struct" output="no">
	
	<cfset var vars = StructNew()>
	
	<cfreturn vars>
</cffunction>

</cfcomponent>

It would be up to you, of course, to write cart-login.cfm. All of the other functionality, however, (including the steps output and appropriate forwarding) would work correctly with the new addition.

Change the "Continue Shopping" Page

To change the "Continue Shopping" page, you can simply set the value of "variables.ShopPage" in _cart.cfc. So, for example, to set that to "/shop/":

<cfcomponent displayname="Site Cart Controller" extends="__cart" output="no">

<cfset variables.ShopPage = "/shop/">

<cffunction name="loadData" access="public" returntype="struct" output="no">
	
	<cfset var vars = StructNew()>
	
	<cfreturn vars>
</cffunction>

</cfcomponent>

Use a Single-Page Checkout

Here is the _cart.cfc code for a single-page checkout:

<cfcomponent displayname="Site Cart Controller" extends="__cart" output="no">

<cfset variables.Framework.Config.setSetting("Cart_CartType","single-page")>

<cffunction name="loadData" access="public" returntype="struct" output="no">
	
	<cfset var vars = StructNew()>
	
	<cfreturn vars>
</cffunction>

</cfcomponent>

Add Output to Checkout Page(s)

If you have other output to add to checkout pages, simply open up the .cfm file add add your changes. For example, to add "This is a test paragraph" to the top of cart-items.cfm:

<cfimport prefix="cart" taglib="/admin/cart/tags">
<cf_PageController>

<cf_layout>
	<script type="text/javascript" src="cart.js"></script>
<cf_layout showTitle="true">

<p>This is a test paragraph</p>

<cart:step>

<cf_sebForm>
	<cart:items>
	<cf_sebField type="Submit" label="Checkout">
</cf_sebForm>

<cart:step>
<cart:shoplink>

<cf_layout>

If you want to add output that will appear on multiple pages, you can add a file into the /admin/tags/ folder and use it on multiple pages. For example, if you wanted to put a paragraph that said "This is help text." at the top of every page, you could create help.cfm in /admin/tags/:

<p>This is help text.</p>

To add that to cart-items.cfm (for example) you would use the following code:

<cfimport prefix="cart" taglib="/admin/cart/tags">
<cf_PageController>

<cf_layout>
	<script type="text/javascript" src="cart.js"></script>
<cf_layout showTitle="true">

<p>This is a test paragraph</p>

<cart:help>

<cf_sebForm>
	<cart:items>
	<cf_sebField type="Submit" label="Checkout">
</cf_sebForm>

<cart:step>
<cart:shoplink>

<cf_layout>