Template Example: Single Page Checkout
Though CartThrob isn't a solution like OSCommerce where templates can be simply swapped out, it's helpful to have somewhere to start. The template example below is meant to be a guide, and will give you somewhere to start building your checkout page.
This template code is also included with CartThrob as one of the auto-install templates. This and other example templates can be automatically installed, along with sample channels and settings by going to the CartThrob extnsions settings page: Global Settings > Auto-Install Templates. This specific example is contained in the "cart_single_page_checkout" template group of the auto-install templates.
{!-- You should almost always secure your pages to take transactions. To secure your pages use the following tag, to load your page as an HTTPS connection: {exp:cartthrob:https_redirect} This tag is currently commented out, because this page would fail to load if you have not yet installed your security certificate. If you need to know more about security certificates, please feel free to ask questions in our forums: http:cartthrob.com/forums --}{assign_variable:template="cart_single_page_checkout"}
{embed=includes/.header title="Single Page Store" }
</head>
<body>
<h1>Single Page Store</h1>
<p>This single page is an example of how you can use one page to add, update, and delete items, as well as checkout</p>
{!-- ORDER COMPLETE MESSAGES --}
{!-- The "return" paramater of the checkout form below is set back to this page with "order_complete" in the URL.
This saves creating a template specifically to handle order info. --}
{if segment_2=="order_complete"}
{!-- the submitted_order_info tag returns information from the last attempted order. --}
{exp:cartthrob:submitted_order_info}
<div class="store_block">
{if authorized}
Your transaction is complete!<br />
Transaction ID: {transaction_id}<br />
Your total: {cart_total}<br />
Your order ID: {order_id}
{if:elseif declined}
Your credit card was declined: {error_message}
{if:elseif failed}
Your payment failed: {error_message}
{if:else}
Your payment failed: {error_message}
{/if}
</div>
{/exp:cartthrob:submitted_order_info}
{/if}
{!-- ADD A PRODUCT --}
<div class="store_block">
<h2>Add Products</h2>
{!-- outputting products stored in one of the "products" channels. These are exactly the same as normal
product channels, so the channel names may be different from what is listed below --}
{exp:channel:entries channel="products" limit="10"}
{!-- The add_to_cart_form adds 1 or more of a product to the cart --}
{exp:cartthrob:add_to_cart_form
entry_id="{entry_id}"
return="{template}/index"}
<p>Product name: {title} <br />
Quantity: <input type="text" name="quantity" size="5" value="" /> <input type="submit" value="Add to Cart">
<br />
Price: ${product_price}<br />
</p>
{/exp:cartthrob:add_to_cart_form}
{/exp:channel:entries}
</div>
{!-- VIEW CART CONTENTS / UPDATE QUANTITIES --}
<div class="store_block">
<h2>Cart Contents</h2>
{!-- cart_items_info outputs information about your current cart, including products in the cart, weight, and prices. --}
{exp:cartthrob:cart_items_info}
{if no_results}
<p>There is nothing in your cart</p>
{/if}
{!-- outputting data that's only applicable for the first item. --}
{if first_row}
{exp:cartthrob:update_cart_form
return="{template}/index"}
<h3>Customer Info</h3>
{exp:cartthrob:customer_info}
First Name: <input type="text" name="first_name" value="{customer_first_name}" /><br />
Last Name: <input type="text" name="last_name" value="{customer_last_name}" /><br />
Email Address: <input type="text" name="email_address" value="{customer_email_address}" /><br />
State: <input type="text" name="state" value="{customer_state}" /><br />
Zip: <input type="text" name="zip" value="{customer_zip}" /><br />
{/exp:cartthrob:customer_info}
{!-- update_cart_form allows you to edit the information of one or more items in the cart at the same time
as well as save customer information, and shipping options. --}
<table>
<thead>
<tr>
<td>Item</td>
<td colspan="2">Quantity</td>
</tr>
</thead>
<tbody>
{/if}
<tr>
<td>{title}</td>
<td>
{!-- you can reference products by entry_id and row_id. If you sell configurable
items (like t-shirts with multiple sizes) you should use row_id to edit and
delete items, otherwise, all items with that entry id
are affected, regardless of configuration --}
<input type="text" name="quantity[{row_id}]" size="2" value="{quantity}" />
</td>
<td>
{!-- This deletes one item (row_id) at a time--}
<input type="checkbox" name="delete[{row_id}]"> Delete this item
</td>
</tr>
{if last_row}
{!-- outputting data that's only applicable for the last item. --}
<tr>
<td>
{!-- these are just some of the variables available within the cart_items_info tag --}
<p>Subtotal: {cart_subtotal}<br />
Shipping: {cart_shipping}<br />
Tax: {cart_tax}<br />
{!--tax is updated based on user's location. To create a default tax price, set a default tax region in the backend --}
Shipping Option: {shipping_option}<br />
Tax Name: {cart_tax_name}<br />
Tax %: {cart_tax_rate}<br />
Discounted Subtotal: {exp:cartthrob:arithmetic operator="-" num1="{cart_subtotal}" num2="{cart_discount}"}<br />
Discount: {cart_discount}<br />
<strong>Total: {cart_total}</strong></p>
<p>
{!-- total quantity of all items in cart --}
Total Items: {exp:cartthrob:total_items_count}<br />
{!-- total items in cart --}
Total Unique Items: {exp:cartthrob:unique_items_count}</p>
</td>
<td colspan="2"> </td>
</tr>
</tbody>
</table>
<input type="submit" value="Update Cart" />
{/exp:cartthrob:update_cart_form}
{/if}
{/exp:cartthrob:cart_items_info}
</div>
{!-- ADD COUPON --}
<div class="store_block">
<h2>Add Coupon</h2>
{!-- add_coupon_form tag outputs an add_coupon form--}
{exp:cartthrob:add_coupon_form
return="{template}/index"}
<input type="text" name="coupon_code" /> use code 5_off if you're demoing this on CartThrob.net<br />
<input type="submit" value="Add" />
{/exp:cartthrob:add_coupon_form}
</div>
{!-- SAVE CUSTOMER INFO --}
<div class="store_block">
<h2>Save Customer Info</h2>
{exp:cartthrob:save_customer_info_form
id="myform_id"
name="myform_name"
class="myform_class"
return="{template}/index"
}
{exp:cartthrob:customer_info}
First Name: <input type="text" name="first_name" value="{customer_first_name}" /><br />
Last Name: <input type="text" name="last_name" value="{customer_last_name}" /><br />
Email Address: <input type="text" name="email_address" value="{customer_email_address}" /><br />
State: <input type="text" name="state" value="{customer_state}" /><br />
Zip: <input type="text" name="zip" value="{customer_zip}" /><br />
{/exp:cartthrob:customer_info}
{exp:cartthrob:shipping_options}
<br />
<input type="submit" value="Save" />
{/exp:cartthrob:save_customer_info_form}
</div>
{!-- CHECKOUT --}
<div class="store_block">
<h2>Checkout</h2>
{!-- checkout_form tag outputs a checkout form--}
{!--- There are many parameters available for the checkout form. You may want to note: cart_empty_redirect
this parameter will redirect customer if there are no products in their cart. --}
{exp:cartthrob:checkout_form
{!--
gateway="dev_template"
--}
price="100"
return="{template}/order_complete"}
{!-- The gateway_fields template variable to output fields required by your currently selected gateway
what you see on the front end changes based on the gateway's requirements.--}
{!--
{gateway_fields}
--}
<fieldset class="billing" id="billing_info">
<legend>Billing info</legend>
<p>
<label for="first_name" class="required" >First Name</label>
<input type="text" id="first_name" name="first_name" value="" />
</p>
<p>
<label for="last_name" class="required" >Last Name</label>
<input type="text" id="last_name" name="last_name" value="" />
</p>
<p>
<label for="address" class="required" >Street Address</label>
<input type="text" id="address" name="address" value="" />
</p>
<p>
<label for="address2" >Street Address</label>
<input type="text" id="address2" name="address2" value="" />
</p>
<p>
<label for="city" class="required" >City</label>
<input type="text" id="city" name="city" value="" />
</p>
<p>
<label for="state">State (US only) </label>
<select id="state" name="state">
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DC">District of Columbia</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="IA">Iowa</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MA">Massachusetts</option>
<option value="MD">Maryland</option>
<option value="ME">Maine</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MO">Missouri</option>
<option value="MS">Mississippi</option>
<option value="MT">Montana</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="NE">Nebraska</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NV">Nevada</option>
<option value="NY">New York</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VA">Virginia</option>
<option value="VT">Vermont</option>
<option value="WA">Washington</option>
<option value="WI">Wisconsin</option>
<option value="WV">West Virginia</option>
<option value="WY">Wyoming</option>
</select>
</p>
<p>
<label for="zip" class="required" >Zip Code</label>
<input type="text" id="zip" name="zip" value="" />
</p>
<p>
<label for="country_code" class="required" >Country</label>
<!-- the values added here MUST be valid Alpha-2 (2 character) ISO_3166 codes, or the script WILL fail. http://en.wikipedia.org/wiki/ISO_3166-1 -->
<select name="country_code" id="country_code">
<option value="CA">Canada</option>
<option value="GB">United Kingdom</option>
<option value="US" selected>United States</option>
</select>
</p>
</fieldset>
<fieldset class="information" id="additional_info">
<legend>Additional Information</legend>
<p>
<label for="email_address" class="required">Email Address</label>
<input id="email_address" type="text" name="email_address" value="" />
</p>
<input type="hidden" name="transaction_type" value="_cart" />
<input type="hidden" name="weight_unit" value="lbs">
</fieldset>
<br />
{!-- you can add a coupon code using the "add_coupon_form" or you can add a code right here in the checkout_form --}
Add a coupon code: <input type="text" name="coupon_code" /> <br />
<input type="submit" value="Checkout" />
{/exp:cartthrob:checkout_form}
</div>
<div class="store_block">
<h2>Tags used in this template</h2>
<ul>
<li><a href="https://cartthrob.com/docs/tags_detail/add_to_cart_form">add_to_cart_form</a></li>
<li><a href="https://cartthrob.com/docs/tags_detail/add_coupon_form">add_coupon_form</a></li>
<li><a href="https://cartthrob.com/docs/tags_detail/cart_items_info">cart_items_info</a></li>
<li><a href="https://cartthrob.com/docs/tags_detail/checkout_form">checkout_form</a></li>
<li><a href="https://cartthrob.com/docs/tags_detail/customer_info">customer_info</a></li>
<li><a href="https://cartthrob.com/docs/tags_detail/save_customer_info_form">save_customer_info_form</a></li>
<li><a href="https://cartthrob.com/docs/tags_detail/submitted_order_info">submitted_order_info</a></li>
<li><a href="https://cartthrob.com/docs/tags_detail/update_cart_form">update_cart_form</a></li>
</ul>
</div>
<div class="store_block">
{embed=includes/.footer}
</div>
</body>
</html>The easiest method for using this template is as part of CartThrob's built-in auto-install templates system, but is included here as an overall sample of what some of the tags can do when put together.