Web Portal
From Orderwave 2.0 Documentation
CSS
Store Template
You can use your own template in your store pages. The default Orderwave Store templatecontains a section with id #contentOuter. This section contains the following code in the Orderwave interface :
<div align="left" id="contentOuter">
{~content_logo}
<div id="contentInner">
<div id="pageContent">
<div class="widthFix">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="200" valign="top">
<div class="functionBox">
<div style="margin:0 0 20px 0;">
{~content_cartInfo}
</div>
<div style="margin:0 0 20px 0;">
{~content_searchForm}
</div>
<div style="margin:0 0 20px 0;">
{~store_categories}
</div>
</div>
</td>
<td valign="top" class="padLeft">
{~main_content}
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
Explanation: In the above, code, the {~content_cartInfo}, {~content_searchForm}, {~store_categories} and the {~main_content} is replaced by the default content of the tags as shown below:
<div align="left" id="contentOuter">
<h1>LakshmiStore</h1>
<div id="contentInner">
<div id="pageContent">
<div class="widthFix">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="200" valign="top">
<div class="functionBox">
<div style="margin:0 0 20px 0;">
<div><span style="float:right;"><a href="?action=viewCart">View cart</a></span>
0 Items, $0.00
</div>
</div>
<div style="margin:0 0 20px 0;">
<form action="" method="get"><input type="hidden" name="action" value="viewAllProducts" />
<input type="text" name="keyword" id="keyword" value="" />
<input type="submit" id="searchSubmit" class="navButton" value="Go" />
</form>
</div>
<div style="margin:0 0 20px 0;">
<ul class="ow_categories ow_categoriesFirst" id="ow_cartCat-0"></ul>
</div>
</div>
</td>
<td valign="top" class="padLeft">
<h2>Welcome to your Orderwave Web Portal</h2> <p>The content you're reading right now has been generated by
the Orderwave content engine - a powerful example of the template tools in your Orderwave Web Portal. Find
this content in your Web Portal administration and edit it to your liking.</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
Explanation: The {~main_content} tag is by default replaced by:
<h2>Welcome to your Orderwave Web Portal</h2> <p>The content you're reading right now has been generated by
the Orderwave content engine - a powerful example of the template tools in your Orderwave Web Portal. Find
this content in your Web Portal administration and edit it to your liking.</p>
The #pageContent contains the table which contains all the contents being displayed on your web page including the left side bar. This table has two columns, the first contains the left side bar and the second column uses the CSS class ".padLeft". The width, padding, margin etc. of these columns have been set as shown above. The left side bar consists of a section using the ".functionBox" CSS class. You can use this class to set the font, background, color, etc. styles for the left side bar using this css class. The ".padLeft" table column is the section where the {~main_content} tag must be used (refer the {~main_content} under Web Portal tags for explanation). The content of the ".padLeft" will change depending on the page you are visiting.
Let us take into account as an example, the template of Video_Gammas online store. The Video_Gammas store template contains the main section with id #container. The #container section consists of a section containing the content of the page with id #content, a section containing the footer with id #footer and a section containing the official seals of Orderwave, McAfee Secure and Network Solutions.
The #content section contains the store logo image on the left and the customer's login status on the upper right hand corner. You can change the store logo image to contain your store logo.
Below the store logo, the #content section contains a section with id #navBar and a section with id #colContent.
The #navBar section contains a table similar to the one given below.
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="17" height="48">
<img src="img/slice1_01.png" width="17" height="48" alt="">
</td>
<td id="navContent" height="48">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<a href="?action=homePage">Home</a>
</td>
<td align="center">
<a href="?action=viewAllProducts">See Items</a>
</td>
<td align="center">
<a href="?action=viewCart">View Your Shopping Cart</a>
</td>
<td align="center">
<a href="#">Proceed To Checkout</a>
</td>
</tr>
</table>
</td>
<td width="14" height="48">
<img src="img/slice1_03.png" width="14" height="48" alt="">
</td>
</tr>
</table>
The #navContent table cell contains the table that contains the links to your web pages (Home, See Items, View Your Shopping Cart and Proceed To Checkout). You can easily change these to display links to your store pages and also change the verbiage accordingly. The background color of the #navBar section can also be changed by changing the images (img/slice1_01.png and img/slice1_03.png) in the above table and also by specifying the "background-image" for the #navBar and the #navContent section that repeats horizontally.
Example: The #navBar and #navContent may have the following CSS style specifications:
#navBar {
margin:10px 0 10px 0;
}
#navBar #navContent {
background-image:url('../img/slice1_02.png');
background-repeat:repeat-x;
height:48px;
}
You can change the appearance of the links in the #navContent by specifying the font properties (font family, boldness, size, and the style of a text). Also, the links can be styled differently depending on their state (a:link, a:visited, a:hover and a:active).
Example: The #navContent page links can be styled as shown below
#navContent a {
font-size:20px;
font-weight:bold;
color:white;
margin:0;
text-decoration:none;
}
The #colContent contains a table that contains two columns, the first column contains the left side navigation bar and the second column contains the main contents of your store pages, that changes depending on the page your are visiting. You can change the width, padding, alignment etc. of these columns by specifying the style for the <td></td> HTML tags.
The first column in the table in #colContent contains sections having class ".sideMenu". These section further have a ".hdr" section, containing the header information and the ".cnt" section containing the content information.
Example: The ".sideMenu" section may contain the following:
<div class="sideMenu">
<div class="hdr">Your Cart</div>
<div class="cnt">
<span style="float:right;"><a href="?action=viewCart">View cart</a></span>
0 Items, $0.00
</div>
</div>
<div class="sideMenu">
<div class="hdr">Search</div>
<div class="cnt">
<form action="" method="get">
<input type="hidden" name="action" value="viewAllProducts" />
<input type="text" name="keyword" id="keyword" value="" />
<input type="submit" id="searchSubmit" class="navButton" value="Go" />
</form>
</div>
</div>
</div>
The ".sideMenu", ".hdr" and the ".cnt" sections can be customized as shown in the below example. Also, the links, the table cells, the input text box styles can be customized as shown in the example below.
Example:
td, input, select, textarea {
font-family:"Segoe UI",Arial,Helvetica,sans-serif;
font-size:14px;
}
form {
margin:0;
}
a:link {
color:red;
text-decoration:none;
}
a:visited {
color:red;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:underline;
}
Explanation: The a:link settings renders all the links to appear red in color. The a:visited settings renders the visited links to be red in
color. You can change this color, to say blue, so that your customers know if they have visited that link already or not. The a:hover settings
renders the links red and also underlines your links when you point the curser to the link.
.sideMenu {
width:250px;
margin:0 0 10px 0;
}
Explanation: You can add as many ".sideMenu" sections you want to your page in the left side bar and you can set the style of all
the ".sideMenu" sections by setting the style for the ".sideMenu" css class in your CSS file.
.sideMenu .hdr {
background-image:url('../img/tileRed.png');
background-position:bottom left;
background-repeat:repeat-x;
background-color:#ff0404;
color:white;
font-weight:bold;
font-size:14px;
padding:4px;
}
.sideMenu .cnt {
padding:10px;
background-image:url('../img/tileGray.png');
background-position:bottom left;
background-repeat:repeat-x;
background-color:#c6c6c6;
}
Explanation: In this example, the background color of the ".hdr" and the ".cnt" section in the ".sideMenu" section is being set. A back
ground image is being set to repeat horizontally. The font styles of the header message is also being set.
Main Content section of your store pages
In the default Orderwave Store Pages, the second column in the table in #pageContent uses the ".ow_padLeft" css class. It contains the main content of your pages ( as explained in the Store template section). In the ".ow_padLeft", you must include the Web Portal tag, {~main_content} (refer to the {~main_content} section under Web Portal Tags for more details).
- View All Products Page: The main content in this page may contain the following HTML
<div class="ow_listResult">2 Products located. Viewing 1 through 2</div>
<div class="ow_widthFix">
<table class="ow_productResultTable" width="100%" cellpadding="4" cellspacing="0" border="0">
<tr>
<td valign="top" width="2%">
<table class="ow_productTableSmall" width="100%" cellpadding="1" cellspacing="0" border="0">
<tr>
<td width="65" valign="top">
<a href="?action=viewItemDetail&itemNumber=GIFTCARD2">
<span class="ow_productImageSpan">
<img class="ow_productImage" src="storeProductImages/10908_60.jpg" />
</span>
</a>
</td>
<td valign="top" style="padding-left:6px;">
<a href="?action=viewItemDetail&itemNumber=GIFTCARD2" class="ow_itemDescriptionSmall">
Gift Card
</a>
<div>Product code: GIFTCARD2</div>
<div>Price: --</div>
</td>
</tr>
</table>
</td>
<td valign="top" width="2%">
<table class="ow_productTableSmall" width="100%" cellpadding="1" cellspacing="0" border="0">
<tr>
<td width="65" valign="top">
<a href="?action=viewItemDetail&itemNumber=XBOX-H3GD">
<span class="ow_productImageSpan">
<img class="ow_productImage"src="storeProductImages/10906_60.jpg" />
</span>
</a>
</td>
<td valign="top" style="padding-left:6px;">
<a href="?action=viewItemDetail&itemNumber=XBOX-H3GD" class="ow_itemDescriptionSmall">
Xbox 360 - Halo 3 Guide
</a>
<div>Product code: XBOX-H3GD</div>
<div>Price: $19.99</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="ow_skipLinksHolder">
<form name="ow_goToPage" action="javascript:void(0);" style="float:right;display:inline;margin-top:-5px;
" onsubmit="document.location.href='default?action=viewAllProducts&s='+( (parseInt($F('goToPage-1234')) > 2 ) ? ((2 - 1) * 20 ) :
((parseInt($F('goToPage-1234'))-1) * 20) );">
Go to page:
<input type="text" name="goToPage" id="goToPage-1234" value="" onkeyup="onlyNums(this)" class="vam" style="width:50px;" />
<input type="submit" class="ow_formButton" name="ow_gtpGo" value="Go" />
</form>
<div class="ow_skipLinks">
<span class="ow_selectedPage">Previous</span>
<span class="ow_selectedPage"><strong>1</strong></span>
<a class="ow_pageNumber" href="default?action=viewAllProducts&s=20">2</a>
<a class="ow_skip" href="default?action=viewAllProducts&s=20">Next</a>
</div>
</div>
The View All Products Page contains three main sections. The first section uses the ".ow_listResult" css class. You can change the font styles, color etc. by specifying the style specifications for this class. It contains a table that uses the ".ow_productResultTable" css class. This table displays the prouduct images with their short descriptions that act as links to the View All Products Page. You can change the font settings, the background color, give a border to the table, etc. using the ".ow_productResultTable" css class. The View All Products Page also contains a section that uses the ".ow_skipLinksHolder" css class and the ".ow_skipLinks". Using this class, you can set the back ground color, font or other style specifications of the links provided at the bottom of the page for pagination purposes.
- View Item Detail Page: The main content in this page may contain the following HTML
<table class="ow_productTableLarge" width="100%" cellpadding="1" cellspacing="0" border="0">
<tr>
<td width="225" valign="top">
<span class="ow_productImageSpan">
<img class="ow_productImage" src="storeProductImages/10908_220.jpg" />
</span>
</td>
<td valign="top" style="padding-left:6px;">
<div class="ow_itemDescriptionMedium">Gift Card</div>
<div>Product code: GIFTCARD2</div>
<div>Price: --</div>
<div></div>
<form name="ow_addItemForm" class="ow_addItemForm" method="get">
<input type="hidden" name="action" value="addItem" />
<input type="hidden" name="item_number" value="GIFTCARD2" />
<label for="ow_addToCartQuantity">Quantity:</label>
<input type="text" name="quantity" id="ow_addToCartQuantity" class="ow_addToCartQuantity" value="1" />
<input type="submit" id="ow_addToCartButton" class="ow_formButton" value="Add to cart" />
</form>
</td>
</tr>
</table>
In the above example, the View Item Detail Page: contains a table that displays the details of a product. This table uses the ".ow_productTableLarge" css class. Using this class, you can change the font styles, background color, give a border to the table, etc. The image of the product uses the ".ow_productImage" css class for which you can set the size specifications, boder, etc. to the image. Using the ".ow_itemDescriptionMedium" class, you can set the font, color specifications to the description of the product. Using the ".ow_formButton" css class and its element ID #ow_addToCartButton, you can change the appearance of the "Add to cart" button.
- View Cart Page: The main content of this page contains the following by default
<form id="ow_checkoutForm" name="ow_checkoutForm" method="post" action="portal.0?action=saveCheckoutParams">
<input type="hidden" value="alterCart" name="action"/>
<div id="ow_cartDiv" style="width: 100%;">
<table id="ow_cartTable" class="ow_cartTable" cellspacing="0" cellpadding="4" border="0" width="100%">
<tbody>
<tr class="ow_cartHeaderRow">
<th class="ow_posLeft" colspan="2">Item(s) in your cart</th>
<th class="ow_right">Qty</th>
<th class="ow_right">Price</th>
<th class="ow_right">Ext.</th>
<th class="ow_posRight"> </th>
</tr>
<tr class="ow_cartOptionsRow">
<td class="ow_posLeft ow_right" colspan="4">
Shipping:
<a onclick="lbOn('portal.1');" href="javascript:void(0);">Enter your zip code to calculate</a>
</td>
<td class="ow_right">$0.00</td>
<td class="ow_center ow_posRight"> </td>
</tr>
<tr class="ow_cartOptionsRow">
<td class="ow_posLeft ow_right" colspan="4">
Coupon Code:
<input name="couponCode"/>
<input id="ow_saveCouponButton" class="ow_formButton" type="button" onclick="$('ow_checkoutForm').submit();" value="Save
coupon"/>
</td>
<td class="ow_right">$0.00</td>
<td class="ow_center ow_posRight"> </td>
</tr>
<tr class="ow_cartOptionsRow">
<td class="ow_posLeft ow_right" colspan="4">Sales Tax:</td>
<td class="ow_right">$0.00</td>
<td class="ow_center ow_posRight"> </td>
</tr>
<tr class="ow_cartOptionsRow">
<td class="ow_posLeft ow_right" colspan="4">Shopping total:</td>
<td class="ow_right">$0.00</td>
<td class="ow_center ow_posRight"> </td>
</tr>
</tbody>
</table>
<div class="ow_cartButtons">
<input id="ow_updateCartButton" class="ow_formButton" type="submit" value="Update shopping cart"/>
<input id="ow_proceedToCheckoutButton" class="ow_formButton" type="submit" value="Proceed to checkout"/>
</div>
</div>
</form>
In the View Cart Page, the table with element ID #ow_cartTable uses the css class, ".ow_cartTable". The first row in this table uses the css class ".ow_cartHeaderRow". By default, this class has been used to set the font-size, color, background color of the header and the text alignment of the header. The table rows use the class ".ow_cartOptionsRow" css class an the form buttons use the "ow_formButton" css class. This can be used to set the width, font, background color, etc. of the buttons. The default css style settings for the header row of this table is as shown below.
.ow_cartTable .ow_cartHeaderRow th {
background-color:red;
color:white;
font-size:14px;
text-align:left;
}
Explanation: By default, the header has a background-color of red and the font color is white. If you want to change the background color to
blue and the font color to black, all you have to do is the following:
.ow_cartTable .ow_cartHeaderRow th {
background-color:blue;
color:black;
font-size:14px;
text-align:left;
}
- Billing/Shipping Address Page: The main content of this page is the following by default
<form action="portal.0?action=step2&ck=abcdef" method="post" name="ow_checkoutForm"
id="ow_checkoutForm">
<input type="hidden" id="ow_billingShippingAddress" name="action" value="billingShippingAddress" />
<input type="hidden" id="ow_trkBillingShippingAddress" name="ow_trkBillingShippingAddress" value="" />
<table id="ow_billingAddressShippingAddressTable" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="50%">
<div id="ow_billingAddressHeader">Enter your billing address:</div>
<table id="ow_billingAddressTable" width="100%" cellpadding="4" cellspacing="0" border="0">
<tbody id="ow_billingAddressFields">
<tr>
<td><label for="ow_billingAddress_firstName">First name:</label></td>
<td><input type="text" id="ow_billingAddress_firstName" name="ow_billingAddress_firstName" value="" /></td>
</tr>
<tr>
<td><label for="ow_billingAddress_lastName">Last name:</label></td>
<td><input type="text" id="ow_billingAddress_lastName" name="ow_billingAddress_lastName" value="" /></td>
</tr>
<tr>
<td><label for="ow_billingAddress_address1">Address 1:</label></td>
<td><input type="text" id="ow_billingAddress_address1" name="ow_billingAddress_address1" value="" /></td>
</tr>
<tr>
<td><label for="ow_billingAddress_address2">Address 2:</label></td>
<td><input type="text" id="ow_billingAddress_address2" name="ow_billingAddress_address2" value="" /></td>
</tr>
<tr>
<td><label for="ow_billingAddress_address3">Address 3:</label></td>
<td><input type="text" id="ow_billingAddress_address3" name="ow_billingAddress_address3" value="" /></td>
</tr>
<tr>
<td><label for="ow_billingAddress_city">City:</label></td>
<td><input type="text" id="ow_billingAddress_city" name="ow_billingAddress_city" value="" /></td>
</tr>
<tr>
<td><label for="ow_billingAddress_state">State:</label></td>
<td>
<span id="ow_billingFfFi"></span>
<select id="ow_billingAddress_state" name="ow_billingAddress_state" onchange="if($F(this)=='freeFlow') { Element.remove
(this);$('ow_billingFfFi').update('<input type=text name=ow_billingAddress_state id=ow_billingAddress_state />');
$('ow_billingAddress_state').focus(); }">
<option value="--">--</option>
<optgroup label="USA">
<option value="AL" selected="selected">AL</option>
<option value="AK">AK</option>
<option value="AS">AS</option>
:
:
:
<option value="AP">AP</option>
</optgroup>
<optgroup label="CANADA">
<option value="ON">ON</option>
<option value="QC">QC</option>
<option value="NS">NS</option>
:
:
:
<option value="NL">NL</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>
<label for="ow_billingAddress_zip">Zip code:</label>
</td>
<td>
<input type="text" id="ow_billingAddress_zip" name="ow_billingAddress_zip" value="" />
</td>
</tr>
<tr>
<td>
<label for="ow_billingAddress_country">Country:</label>
</td>
<td>
<select id="ow_billingAddress_country" name="ow_billingAddress_country">
<option value="CA">CANADA</option>
<option value="US" selected="selected">USA</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="ow_billingAddress_phone">Phone number:</label>
</td>
<td>
<input type="text" id="ow_billingAddress_phone" name="ow_billingAddress_phone" value="" />
</td>
</tr>
<tr>
<td>
<label for="ow_billingAddress_email">Email address:</label>
</td>
<td>
<input type="text" id="ow_billingAddress_email" name="ow_billingAddress_email" value="" />
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" width="50%">
<div id="ow_shippingAddressHeader">Enter your shipping address:</div>
<table id="ow_shippingAddressTable" width="100%" cellpadding="4" cellspacing="0" border="0">
<tbody id="ow_shippingAddressFields" style="display:none;">
<tr>
<td>
<label for="ow_shippingAddress_firstName">First name:</label>
</td>
<td>
<input type="text" id="ow_shippingAddress_firstName" name="ow_shippingAddress_firstName" value="" />
</td>
</tr>
<tr>
<td>
<label for="ow_shippingAddress_lastName">Last name:</label>
</td>
<td>
<input type="text" id="ow_shippingAddress_lastName" name="ow_shippingAddress_lastName" value="" />
</td>
</tr>
<tr>
<td>
<label for="ow_shippingAddress_address1">Address 1:</label>
</td>
<td>
<input type="text" id="ow_shippingAddress_address1" name="ow_shippingAddress_address1" value="" />
</td>
</tr>
<tr>
<td>
<label for="ow_shippingAddress_address2">Address 2:</label>
</td>
<td>
<input type="text" id="ow_shippingAddress_address2" name="ow_shippingAddress_address2" value="" />
</td>
</tr>
<tr>
<td>
<label for="ow_shippingAddress_address3">Address 3:</label>
</td>
<td>
<input type="text" id="ow_shippingAddress_address3" name="ow_shippingAddress_address3" value="" />
</td>
</tr>
<tr>
<td>
<label for="ow_shippingAddress_city">City:</label>
</td>
<td>
<input type="text" id="ow_shippingAddress_city" name="ow_shippingAddress_city" value="" />
</td>
</tr>
<tr>
<td>
<label for="ow_shippingAddress_state">State:</label>
</td>
<td>
<span id="ow_shippingFfFi"></span>
<select id="ow_shippingAddress_state" name="ow_shippingAddress_state" onchange="if($F(this)=='freeFlow') {
Element.remove(this);$('ow_shippingFfFi').update('<input type=text name=ow_shippingAddress_state
id=ow_shippingAddress_state />'); $('ow_shippingAddress_state').focus(); }">
<option value="--">--</option>
<optgroup label="USA">
<option value="AL" selected="selected">AL</option>
<option value="AK">AK</option>
:
:
:
<option value="AP">AP</option>
</optgroup>
<optgroup label="CANADA">
<option value="ON">ON</option>
:
:
:
<option value="NL">NL</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>
<label for="ow_shippingAddress_zip">Zip code:</label>
</td>
<td>
<input type="text" id="ow_shippingAddress_zip" name="ow_shippingAddress_zip" value="" />
</td>
</tr>
<tr>
<td>
<label for="ow_shippingAddress_country">Country:</label>
</td>
<td>
<select id="ow_shippingAddress_country" name="ow_shippingAddress_country">
<option value="CA">CANADA</option>
<option value="US" selected="selected">USA</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="ow_shippingAddress_phone">Phone number:</label>
</td>
<td>
<input type="text" id="ow_shippingAddress_phone" name="ow_shippingAddress_phone" value="" />
</td>
</tr>
<tr>
<td>
<label for="ow_shippingAddress_email">Email address:</label>
</td>
<td>
<input type="text" id="ow_shippingAddress_email" name="ow_shippingAddress_email" value="" />
</td>
</tr>
</tbody>
<tr id="ow_shipToDiffAddressTr">
<td colspan="2">
<input type="checkbox" name="ow_shipToDiffAddress" id="ow_shipToDiffAddress" value="1" onclick="if (this.checked){
$('ow_shippingAddressFields').show();$('ow_shippingAddress_firstName').focus();} else
{$('ow_shippingAddressFields').hide(); }" />
<label style="cursor:pointer;" for="ow_shipToDiffAddress">Ship to a different address</label>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="ow_cartButtons">
<input type="submit" value="Continue" class="ow_formButton" id="ow_continueButton" />
</div>
</form>
In the Billing/Shipping Address Page, the main content is the "ow_checkoutForm" form. This form contains the #ow_billingAddressShippingAddressTable table. the style settings of this table can be done using the element ID #ow_billingAddressShippingAddressTable. The table has a two sections with IDs,#ow_billingAddressHeader and #ow_shippingAddressHeader. The background color, font styles, border,etc. of the these header sections can be set using the element IDs ,#ow_billingAddressHeader and #ow_shippingAddressHeader.
Example:
#ow_billingAddressHeader{
background-color: red;
font-size: 12px;
color: white;
}
#ow_shippingAddressHeader{
background-color: red;
font-size: 12px;
color: white;
}
Explanation: If you want to set red as the background color of the Header messages of the Billing and the Shipping Address tables and if you
want the font to be white in color, then, you must set the CSS for the element IDs ''#ow_billingAddressHeader''
and ''#ow_shippingAddressHeader'' as shown here.
- Review Order Page: The main content of this page may contain
<form action="portal.0?action=step3&ck=abcdef" method="post"
name="ow_checkoutForm" id="ow_checkoutForm">
<div id="ow_reviewAddressesDiv">
<input type="hidden" name="action" id="ow_reviewOrderAction" value="reviewOrder" />
<table id="ow_reviewAddressesTable" width="100%" cellpadding="4" cellspacing="0" border="0">
<tr>
<td width="50%">
<div class="ow_reviewAddressHeader" id="ow_billingAddressReviewHeader">Billing address:</div>
<span id="ow_editBillingReviewAddress" class="ow_editAddressSpan">
<a href="?action=step2&ck=abcdef">Edit</a>
</span>
<div>LAK KUM</div>
<div>20102 S VERMONT AVE</div>
<div>TORRANCE CA 90502</div>
<div>US</div>
<div>310-217-4748</div>
<div>lamik@4icc.com</div>
</td>
<td width="50%">
<div class="ow_reviewAddressHeader" id="ow_shippingAddressReviewHeader">Shipping address:</div>
<span id="ow_editBillingReviewAddress" class="ow_editAddressSpan">
<a href="?action=step2&ck=abcdef">Edit</a>
</span>
<div>LAK KUM</div>
<div>20102 S VERMONT AVE</div>
<div>TORRANCE CA 90502</div>
<div>US</div>
<div>310-217-4748</div>
<div>lamik@4icc.com</div>
</td>
</tr>
</table>
</div>
<div id="ow_reviewCartContentsDiv">
<input type="hidden" name="action" value="alterCart" />
<div id="ow_cartDiv" style="width:100%;">
<table id="ow_cartTable" class="ow_cartTable" width="100%" cellpadding="4" cellspacing="0" border="0">
<tr class="ow_cartHeaderRow">
<th class="ow_posLeft">Item(s) in your cart</th>
<th class="ow_right">Qty</th>
<th class="ow_right">Price</th>
<th class="ow_right">Ext.</th>
<th class="ow_posRight"> </th>
</tr>
<tr class="ow_cartProductRow">
<td class="ow_cartProductInfo ow_posLeft">
<div class="ow_cartProdDesc">Standard Kit 1</div>
</td>
<td class="ow_right">
<input type="text" name="adjustQuantity-abcd" id="ow_adjustQuantity-abcd"
class="ow_adjustQuantity" value="1" style="width:30px;" />
</td>
<td class="ow_right">$0.00</td>
<td class="ow_right">$0.00</td>
<td class="ow_center ow_posRight">
<a href="portal.0?action=removeItem&i=1234">Remove item</a>
</td>
</tr>
<tr class="ow_cartOptionsRow">
<td class="ow_posLeft ow_right" colspan="3">FedEx Ground</td>
<td class="ow_right">$5.99</td>
<td class="ow_center ow_posRight"> </td>
</tr>
<tr class="ow_cartOptionsRow">
<td class="ow_posLeft ow_right" colspan="3">
Coupon Code:
<input name="couponCode" />
<input type="button" value="Save coupon" class="ow_formButton" id="ow_saveCouponButton"
onclick="$('ow_checkoutForm').submit();" />
</td>
<td class="ow_right">$0.00</td>
<td class="ow_center ow_posRight"> </td>
</tr>
<tr class="ow_cartOptionsRow">
<td class="ow_posLeft ow_right" colspan="3">Sales Tax:</td>
<td class="ow_right">$0.49</td>
<td class="ow_center ow_posRight"> </td>
</tr>
<tr class="ow_cartOptionsRow">
<td class="ow_posLeft ow_right" colspan="3">Shopping total:</td>
<td class="ow_right">$6.48</td>
<td class="ow_center ow_posRight"> </td>
</tr>
</table>
</div>
</div>
<div class="ow_cartButtons">
<input type="submit" value="Continue" class="ow_formButton" id="ow_continueButton" />
</div>
</form>
The "ow_checkoutForm" form contains the #ow_reviewAddressesTable table. This table contains two sections #ow_billingAddressReviewHeader and #ow_shippingAddressReviewHeader that contains the header of the Billing Address table and the Shipping Address table. Both the headers use the ".ow_reviewAddressHeader" css class. You can set the background color, font, etc for these headers using the ".ow_reviewAddressHeader" css class or you can set different styles to each header to make them appear differently, by using their element IDs, #ow_billingAddressReviewHeader and #ow_shippingAddressReviewHeader along with their CSS class. An example is shown below:
Example:
.ow_reviewAddressHeader{
font-size:12px;
text-align:left;
}
Explanation: The font-size and the text-align properties of both the Billing Header and the Shipping Header is set using
the '''".ow_reviewAddressHeader"''' CSS class.
#ow_billingAddressReviewHeader{
background-color: grey;
color:red;
}
Explanation: The background-color and the color property of the Billing Header can be set individually using its element
ID, ''#ow_billingAddressReviewHeader''. The same is true to the Shipping Header as shown below.
#ow_shippingAddressReviewHeader{
background-color: blue;
color:grey;
}
In the #ow_cartTable, there is a header row, using the CSS class ".ow_cartHeaderRow". You can set the background color of the Cart table header row by using this CSS class as shown below:
Example:
.ow_cartHeaderRow{
background-color: red;
font-size:14px;
color:white;
}
- Payment Information Page: The main content of this page is the following by default
<form action="portal.0?action=step4&ck=abcdef" method="post" name="ow_checkoutForm"
id="ow_checkoutForm">
<div id="ow_paymentSectionDiv">
<input type="hidden" name="action" id="ow_paymentAction" value="paymentMethodAdd" />
<table id="ow_paymentTable" cellpadding="4" cellspacing="0" border="0">
<tbody id="ow_paymentFields">
<tr>
<td>
<label for="ow_paymentType">Payment type:</label>
</td>
<td>
<select name="ow_paymentType" id="ow_paymentType" onchange="paymentFormSet($F(this));">
<option value="Visa">Visa</option>
<option value="MasterCard">MasterCard</option>
<option value="American Express">American Express</option>
<option value="Discover">Discover</option>
<option value="ECheck">ECheck</option>
<option value="Gift Card">Gift Card</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="ow_accountNumber">Account number:</label>
</td>
<td>
<input type="text" name="ow_accountNumber" id="ow_accountNumber" value="" onkeyup="onlyNums(this);" maxlength="16" />
</td>
</tr>
<tr class="ow_ccRelRow ow_paymentRow">
<td>
<label for="ow_expiresMonth">Expires:</label>
</td>
<td>
<select name="ow_expiresMonth" id="ow_expiresMonth">
<option value="01">01 - Jan</option>
<option value="02">02 - Feb</option>
:
:
:
<option value="2025">2025</option>
</select>
</td>
</tr>
<tr class="ow_ccRelRow ow_paymentRow">
<td>
<label for="ow_ccCvv">CVV code:</label>
</td>
<td>
<input type="text" name="ow_ccCvv" id="ow_ccCvv" value="" />
<a href="javascript:void(0);" onclick="lbOn('portal.3');">What is a CVV?</a>
</td>
</tr>
<tr class="ow_checkRelRow ow_paymentRow">
<td>
<label for="ow_routingNumber">Routing number:</label>
</td>
<td>
<input type="text" name="ow_routingNumber" id="ow_routingNumber" value="" />
</td>
</tr>
<tr class="ow_checkRelRow ow_paymentRow">
<td>
<label for="ow_branchName">Branch name:</label>
</td>
<td>
<input type="text" name="ow_branchName" id="ow_branchName" value="" />
</td>
</tr>
<tr class="ow_GcRelRow ow_paymentRow">
<td>
<label for="ow_paymentEmailAddress">Email address:</label>
</td>
<td>
<input type="text" name="ow_paymentEmailAddress" id="ow_paymentEmailAddress" value="" />
</td>
</tr>
</tbody>
</table>
</div>
<script> paymentFormSet($F('ow_paymentType')); </script>
<div class="ow_cartButtons">
<input type="submit" value="Continue" class="ow_formButton" id="ow_continueButton" />
</div>
</form>
The Payment Information Page, contains the "ow_checkoutForm" form. This form contains the #ow_paymentTable table. You can set the font, background etc. styles for the table using its element ID.
- Done Page: The Web Portal tag {~content_donePage} (refer the {~content_donePage} under Web Portal Tags for more explanation)contains the following by default in Orderwave.
<h2>Thank you for your order!</h2> <p>Your order number is {~orderNumber}.</p>
The above HTML is rendered in your store pages instead of the {~content_donePage}. You can customize the header by setting the style specifications of the <h2></h2> tag. You can customize the message body by setting the style specifications of the <p></p> tags as shown below:
Example:
h2{
background-image:('img/tileRed.png');
background-repeat:repeat-x;
color: white;
}
p{
font-family:"Segoe UI",Arial,Helvetica,sans-serif;
font-size:12px;
}
