New Site Build Out

From i.STAR Help

1 Prepare layout mockup
2 Building Templates – Manual Method
3 Build Web Pages including standard build features
4 Featured Items
5 Standard Verbiage
6 Shopping Cart Buttons
7 Add any of the optional additional features, as directed.

Prepare layout mockup

When preparing mock up layout, keep in mind standard build features and any optional features in the design.

When building the mockup html page make sure the navigation is placed in an include. The layout should have an include for each section top, footer, left and right:

How to include files in templates and asp pages:

.asp pages: 		<!-- #include file ="includes/leftnav.inc" -->
.template pages: 	<isinclude name="includes/leftnav.inc">

Include one of these links in the footer:

Powered by iSTAR | E-Commerce POS Software
Powered by iSTAR | E-Commerce/Point of Sale

Name the file prototype.html

[edit]

Building Templates – Manual Method

You will need to create each template based on your initial prototype.html

See the list of all templates with corresponding plugins, includes and datasources [here].

NOTE: The datasource will ALWAYS need to be placed AT THE TOP of the page.

All dynamic pages should have the stylesheet and display attributes include in the <head></head> area.

stylesheet / header area
<isinclude name="stock\\displayattributes.include">
<link href="/istar/css/istar.css" rel="stylesheet" type="text/css">

[edit]

Build Web Pages including standard build features

[edit]

Keyword search

Put "enter keyword" in search text box that disappears on click.

Instructions and/or Code:

1. You may have to include it differently but generally insert this code at the top, to add the code to the [navigation].template where the search form present (you may be using topnav.template or search.template):

<script type="text/javascript" src="/js/jsSearch.js"></script>

Note the file location.

2. Here is what we have changed on the search form –

<form class="istar" action="istar.asp" method="get" id="searchForm" name=searchForm onSubmit="enhanceSearch(document.searchForm.view,document.searchForm.search);">
	<a href="istar.asp?a=67">Search</a>		
	<input name="a" type="hidden" value="29" />		
	<input name="search" type="hidden" value="" />
	<input name="view" id="view" type="text" size="20" value="enter keyword(s)" onClick="clearField(this)" />				
	<input type="image" src="images/view.gif" />
</form>

3. On the productsearch.template –

<h4><b>Search Results <span id="searchedTermValue"></span></b></h4> <script type="text/javascript">setDivValue();</script>
<isinclude name="/stock/search-istar.include">

4. In the AdvSearchForm.template :

Update your main include string to

<isinclude name="/custom/advSearch/searchForm.include">

5. Create the \custom\advSearch folder.

6. In the searchForm.include file (\custom\advSearch\ searchForm.include) :

Add a name attribute to the opening form tag

<form action="" method=POST onSubmit="return submitAdvSearch();" id="advSearchForm" name="advSearchForm">

In the same file replace the search input code with:

<input name="search" type="hidden" value="" />
<input name="view" id="view" type="text" size="30" onBlur="enhanceSearch(document.advSearchForm.view,document.advSearchForm.search);" />

- - Please remember to drop in the new jsSearch.js file whenever a newer zip file includes it.

[edit]

Search Wildcard

Append an asterisk to every term entered into search box to imply wildcard search.

See [this site] for an example.

Instructions and/or Code:

<script language="JavaScript">
function fixSearch(textBox) {
	searchText = textBox.value;

	if(searchText.length > 0) {
		var newSearchText;
		newSearchText = new String();

		searchWords = searchText.split(" ");
		for(i=0; i < searchWords.length; i++) {
			newSearchText += searchWords[i] + '* ';
		}

		newSearchText = newSearchText.substring(0, newSearchText.length - 1);
		textBox.value = newSearchText;
	}
}
</script>

<form action="istar.asp" method="get" name="psearch"  onSubmit="fixSearch(document.psearch.search);"><input type="hidden" name="a" value="29" />

<input type="text" name="search" size="15" value="item name" class="navForm" onfocus="javascript:document.psearch.search.value=;">

[edit]

Visible Shopping Cart

