G34 Training Ecommerce Purchase Component

The eCommerce Purchasing component is used to make an online purchase of a training course or package. A single FORM element is used for the entire component.

Optional and Required Elements:

Optional title bar with an optional link
Required Product ID Column
Optional Duration Column
Zero or more prices each with a header and an optional GSA link
Zero or more classlist select boxes
- For packages each classlist should have a product ID and Duration
- Optional 'View Center Info', 'Check Availability' and 'View Course Description' buttons for each classlist
- An optional 'Request a Class' button for each classlist. (where there is only one classlist this button can be displayed below the main table)
Optional 'Add to Shopping Cart' button (can be either inline with the 'View Center' & 'Check Availability' buttons or on a new row below when dealing with packages.
Optional custom message displayed at the base of the table such as 'Please contact...'
Optional custom message and optional call to action button after the table such as 'Request a class'.

Optional Linked Title

Product ID	Duration	Price
SL-110	5 days	$1034.00 GSA Approved
View Course Description

Copy the code below and paste into your text editor.

<div class="g34 g34v0">
<div class="g34w1">

<form action="{linkplaceholder}" method="post">
<h6><a href="{placeholder}">Optional Linked Title</a></h6>
<table cellspacing="1">

<tr>
<th>Product ID</th>
<th>Duration</th>
<th>Price</th>
</tr>

<tr>
<td>SL-110</td>
<td>5 days</td>
<td>$1034.00 <a href="{placeholder}">GSA Approved</a></td>
</tr>

<tr>
<td colspan="3">
<select multiple="multiple">
<option>-- Select a class from the list --</option>
<option>00-MON-2003 to 11-MON-2003(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
</select>

<div class="g34xlink">
<a href="{placeholder}" class="popup full">View Course Description</a>
</div>

</td>
</tr>

</table>

</form>
</div>
</div>

No Templates Reference this

This example shows the optional title without a link, as well as multiple class list rows. Note that each time a new class list ID/Price row is repeated, the table header row is repeated as well, to help users keep track of the various columns.

This example also shows the optional custom message, displayed at the base of the table. When there is no 'Add to Shopping Cart' used, this can be used to communicate what a user may do to order or coordinate the course(s).

Optional Title

Product ID	Price A	Price B
SL-110	$1034.00 GSA Approved	$2034.00 GSA Approved
View Course Description
Product ID	Price A	Price B
SL-110	$1034.00 GSA Approved	$2034.00 GSA Approved
View Course Description
Please contact a Sun Training Representative to order and coordinate the scheduling of this course.

Copy the code below and paste into your text editor.

<div class="g34 g34v0">
<div class="g34w1">

<form action="{linkplaceholder}" method="post">
<h6>Optional Title</h6>
<table cellspacing="1">

<tr>
<th>Product ID</th>
<th>Price A</th>
<th>Price B</th>
</tr>

<tr>
<td>SL-110</td>
<td>$1034.00 <a href="{placeholder}">GSA Approved</a></td>
<td>$2034.00 <a href="{placeholder}">GSA Approved</a></td>
</tr>

<tr>
<td colspan="3">
<select size="6">
<option>-- Select a class from the list --</option>
<option>00-MON-2003 to 11-MON-2003(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
</select>

<div class="g34xlink">
<a href="{placeholder}" class="popup full">View Course Description</a>
</div>

</td>
</tr>

<tr>
<th>Product ID</th>
<th>Price A</th>
<th>Price B</th>
</tr>

<tr>
<td>SL-110</td>
<td>$1034.00 <a href="{placeholder}">GSA Approved</a></td>
<td>$2034.00 <a href="{placeholder}">GSA Approved</a></td>
</tr>

<tr>
<td colspan="3">
<select size="6">
<option>-- Select a class from the list --</option>
<option>00-MON-2003 to 11-MON-2003(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
</select>

<div class="g34xlink">
<a href="{placeholder}" class="popup full">View Course Description</a>
</div>

</td>
</tr>

<tr>
<td colspan="3" class="g34mssg">
<p>Please <a href="/training/contact_us/index.html">contact a Sun Training Representative</a> to order and coordinate the scheduling of this course.</p>
</td>
</tr>

</table>

</form>
</div>
</div>

No Templates Reference this

This example shows a simplified presentation of this component. It omits the optional H6 title and has no class list to select from.

No Templates Reference this

This example shows the optional extra message that appears after the table. This message may be simply a paragraph or may include a call to action input button as illustrated below.

Copy the code below and paste into your text editor.

No Templates Reference this

This example shows multiple package class lists without repeating ID/Price rows. It also illustrates the optional package class list id and duration.

Select Date(s)

Product ID	Price A	Price B
SL-110	$1034.00 GSA Approved	$2034.00 GSA Approved
Class List for Product ID: SA-210-S55 Duration: 4 days View Course Description
Class List for Product ID: SA-210-S55 Duration: 4 days View Course Description

Copy the code below and paste into your text editor.

<div class="g34 g34v0">
<div class="g34w1">

<form action="{linkplaceholder}" method="post">
<h6>Select Date(s)</h6>
<table cellspacing="1">

<tr>
<th>Product ID</th>
<th>Price A</th>
<th>Price B</th>
</tr>

<tr>
<td>SL-110</td>
<td>$1034.00 <a href="{placeholder}">GSA Approved</a></td>
<td>$2034.00 <a href="{placeholder}">GSA Approved</a></td>
</tr>

<h6 class="g34pid">Class List for Product ID: <span>SA-210-S55</span></h6>
<h6 class="g34xinfo">Duration: <span>4 days</span></h6>

<select size="6">
<option>-- Select a class from the list --</option>
<option>00-MON-2003 to 11-MON-2003(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
</select>

<div class="g34xlink">
<a href="{placeholder}" class="popup full">View Course Description</a>
</div>

</td>
</tr>

<h6 class="g34pid">Class List for Product ID: <span>SA-210-S55</span></h6>
<h6 class="g34xinfo">Duration: <span>4 days</span></h6>

<select size="6">
<option>-- Select a class from the list --</option>
<option>00-MON-2003 to 11-MON-2003(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
<option>00-MON-2004 to 11-MON-2005(City)</option>
</select>

<div class="g34xlink">
<a href="{placeholder}" class="popup full">View Course Description</a>
</div>

</td>
</tr>

</table>

</form>
</div>
</div>

No Templates Reference this

This example shows a paragraph replacing the select menu and informing users that there are no classes to chose from.

Optional Linked Title

Product ID	Duration	Price
SL-110	5 days	$1034.00 GSA Approved
There are currently no scheduled dates for this course. View Course Description
Please contact a Sun Training Representative to order and coordinate the scheduling of this course.

Copy the code below and paste into your text editor.

G34 Training Ecommerce Purchase

Include:

Definition

Usage

v0 eCommerce Purchasing

Optional and Required Elements:

Optional Linked Title

No Templates Reference this

v0 x1 Regular Title, Multiple Class List & Custom Message

Optional Title

No Templates Reference this

v0 x2 Simplified Example

No Templates Reference this

v0 x3 w/ Extra Message

Select a Course

No Templates Reference this

v0 x4 w/ Package Class List ID/Duration

Select Date(s)

Class List for Product ID: SA-210-S55

Duration: 4 days

Class List for Product ID: SA-210-S55

Duration: 4 days

No Templates Reference this

v0 x5 w/ No Course Dates

Optional Linked Title

No Templates Reference this