Buy Buttons
Outline:
Return to Table of
Contents
Goto the Glossary
Buy buttons are the key to the shopping system. These are the buttons that allow your customers to put items into their shopping cart for purchase. We will call any page with a ^buy button a catalog page to distinguish them from other types of pages at your site. As consumers browse your site, they see items of interest on catalog pages. These items are associated with ^buy buttons that allow the customer to make his selection. The items remain in the cart until the customer is ready to pay for his purchases. The shopping system provides a variety of button styles from which to choose. The simplest style is the "single event buy" or non-form buying which we will discuss first. Later in the document we will discuss "form buy" which provides more flexible and creative options for buying.
The simplest form of buying is the single
event buy. The consumer clicks on a special button called a ^buy
button and the software adds the associated item to the shopping
cart. To use this feature put the tame markup <tame ^buy: ITEM> on any tame page. The item, along with a
description and price, must be included in the product database.
This tag will create a button with the standard ^buy button icon
on the page. The standard icon is 
. When the buy button is selected, the shopping
system will automatically retrieve the item, price and
description from the product database. These items are presented
to the customer on a new shopping cart page. The shopping cart
page is updated automatically to show the new item selected as
well as all the other items selected for purchase by the
customer.
While presenting the shopping cart every time an item is selected may be useful, it is not necessary to force the customer to go to the cart after each selection. To stay on the same page after an item is selected for purchase use the <tame ^buyloop: ITEM>. Of course, you may still want to give the customer some feedback about his purchases by showing him that his shopping cart contains items. This is easily accomplished by placing a view of the cart on the current catalog page or any other appropriate page (see: cart_panel). You can have a ^buy button go to any tame page you choose by using <tame ^buygoto: ITEM DOCUMENT-LOCATION>. This is especially useful for routing consumers through a complex buying dialog or for constructing a custom ordering system to fit the style of your shop. More information about this is in the advanced section.
With the single event buy the information about the purchase is transferred to the cart via the URL and not through the use of form variables. This is because with single event buy the ^buy buttons are not contained within an HTML form. Consequently, no additional information about the selection can be collected. With the single event buy, the customer can purchase only one item at a time. Allowing multiple purchases using form buying is discussed later in this document.
Often your customers will want to make more than one purchase on a page or they need to select features related to the product they are purchasing. For clothes you will want their size and color selection and for a computer, you may want the consumer to select all the components together. Form buy is designed to provide this type of flexibility and creativity.
The syntax for a ^buy button is <tame
^buy: ITEM
BUTTON-FACE-AREA>.
When the BUTTON-FACE-AREA is omitted, as described above, the standard buy
button, , icon appears
on the page as a default. To individualize the ^buy button, text
or an image can be added. This is an easy way to customize the
look of your page. Each ^buy button at your site can have unique
visual properties using this method. Simply indicate your text or
an image as the last argument in your ^buy tag, to create your
own button style.
Unique ^buy buttons can provide association with a specific product, or association with your site. You can change the default ^buy button to your unique image or text through the face or image tags. Once this change is completed using <tame ^buy: ITEM> without a BUTTON-FACE-AREA will present your custom image on the page. To learn more about these features, see Customizing the Standard Icons.
Example:
<tame ^buy: ITEM Purchase this item for $20>
This will create a hyperlink with the text "Purchase this item for $20" on the buy button.
<tame ^buy: ITEM <img src="yourbuy.jpg" height=50 width=200>>
This will place your own graphic creation "yourbuy.jpg" on the buy button.
Whenever it is necessary to collect input from your customers, nesting the information inside <tame form> ...<tame /form> is required. This will allow your customer to make selections for size or color and personalize an item. In addition, check boxes, pull down lists and radio buttons can provide additional flexibility on a catalog page.
You can use pull down lists, check boxes, radio buttons and text input areas to associate qualities with an item selected for purchase using the following tags:
<tame select_quality: ITEM QUALITY VALUE...>
<tame box_quality: ITEM QUALITY VALUE>
<tame radio_quality: ITEM QUALITY VALUE>
<tame text_quality: ITEM QUALITY WIDTH HEIGHT DEFAULT_TEXT>
These qualities are associated with a particular buy button by having the same item code as the ^buy button. Any number of qualities can be associated with an item and one form can have multiple items with their associated qualities. Alone, these quality tags will not actually put an item in the shopping cart. They must be combined with one of the styles of ^buy button. When the customer makes a purchase by selecting a ^buy button, the quality selections appear in the item's description in the shopping cart. For example, a pair of shoes might have the description: Great Shoes Color: Red Size: 9.
The consumer may put multiple instances of the same item into the shopping cart with different qualities. In the cart each instance of the item will appear on a separate line. If the same set of qualities is selected more than once, the item does not appear on multiple lines or increase the item line quantity in the shopping cart. This ensures that customers do not unintentionally add multiple occurrences of the same item to their carts. However, the quantity can be changed by increasing or decreasing the quantity on the shopping cart page. Where quantity purchases are likely, the ^buyselectqty button can be used. Multiple item purchasing is discussed in the next section.
As long as the customer is at the site, the most recent customer selected qualities stay on the catalog page. If the customer is re-shown a catalog page where selections were made, the drop down lists, radio buttons and all other quality selects will appear with the last selection made.
Example:
<tame form>
A Personalized Widget
<tame select_quality: widget size small medium large>
<tame checked radio_quality: widget color red> Red
<tame radio_quality: widget color blue> Blue
<tame radio_quality: widget color yellow> Yellow
How do you wish to be personalize your widget?
<tame text_quality: widget Personalization 40 3>
<tame ^buy: widget Buy a Widget>
<tame /form>In this example the item widget can be specialized by size, color and with a personalized message. The customer will see a drop down selection list for size, 3 radio buttons for color and an input block for personalization. All information associated with the widget will appear in the description section on the cart_panel.
Once you have nested ^buy buttons inside <tame form> ... <tame /form> tags, you can give the consumer the convenience of purchasing multiple items on the catalog page at the same time. Check boxes, quantity input boxes and quantity selection lists enable multi-purchase functionality.
<tame ^buybox: ITEM>
<tame ^buyinputqty: ITEM>
<tame ^buyselectqty: ITEM QUANTITY . . .>
Catalog pages using these buttons also require a submit button to pass all the choices to the shopping cart. The following submission tags are used to complete the multiple selection:
<tame ^buysubmit: BUTTON-FACE-AREA>
Presents the shopping cart page with the new items.
<tame ^buysubmitloop: BUTTON-FACE-AREA>
This tag will present the current page and is useful with the cart_panel feature.
<tame goto: DOCUMENT-LOCATION BUTTON-FACE-AREA>
Goes to a page you, as shop owner, designate. This page may include a cart_panel to provide the customers with feedback on their selection.
Example:
<tame form>
Would you like a thing?
${price: thing} <tame ^buybox: thing>
Examples should be replaced monthly, so a 1 year supply is good.
${price: example} <tame ^buyinputqty: example 12 3>
Widgets are also available:
Select your color:<tame select_quality: widget Color Yellow Green>
The price is $<tame price: widget>
How many widgets would you like? <tame ^buyselectqty: widget 0 1 2 3 4 5>
<tame ^buysubmit: Add Items>
<tame /form>This example shows multiple purchases on one page. The customer can purchase a "thing" by checking a box. Then he can select the number of "examples" he wants to purchase by leaving 12 in the input box or replacing the amount with his alternative. The customer can also select a number of "widgets" within the restricted quantities of 0 to 5. Once his selections are completed, the customer chooses the ^buysubmit button to add his selections to the cart.
The select_quality and radio_quality tags discussed in the previous section add qualities to products that are selected using an additional ^buy button tag. Here we will discuss how to use radio buttons and pull down lists to select items directly. These tags are:
<tame ^buyradio: CLASS ITEM >
<tame ^buyselect: CLASS ITEM . . . >
The CLASS in these tags is an arbitrary code selected by you to associate the item purchased with a quality or other attribute. All attributes associated with a specific CLASS appear on the same line in the shopping cart.
Example:
<tame form>
Please select the item you which to purchase:
<tame ^buyselect: thing bows trousers shorts>
<tame select_quality: thing Color red blue pink>
Add a monogram:
<tame ^buyradio: monogram name> Your Name
<tame checked ^buyradio: monogram initial> Your Initials
How do you want the monogram signed:
<tame text_quality: monogram Personalized 40>
<tame ^buysubmit: Submit>
<tame /form>
In this example the CLASS "thing" will be associated with one of the items, e.g., trousers, by the customer using a drop down list. When the customer selects blue, it will be associated with trousers because of the class agreement, thing. The radio button works in the same way using the CLASS "monogram" to select a monogram and to provide personalization.
The shopping software takes advantage of the HTML 3.0 pull down selection list feature. With these tags you can show text on a page that is associated with different text submitted to the system. Often in business we have numeric product codes that are used for our order and tracking system, but these codes are "Greek" to our customers. By using this feature in the shopping system, you can create user friendly customer selection boxes while maintaining a product code in the background. While this feature provides additional functionality, please be aware that not all browsers support HTML 3.0 features and the use of these tags may restrict your customer's use of your site. The following tags support this functionality:
<tame ^buyselect2: CLASS [DISPLAY] ITEM ...>
<tame select_quality2: ITEM QUALITY [DISPLAY] [CODE-RETURN]...>
Example:
<tame form>
<tame ^buyselect2: test [Great Product] 5000 [Productive Tool] 6000 >
Please select your size.
<tame select_quality2: test size Small 1 Medium 2>
<tame ^buysubmit: Purchase selected items>
<tame /form>This example will present a drop down box. When the customer activates the list "Great Product" and "Productive Tool" will appear. Once an item is selected, the appropriate item code "5000" or "6000" will be sent to the system for processing. Because of the CLASS agreement, when the customer selects a size, it is associated with the product chosen above and appears in the description along with the product selection. Note the use of [ ] to enclose arguments with embedded spaces.
We have attempted to provide for every buying situation, but shop owners are creative and at times have unique ways of doing business. The software can support these special situations. You can construct your own buy buttons by submitting form variables in the following standard formats. Using the HTML form input tag, <input type=TYPE name=NAME value=VALUE>, you can construct the names and values. Use this format and submit information using any form submission tag, such as ^buysubmit, ^buysubmitloop, goto and submit. The page to which the information is submitted must be a tame page containing <tame tamehead>.
There must be a name ending in .item within the form, to put the product into the cart. All of the other attributes are optional. All attributes with the same CLASS as the CLASS.item will be associated with that item in the cart. Attributes submitted using this feature override the same attributes that are in the current product database. In fact, it is possible to eliminate the product database entirely with this technique. However, that is only feasible for very small product listings.
Example:
<h2>Buy A Computer System<br>And Choose a Free Gift</h2>
<tame>
cart_panel:
HEADER
TITLE [This is {your} basket]
COLUMNS remove item qty descrip price amount
BUTTONS checkstand clear redo
</tame>
<tame form>
<tame hidden: computer.item computer>
<tame hidden: computer.qty 1>
<tame hidden: computer.maxqty 1>
<tame hidden: computer.price 1195.00>
<tame hidden: computer.descrip A super computer>
Select Computer Color: <tame select: computer.Color.quality Black Blue Almond>
<p>
<tame hidden: freebie.item freebie>
<tame hidden: freebie.no_redo t>
<tame hidden: freebie.descrip Free Promotional item>
Select a Free Gift: <tame select: freebie.Gift.quality Clock [Mouse Pad] Pen>
<p>
<tame ^buysubmitloop: See Your Order>
In this example a computer and free gift are presented on the catalog page without the use of a product database. The information about the product is hidden. The customer sees a color selection, a free gift selection and a ^buy button. Once the choices are made and the ^buy button is selected, a shopping cart containing the items will appear at the top of the screen.
Buy buttons and the associated selection and quality options are the basis of the shopping system. For more information on the syntax of these tags see the glossary. In addition, we provide a variety of examples in the Example Shop that provide additional support for these features.
copyright 1997 ClickShop Com
created: Seth Russell
edited: Katherine C. Davis 10/14/97