Navigation
Links
- i.STAR Help Tickets
- Project Management Login
Toolbox
Personal tools
- Admin Login

New Site Build Out

From i.STAR Help

1 Prepare layout mockup
2 Building Templates – Manual Method
3 Standard Build Features
4 Standard Verbiage
5 Shopping Cart Buttons
6 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" />

(Version 5.2 Change)

Use:

NOTE: Make sure the following elements are defined in the external css file:

body {background: ######; color:######; font-family:Verdana,Arial; font-size:Xpt;}
h1 {}
h2 {}
h3 {}
h4, h5, h6 {}
p {}
strong {}
q, blockquote {}
input:focus, textarea:focus {border: 1px solid #ccc}
a {}
a:link {}
a:hover {}
a:visited {}
a:active {}

[edit]

Standard Build Features

[edit]

Keyword search

Instructions and/or Code:

This will add the wildcard ('*') to the text search as well as display the search text on the results page: Search Results for ‘ [search string] ’...

Get the enhanceSearch092409.zip file from: here and unzip it (and copy it to a location where the script code will be referencing it).

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/enhanceSearch.js"></script>

Note the file location.

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

<a href="istar.asp?a=67">Search</a>
<form class="istar" action="/istar.asp" method="get" id="searchForm" name=searchForm onsubmit="enhanceSearch(document.searchForm.view,document.searchForm.search);">		
	<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="get" 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);" />

[edit]

Keyword search (Version 5.2 Change)

Skip this step as it's been integrated as part of 5.2.

[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 Login(if customer has not logged in yet) and Logout (if customer already logged in):

<isif name="$global_isLoggedIn">
 <a href="/istar.asp?a=33">Logout</a>
<iselse>
 <a href="/istar.asp?a=53">Login</a>
</isif>

Add the code below, where you want the link to display My Account(if customer has not logged in yet) and Logout (if customer already logged in):

<isif name="$global_isLoggedIn">
 <a href="/istar.asp?a=53">My Account</a>
<iselse>
 <a href="/istar.asp?a=53">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]

Tell a Friend and Print Notes (Version 5.2 Change)

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

Get the Email_Print_092209.zip file from: here and unzip it

Instructions and/or Code:

Copy the emailnotes/printnotes directory on the customer's server in the wwwroot folder. It should contain the following files:
emailnotes: see above
printnotes: see above
Follow steps in the ReadMe.txt.

[edit]

Secure Site

Add secure site (Comodo Standard TrustLogo) to footer

Instructions can be found here: http://www.trustlogo.com/trustlogo_choice.html

[edit]

Receipt

Remove designer css from receipt.template for print-friendly purposes

[edit]

Dynamic Meta Tags

With the use of variables we can dynamically bring certain parts of a product record (i.e. short description, the manufacturer name, department, class, subclass names, etc.) to be used in title, keyword and/or description meta tags that update dynamically. There are some specific requirement in order for these dynamic metatags to work:

They will only work on Product Listing or Product Detail Template Pages because those are the DataSources that output the variables.
The DataSource must be above where the variables are called on the page.
(Data Sources as a rule of thumb should always be at the top of the page, above the <head> tag)
For certain variables the CategoryLister DataSource needs to be used, must be prefixed properly.
Adding a condition around the variable that checks for it's existence eliminates errors on the page in case the variable doesn't exist.
```
<isif expr="varexists('$VARIABLE') == 1"><isvar name="$VARIABLE"></isif>
```

[edit]

Dynamic Meta Tags on Product Detail Page

<isvar name="$productDescription">
<isvar name="$manufacturerName"> (for i.STAR versions prior to 5.0)
<isvar name="$manufacturer"> (for i.STAR versions 5.0 and higher)
<isvar name="$departmentName">

Examples:

Keywords on Product Detail Page

Bring in all manufacturers from that department and short description to be used in the keywords meta tag

<meta name="Keywords" content="brand1, brand2, brand3, brand4, Product Short Description">

Code to use:

<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">">

Title tag on Product Detail Page

To use the variables in the title tag to dynamically bring in product name, brand and department name (i.e. Air Jordan by NIKE in SHOES or SHOES - Air Jordan by NIKE)

Code to use:

<title><isvar name="$productDescription"><isif expr="varexists('$manufacturer') == 1"> by <isvar name="$manufacturer"></isif> in <isvar name="$departmentName"></title>
 or
 <title><isvar name="$departmentName"> - <isvar name="$productDescription"><isif expr="varexists('$manufacturer') == 1"> by <isvar name="$manufacturer"></isif></title>

[edit]

Dynamic Meta Tags on Browse Pages

<isif expr="varexists('$manufacturer') == 1"><isvar name="$manufname"></isif>
<isif expr="varexists('$selectedDeptName') == 1"><isvar name="$selectedDeptName"></isif>
<isif expr="varexists('$selectedClassName') == 1"><isvar name="$selectedClassName"></isif>
<isif expr="varexists('$selectedSubclassName') == 1"><isvar name="$selectedClassName"></isif>
<isif expr="varexists('$manufacturer') == 1"><isloop name="$manufacturers"><isvar name="$mfgName">,</isloop></isif>

Examples:

Bring in all manufacturers in a department under Keywords meta tag on the browse page

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

Bring Department, Class name (if exists), Subclass name (if exists) on browse pages into title, meta keyword and or description:

For meta/keyword:

<meta name="keywords" content="<isif expr="varexists('$selectedClassName') == 1"><isvar name="$selectedClassName"></isif>" />
<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></title>
<title><isif expr="varexists('$selectedClassName') == 1"><isvar name="$selectedClassName"></isif><isif expr="varexists('$selectedSubclassName') == 1">, <isvar name="$selectedSubclassName"></isif></title>

[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)

<p>If you haven't shopped at our store before, 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. </p>

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

In alphabetical order:

#	File Name	Used on
1	add_gift_card.gif	Checkout (a=75)
2	add_more_items_to_registry.gif	Wishlist (a=74), My Account (a=53)
3	add_payment_btn.gif	Payment Options (a=20)
4	add_to_cart.gif	Browse (a=3), Product Detail (a=6), Specials (a=28), Search (a=29), Gift Registry and Wishlist Browse Lising (a=46)
5	add_to_registry.gif	Product Detail (a=6)
6	add_to_wishlist.gif	Product Detail (a=6)
7	cancel.gif	Wishlist (a=74)
8	checkout_btn.gif	Shopping Cart (a=8)
9	confirm_order_update.gif	Confirm Order (a=22)
10	continue_btn.gif	Login (a=11), New Customer (a=13), New Shipping Address (a=16), Payment Type (a=20)
11	continue_shopping.gif	Shopping Cart (a=8)
12	create.gif	Gift Registry Search (a=44)
13	create_a_registry.gif	Wishlist (a=74), My Account (a=53)
14	delete.gif	Shopping Cart (a=8)
15	delete_registry.gif	Wishlist (a=74), My Account (a=53)
16	deleteitem.gif	Wish List and Registry (a=74)
17	email_to_friend.gif	Product Details (a=6) (exclude for version 5.1 and above)
18	enter_new_address_btn.gif	Shipping Addresses (a=15)
19	gift_registry_soldout.gif	Wish List and Registry (a=46)
20	gotoproduct.gif	Product Details Email to Friend Email
21	in_store_add_cart.gif	Browse (a=3), Product Detail (a=6), Specials (a=28), Search (a=29)
22	manage.gif	Gift Registry Search (a=44)
23	next_page.gif	Browse (a=6), Specials (a=28), Search (a=29), Order Notes (a=47)
24	placeorder_btn.gif	Confirm Order (a=22)
25	prev_page.gif	Browse (a=6), Specials (a=28), Search (a=29),
26	printnotes_button.gif	Product Detail (a=6) (exclude for version 5.1 and above)
27	register.gif	Login (a=11)
28	return_to_registry.gif	Wish List and Registry Product Detail (a=6)
29	saveitem.gif	Wish List and Registry (a=74)
30	shop_and_add_to_registry.gif	Wishlist (a=74), My Account (a=53)
31	submit.gif	Wishlist (a=74), Gift Registry Search (a=44), My Account (a=53), Advanced Search (a=67)
32	update_cart_qty.gif	Shopping Cart (a=8)
33	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.

Templates: 
giftregistrysearch.template - search registries by name
giftregistryresults.template - search results/registries found
giftregistrybrowse.template - browse gift registry products
(DataSource and Include information on the I.STAR_Action_Id_Listing page)

Buttons:
add_to_wishlist.gif - used on Product Detail (a=6)
deleteitem.gif  - used on Wish List and Registry (a=74)
gift_registry_soldout.gif - used on Wish List and Registry (a=46)
return_to_registry.gif - used on Wish List and Registry Product Detail (a=6)

Add scrolling to full size images on product detail page

First, change the content of fullsizeimage.template to this:

<html>
	<head>
		<isinclude name="/stock/displayattributes.include">
		<link href="/istar/css/istar.css" rel="stylesheet">
		<title></title>
	</head>

	<body onload="FitPic();">
		<isinclude name="/custom/productdetail/fullsizeimage.include">
	</body>
</html>

In the next step, create the above referenced custom include: it will be called fullsizeimage.include, and needs to be saved in the templates/custom/productdetail folder. Please, copy and paste this code to create your file:

<script type="text/javascript">
//<![CDATA[
		
	var queryString = self.location.search.substring(1, location.search.length);
	var arrTemp = queryString.split("&");
	var imagePair = (arrTemp.length > 0) ? arrTemp[1] : "";
	arrTemp = imagePair.split("=");
	var picUrl = (arrTemp.length > 0) ? arrTemp[1] : "";

	function FitPic()
	{
		width = document.images[0].width;
		height = document.images[0].height
		window.resizeTo(width + 50, height + 50);
	}

	document.write('<div style="overflow: auto; height: 100%; width: 100%; margin: 0 auto; text-align: center;"><img src="' + picUrl + '" />');
	document.write('<div class="istartext" style="text-align: center;"><a href="javascript:window.close();">close window</a></div></div>');

//]]>
</script>

Adding the "close window" link is optional, if you don't need it, just delete the last document.write line from the code above.

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

Standard Build Features

Keyword search

Keyword search (Version 5.2 Change)

Visible Shopping Cart

Login/Logout dynamic link

Tell a Friend and Print Notes

Tell a Friend and Print Notes (Version 5.2 Change)

Secure Site

Receipt

Dynamic Meta Tags

Dynamic Meta Tags on Product Detail Page

Dynamic Meta Tags on Browse Pages

Standard Verbiage

Shopping Cart Buttons

Add any of the optional additional features, as directed.