Template Example: T-Shirt Store
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 a t-shirt store.
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 weblogs and settings by going to the CartThrob extnsions settings page: Global Settings > Auto-Install Templates. This specific example is contained in the “cart_tshirt” template group of the auto-install templates.
{examples_channel_configuration} {/examples_channel_configuration}
{!-- 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_tshirt"}
{embed=includes/.header title="T-Shirt Store" }
</head>
<body>
<h1>T-Shirt Store</h1>
<p>This example shows how you can add options that your customers can select, some options affect the price, and some do not.</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 T-Shirts</h2>
{!-- outputting products stored in one of the "products" weblogs. These are exactly the same as normal
product weblogs, so the weblog names may be different from what is listed below --}
{exp:weblog:entries weblog="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>
T-Shirt name: {title} Tee<br />
Quantity: <input type="text" name="quantity" size="5" value="" />
<input type="submit" value="Add to Cart">
<br />
Price: ${product_price}<br />
{!-- Some major magic happens here. This is the item_options variable.
It can be used in conjunction with a "Cartthrob Price Modifiers" field from your weblog,
and can automatically create and populate input and select fields with the data from that custom field.
A.
It can be used singly like this:
{item_options:select:YOUR_FIELD_NAME}
and a select dropdown with your values will be output
B.
You can use it as a variable pair like this:
{item_options:select:YOUR_FIELD_NAME}
<option value="{option}">{option_name} $ {price}</option>
{/item_options:select:YOUR_FIELD_NAME}
option, option_name, and price are variables associated with the Cartthrob Price Modifiers custom field type.
Associated prices are automatically figured.
C.
OR, you can add optoions on the fly like this:
<select name="item_options[whatevs]">
<option value="S">Small</option>
<option value="M">Medium</option>
<option value="L">Large</option>
</select>
D.
OR This:
{item_options:select:size class="size_box" values="S:Small|M:Medium|L:Large" attr:rel="external"}
In both option C and D above, prices aren't modified dynamically.
There are lots of ways to use the item_options variable. It's one of the most powerful features of CartThrob,
but possibly a bit complicated to grasp at first. Please feel free to post questions in the CartThrob forums
--}
<br />
Type:
{item_options:select:product_size}
<option value="{option}">{option_name} {price}</option>
{/item_options:select:product_size}
<br /><br />
Color:
{item_options:select:product_color}
<option value="{option}">{option_name} {price}</option>
{/item_options:select:product_color}
</p><br /><br />
{/exp:cartthrob:add_to_cart_form}
{/exp:weblog: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 number_format="yes" prefix="$"}
{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}
{!-- 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. --}
{exp:cartthrob:update_cart_form
return="{template}/index"
}
<table>
<thead>
<tr>
<td>Item</td>
<td colspan="2">Quantity</td>
</tr>
</thead>
<tbody>
{/if}
<tr>
{!-- The item_options field outputs information about a configured item option
any option input with the add_to_cart_form can be output using the item_options variable
{item_options:YOUR_FIELD_NAME} will output the option value.
{item_options:YOUR_FIELD_NAME:option_name} will output the option text.
--}
<td><strong>{title}</strong>: {item_options:select:product_size row_id="TRUE"}
{!-- These variables are just some of the cart_items_info variables --}
<br />Price with options: {item_price} x {quantity} = {item_subtotal}
</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>
{!-- outputting data that's only applicable for the last item. --}
{if last_row}
<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 --}
<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>
{!-- a clear_cart input can be used to remove all items in the cart --}
<input type="submit" name="clear_cart" value="Empty Cart" />
<input type="submit" value="Update Cart" />
{/exp:cartthrob:update_cart_form}
{/if}
{/exp:cartthrob:cart_items_info}
</div>
{!-- CHECKOUT --}
<div class="store_block">
<h2>Checkout</h2>
{!-- checkout_form tag outputs a checkout form--}
{exp:cartthrob:checkout_form
gateway="dev_template"
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}
<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="http://cartthrob.com/docs/tags_detail/add_to_cart_form">add_to_cart_form</a></li>
<li><a href="http://cartthrob.com/docs/tags_detail/add_to_cart_form/#var_item_options:select:your_option_name">add_to_cart_form: item_options</a></li>
<li><a href="http://cartthrob.com/docs/tags_detail/cart_items_info">cart_items_info</a></li>
<li><a href="http://cartthrob.com/docs/tags_detail/cart_items_info/#var_item_options:your_option">cart_items_info: item_options</a></li>
<li><a href="http://cartthrob.com/docs/tags_detail/checkout_form">checkout_form</a></li>
<li><a href="http://cartthrob.com/docs/tags_detail/submitted_order_info">submitted_order_info</a></li>
<li><a href="http://cartthrob.com/docs/tags_detail/update_cart_form">update_cart_form</a></li>
</ul>
<h2>Concepts used in this template</h2>
<ul>
<li><a href="http://cartthrob.com/docs/sub_pages/price_modifiers/">Price Modifiers</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.