(# items, total $). Can use text that says shopping cart or icon to click to get to cart page with it.

Example:

Under \Inetpub\templates\isinclude\:

Create a ‘globaldata.include’ file to this location, so that ultimately having:

\Inetpub\templates\isinclude\globaldata.include.

The globaldata.include should contain the code below:

<!-- begin globaldata.include -->

<isdata source="istardatasources.categorylister" forceDept="1" prefix="'global'">
<isdata source="istardatasources.visibleshoppingcart" prefix="'global'">

<!-- end globaldata.include -->

In order to display the visible shopping cart use the code below on the page where you want to place it:

<a href="istar.asp?a=8">Shopping Cart <img src="images/cart_btn.gif" height="16" width="16" alt="View Cart" /></a>
<isif expr="$global_lineCount > 0">(<isvar name="$global_lineCount"> item<isif expr="$global_lineCount > 1">s</isif>) <isvar expr="formatprice($global_total)"></isif>

At the top of the template page add the code below to reference the globaldata.include:

<isinclude name="/isinclude/globaldata.include">

[edit]

Login/Logout dynamic link

Make sure the globaldata.include exists as mentioned for New_Site_Build_Out#Visible_Shopping_Cart and that it is referenced at the top of the page with:

<isinclude name="/isinclude/globaldata.include">

Add the code below, where you want the link to display:

<isif name="$global_isLoggedIn">
 <a href="istar.asp?a=53">My Account</a>
<iselse>
 <a href="istar.asp?a=11">Login</a>
</isif>

[edit]

Tell a Friend and Print Notes

Tell a Friend and Print Notes features on product detail page.

- - Get the Email_Print_ProductDetail.zip file from: here and unzip it

Instructions and/or Code:

1. Create the emailnotes/printnotes directory on the customer's server in the wwwroot folder. It should contain the following files:

emailnotes:

- emailTemplate.html - this is the email that will be received, html format, logo can be added or formatting can be changed, must have absolute links

- emailNotes-begin.asp - do not modify this file

- emailNotes-end.asp - this is the pop-up window

- emailNotes-sendMail.asp - this is the thank you page after the message is sent

printnotes:

- printNotes-begin.asp - do not modify this file

- printNotes-end.asp - this is the pop-up window; logo can be added or formatting can be changed

2. The product detail include needs to be moved to custom

3. The following changes need to be made to pdContent.include:

- add the form below to the top for the emailnotes to function:

<form name="notesinfo">
	<input type=hidden name="description" value="<isvar expr="htmlencode($productDescription)">">
	<input type=hidden name="productPicture" value="<isvar expr="htmlencode($productImage)">">
	<input type=hidden name="extdescription" value="<isvar expr="htmlencode($productExtendedDescription)">">
	<input type=hidden name="productId" value="<isvar expr="htmlencode($productId)">">
	<isif expr="$productLowPrice == $productHighPrice">
	<input type=hidden name="price" value="<isvar expr="formatprice($productLowPrice)">">
	<iselse>
	<input type=hidden name="price" value="<isvar expr="formatprice($productLowPrice)"> - <isvar expr="formatprice($productHighPrice)">">
	</isif>
</form>

- add the table below to the extended description to display the buttons for the two features

<table>
  <tr>
    <td>
      <a href="#" onClick="window.open('/emailnotes/emailnotes-begin.asp', '_blank', 'height=650, width=500, resizeable=yes, scrollbars=yes'); return false;">
        <img src="images/email_to_friend.jpg"  border="0" alt="">
      </a>
    </td>
    <td>
      <a href="#" onClick="window.open('/printnotes/printnotes-begin.asp', '_blank', 'height=650, width=500, resizeable=yes, scrollbars=yes'); return false;">
        <img src="images/printnotes_button.gif" border="0" alt="">
      </a>
    </td>
  </tr>
</table>

NOTE:

Make sure you update "domain.com" with appropriate domain name in all instances.

The 3 images below are not mandatory, they just make the layout of the mail sent out and print pop-up look nicer, they can be taken out, changed or replaced with better looking dividers.

- printlogo.gif should be the company logo so you would need to create one for each site.

- printgradient.gif would be made according to the site's colorscheme

- blackpixel.gif is just a black pixel

[edit]

Dynamic Meta Tags

On the product detail page to bring in the short description and/or the manufacturer for that one product, this can be used for keyword and/or description meta tag, as long as the Product Detail Data Source is above it:

<isvar name="$productDescription">
<isvar name="$manufacturerName ">

To bring in manufacturers and short description on the product detail page, this needs to be used:

<isdata source="IStarDataSources.CategoryLister" dept="$departmentCode" forceClass="1" forceSubclass="1" deptMfgOutput="1" prefix="'meta'">
<meta name="Keywords" content="<isloop name="$meta_deptManufacturers"><isvar name="$mfgName">, </isloop><isvar name="$productDescription">">

To display manufacturers on the browse page the following data source and loop is needed:

<isdata source="IStarDataSources.CategoryLister" forceClass="1" forceSubclass="1" deptMfgOutput="1" prefix="'meta'">
<meta name="Keywords" content="<isloop name="$meta_deptManufacturers"><isvar name="$mfgName">,  </isloop>">

To bring in Class names on browse pages, this will bring in the Class name if it exists.

For meta/keyword:

<meta name="keywords" content="<isif expr="varexists('$selectedClassName') == 1"><isvar name="$selectedClassName"></isif>" />

For title:

<title><isif expr="varexists('$selectedClassName') == 1"><isvar name="$selectedClassName"></isif></title>

To bring in Class and Subclass names on browse pages, this will bring in them in if they exist.

For meta/keyword:

<meta name="keywords" content="<isif expr="varexists('$selectedClassName') == 1"><isvar name="$selectedClassName"></isif><isif expr="varexists('$selectedSubclassName') == 1">, <isvar name="$selectedSubclassName"></isif>" />

For title:

<title><isif expr="varexists('$selectedClassName') == 1"><isvar name="$selectedClassName"></isif><isif expr="varexists('$selectedSubclassName') == 1">, <isvar name="$selectedSubclassName"></isif></title>

[edit]

Featured Items

Featured items can be displayed on the homepage through an iframe.

For that, a new template needs to be created, i.e. TopSeller.template and needs to be added with an action id, i.e. a=500

The TopSeller.template file would be an iconic product listing, so it will use the product search DataSource and Include, and unwanted components (Product Matches header, sort by, pagination) can be hidden using CSS. Here is an example of what the custom search template would contain:

<html>
<head>
  <base target="_top">
  <style>
  	.productMatchesHeader {display:none}
  	.browse-sort {display:none}
  	.pagination-top {display:none}
  	.pagination-bottom {display:none}
  </style>
</head>
<body>
<isinclude name="stock\\displayattributes.include">
<link href="/istar/css/istar.css" rel="stylesheet" type="text/css">
										
<isdata source="IStarDataSources.SearchProducts">
<isinclude name="/stock/search-istar.include">
</body>
</html>

IMPORTANT:

1.In order for the "Continue Shopping" button to work correctly after adding a featured item to the cart the DataSource in the TopSeller.template file needs to have the csurl specified.

i.e. <isdata source="IStarDataSources.SearchProducts" max="4" csurl="'index.asp'">

2. In order for all links inside the iframe to load on top istead of inside the frame itself make sure this code is inside the <head></head> tag: <base target="_top">

[edit]

Standard Verbiage

Add to templates as indicated below

ordernotes.template (a=47)

<h4>Order Notes</h4><h5>Please enter any special instructions for your order.</h5>

login.template (a=11)

<h4><b>Please log in to continue with checkout.</b></h4><h5>If you haven't shopped at {xxxxxxxx} before</b> log in as a new customer. If you've shopped in one of our stores before we may already have your information and you will just need to choose a password for your online shopping. </h5>

shippingaddresses.template (a=15)

<h5>Please select a shipping address for this order or enter a new address.</h5>

paymenttype.template (a=20)

<h5><b>Payment Information</b></h4><h5>Please enter your payment information.</h5>

confirmorder.template (a=22)

<h4><b>Confirm Order</b></h4><h5>Please confirm order is correct then click"PLACE YOUR ORDER" button. <br>If you wish to change any of the information in your order, you can do so by clicking the "UPDATE" button.</h5>

ProductSearch.template (a=29)

<h4><b>Search Results <span id="searchedTermValue"></span></b></h4> <script type="text/javascript">setDivValue();</script>
<isdata source="IStarDataSources.SearchProducts"><isinclude name="stock\\search-istar.include">

specials.template (a=28)

<h4><b>Specials</b></h4>

customerservice.template (a=30)

<h4><b>Customer Service</b></h4>

companyinfo.template (a=31)

<h4><b>Company Info</b></h4>

receipt.template (a=23)

<h4><b>Your order has been placed and an order confirmation has been sent to your email address. <br>This is your receipt.  Please print and save for your records. Please make sure all information on the screen comes out on the printed receipt</b></h4>

[edit]

Shopping Cart Buttons

File Name	Used on
add_payment_btn.gif	Payment Options (a=20)
add_to_cart.gif	Browse (a=3), Product Detail (a=6), Specials (a=28), Search (a=29)
add_to_wishlist.gif	Product Detail (a=6)
checkout_btn.gif	Shopping Cart (a=8)
confirm_order_update.gif	Confirm Order (a=22)
continue_btn.gif	Login (a=11), New Customer (a=13), New Shipping Address (a=16), Payment Type (a=20)
continue_shopping.gif	Shopping Cart (a=8)
delete.gif	Shopping Cart (a=8)
deleteitem.gif	Wish List (a=74)
email_to_friend.gif	Product Details (a=6) (exclude for version 5.1 and above)
enter_new_address_btn.gif	Shipping Addresses (a=15)
gotoproduct.gif	Product Details Email to Friend Email
in_store_add_cart.gif	Browse (a=3), Product Detail (a=6), Specials (a=28), Search (a=29)
next_page.gif	Browse (a=6), Specials (a=28), Search (a=29), Order Notes (a=47)
placeorder_btn.gif	Confirm Order (a=22)
prev_page.gif	Browse (a=6), Specials (a=28), Search (a=29),
printnotes_button.gif	Product Detail (a=6) (exclude for version 5.1 and above)
register.gif	Login (a=11)
saveitem.gif	Wish List (a=74)
update_cart_qty.gif	Shopping Cart (a=8)
use_this_address_btn.gif	Shipping Addresses (a=15)

[edit]

Add any of the optional additional features, as directed.

Gift registry requires the 3 templates and 3 registry buttons.

Retrieved from "http://manual.istarhelp.com/wiki/index.php/New_Site_Build_Out"

New Site Build Out

New Site Build Out

From i.STAR Help

Contents

Prepare layout mockup

Building Templates – Manual Method

Build Web Pages including standard build features

Keyword search

Search Wildcard

Visible Shopping Cart

Login/Logout dynamic link

Tell a Friend and Print Notes

Dynamic Meta Tags

Featured Items

Standard Verbiage

Shopping Cart Buttons

Add any of the optional additional features, as directed.