Customizing
From i.STAR Help
Note: Instructions on accessing web files via FTP is here
NOTICE: CAM Commerce Solutions is not responsible for system downtime, crashes, or loss or data due to Customer modifications to web pages or other modifications to the i.STAR server. Customers experiencing difficulty with their web pages after their own modifications can all on their project Manager at CAM for emergency support. You will be billed for time spent troubleshooting the site at a rate of $120 per hour with a one-hour minimum.
VERY IMPORTANT INFORMATION PLEASE CAREFULLY READ THE CUSTOMIZING i.STAR CONTENT STANDARDS BEFORE CHANGING THE DYNAMIC DATA BROUGHT IN THROUGH THE TEMPLATE FILES
Custom changes made to the i.STAR content without reading the documentation we provide can result in losing functionality of some aspects of your online store or in some cases the entire website.
If after reading our instructions here, you have further questions or want to make sure your changes will not affect the functionality of your website, you can submit a ticket here with details about the customization you were looking to apply on your site and/or include file you were considering to change.
- Do not place content from the includes directly onto the template page.
- Do not copy all files and folders from stock into custom, this can add to the downtime of your website during a version upgrade and can also result in additional costs to compare and "fold in" changes from one version to another.
- Try and keep the files structure in "custom" as close as possible to "stock".
- Make sure you always keep a back-up of the files you are editing.
How to include files in templates and asp pages?
.asp pages: <!-- #include file ="/includes/leftnav.include" --> .template pages: <isinclude name="/includes/leftnav.include">
Here are some often used custom tips.
Home Page ie. Display Featured Items
Browse and Search Product Listing Pages
Product Detail Page
Checkout Pages
Category Lister
Brands Page
Adding Static Content Pages or New Templates
To create pages with static content or new custom template pages you need to follow the instructions below:
- Create the asp page (i.e. NewPage.asp) and place it in the wwwroot folder. This page should only contain the code blow:
<%
Set istarManager = Server.CreateObject("istar21.istarmanager")
istarManager.TemplatePath = "c:\inetpub\templates\"
istarManager.SiteId = 1
istarManager.ProcessRequest Request, Response, Application, Server, Session, "NewPage.template"
Set istarManager = nothing
%>
- Create the corresponding template page (i.e. NewPage.template) and place it in the template folder, this is the page that you will put the new page content in, static or dynamic.
Customizing DataSources
IMPORTANT NOTE When using more than one DataSource on a page the DataSources that are not native to that template file, should be prefixed and only used to output the data needed to display. Loops that are not used should be removed from the stock include file that is being customized.
EXAMPLE On a browse product listing page (browse.template) the native DataSource is <isdata source="IStarDataSources.BrowseProducts">. If we wish to add a boxed column of New Arrivals at the right of the stock i.Star include we can use the search DataSource with the prefix "New" <isdata source="IStarDataSources.SearchProducts" search="" dept="" icon1="'8'" prefix="'New'" numperrow="1" numperpage="3"> This will output 3 items tagged with the new icon, through an include that could be coded like the stock iconic product listing. The only components of the iconic include kept are the thumbnail image and the short description.
<!-- begin new-products-iconic.include --> <table class='istar browse-iconic'> <isexpr expr="$new_colcount = 0"> <isloop name="$new_products"> <tr> <isexpr expr="$new_colcount = $new_colcount + 1"> <td class='tablerow1 content numPerRow<isvar name="$new_numperrow">'> <div class='shortdescription content-spaced'> <a href='<isvar name="$detailurl">'><isvar name="$shortdescription"></a> </div> <br /> <isif name="$tnurl"> <div class='thumbnail content-spaced'> <a href='<isvar name="$detailurl">'><img src='<isvar name="$tnurl">' ALT="<isvar name="$shortdescription"> Thumbnail"> </a> </div> </isif> </td> </isloop> </tr> </table> <!-- end new-products-iconic.include -->
or
<!-- begin newProductsIconic.include --> <div id="newProducts"> <isloop name="$new_products"> <div class="newProductShortdescription"> <a href="istar.asp?a=29&icon1=8"><isvar name="$shortdescription"></a> </div> <br /> <isif name="$tnurl"> <div class="newProductThumbnail"> <a href="istar.asp?a=29&icon1=8"><img border="0" src="<isvar name="$tnurl">" ALT="<isvar name="$shortdescription"> Thumbnail"></a> </div> </isif> </isloop> </div> <!-- end newProductsIconic.include -->
1. Sorting all items in a department by price
<isdata source="IStarDataSources.BrowseProducts" sortby="'PRICE'">
2. Display a certain number of items only
<isdata source="IStarDataSources.SearchProducts" numperrow="1" numperpage="4">
Related Items
Default code goes on PRODUCT DETAIL & VIEW CART TEMPLATES
<isdata source="IStarDataSources.RelatedItems"> <isinclude name="/stock/relateditems.include">
- To increase the number of items displayed in the related items box change the isdata source as shown below
<isdata source="IStarDataSources.RelatedItems" max="12">
- To change the number of items displayed in a row the relateditems include needs to be moved into the "custom" folder and the code below added into the bottom of the "$relateditems" loop. (in this example it will display 3 items per row)
<isif expr="$_loopiteration_ % 3 == 0"> </tr><tr> </isif>
Icons
Search Icons set in Retail Star/Internet Sales Product Setup (*see list of icons below) i.e. a=29&icon1=ICON#
1 = best seller
2 = coming soon
3 = deal of the week
4 = great gift idea
5 = hot
6 = limited time offer
7 = limited quantity
8 = new
9 = not returnable
10 = parents picks
11 = shipping premium applies
12 = special order
13 = web special
14 = closeout
Email Form Mailer Script
Save the code below in a file called as mailer.asp and place it in wwwroot folder.
<%
dim strReceipient, strSubject, strRedirect, strEMail, objEMail
dim strFrom
dim nFields
nFields = 0
for each field in request.form
if field = "recipient" then
strReceipient = request.form(field)
elseif field = "subject" then
strSubject = request.form(field)
elseif field = "redirect" then
strRedirect = request.form(field)
elseif field = "env_report" then
envvars = split(request.form(field), ",")
elseif field = "from" then
strFrom = request.form(field)
end if
next
set objEMail = server.createobject("Persits.MailSender")
objEMail.From = strFrom
objEMail.Host = "mailfwd.camcommerce.com"
objEMail.AddAddress strReceipient, strReceipient
objEMail.Subject = strSubject
objEMail.Body = strEMail
objEMail.Send
response.redirect strRedirect
%>
Place the form tag below areound your form fields:
<form id="form1" name="form1" method="POST" action="mailer.asp">
<input type=hidden name="recipient" value="email@domain.com">
<input type=hidden name="subject" value="Email Sign-up">
<input type=hidden name="redirect" value="http://www.domain.com/istar.asp?tfile=thanks.template">
</form>
Use the script below in the header of the html if you want to add required fields validation
<script language="JavaScript">
<!--
/***********************************************
* Required field(s) validation v1.10- By NavSurf
* Visit Nav Surf at http://navsurf.com
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
function formCheck(formobj){
// Enter name of mandatory fields
var fieldRequired = Array("FirstName", "LastName");
// Enter field description to appear in the dialog box
var fieldDescription = Array("First Name", "Last Name");
// dialog message
var alertMsg = "Please complete the following fields:\n";
var l_Msg = alertMsg.length;
for (var i = 0; i < fieldRequired.length; i++){
var obj = formobj.elements[fieldRequired[i]];
if (obj){
switch(obj.type){
case "select-one":
if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "select-multiple":
if (obj.selectedIndex == -1){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "text":
case "textarea":
if (obj.value == "" || obj.value == null){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
default:
}
if (obj.type == undefined){
var blnchecked = false;
for (var j = 0; j < obj.length; j++){
if (obj[j].checked){
blnchecked = true;
}
}
if (!blnchecked){
alertMsg += " - " + fieldDescription[i] + "\n";
}
}
}
}
if (alertMsg.length == l_Msg){
return true;
}else{
alert(alertMsg);
return false;
}
}
// -->
</script>
See sample form below for implementation:
<!--SAMPLE FORM --------------------------------> <form name="formcheck" onsubmit="return formCheck(this);"> First Name: <input type=text name="FirstName" size="25"><br> Last Name: <input type=text name="LastName" size="25"><br> <input type=submit value="Submit Form"> </form>
Display dept > class > subclass cookie trail
Use code below to display cookie trail on browse product listing pages:
<span class="department"><a href='<isvar name="$selecteddeptnavurl">'><isvar name="$selecteddeptname"></a></span>
<isif expr="varexists('$selectedclassname') == 1">
<span class="class"> > <a href="<isvar name="$selectedclassnavurl">"><isvar name="$selectedclassname"></a></span>
</isif>
<isif expr="varexists('$selectedsubclassname') == 1">
<span class="subclass"> > <a href="<isvar name="$selectedsubclassnavurl">"><isvar name="$selectedsubclassname"></a></span>
</isif>
Use code below to display cookie trail on product detail pages:
<span class="department"><a href="<isvar name="$departmentLink">"><isvar name="$departmentName"></a></span>
<isif expr="varexists('$className') == 1">
<span class="class"> > <a href="<isvar name="$classLink">"><isvar name="$className"></a></span>
</isif>
<isif expr="varexists('$subclassName') == 1">
<span class="subclass"> > <a href="<isvar name="$subclassLink">"><isvar name="$subclassName"></a></span>
</isif>
Department Specific Browse and Product Detail Pages
This feature allows you to have department specific browse pages and product detail pages. In order to take advantage of this feature you will need to create a browse.template and productdetail.template page for each department that you want to have a different look from the generic template pages, and add the department code in the filename. For example you have a department called Footwear with the department code FOOTWR and you want it to have it’s own browse and product detail page. You would save the existing browse and product detail pages as browse-FOOTWR.template and productdetail-FOOTWR.template and then modify the design on these newly created templates.
You can go to the Class and Subclass level in like manner by adding "-CLASSCODE" or "-CLASSCODE-SUBCLASSCODE" to the file name after the department code.
Embedding Flash Files
The code below is to be used for embedding Flash files into design. It works especially well when there is a pull down menu that needs to cover part of the Flash on mouse over (usually the menu will be hidden behind the Flash). The code example is shown with a width of 600px and height of 400px, so that needs to be replaced with the width and height of the Flash movie. Also the FLASHfileNAMEgoesHERE needs to be replaced with the actual file name. The example is shown for a .swf file that resides in the same directory with the page calling it so if it is placed in a different directory that path needs to be specified as well.
<!-- Begin Flash Content --> <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab #version=9,0,28,0','wmode','opaque','width','600','height','400','src','FLASHfileNAMEgoesHERE','quality','high','pluginspage','http://www.adobe.com/shockwave/download/down load.cgi?P1_Prod_Version=ShockwaveFlash','movie','FLASHfileNAMEgoesHERE' ); //end AC code </script> <embed wmode="opaque" src="FLASHfileNAMEgoesHERE.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/down load.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" height="400" width="600"> <noscript> <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="600" height="400"> <param name="movie" value="/FLASHfileNAMEgoesHERE.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="9.0.45.0" /> <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. --> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="FLASHfileNAMEgoesHERE.swf" width="600" height="400"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="9.0.45.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. --> <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </noscript> <!-- End Flash Content -->
XML Site Map
Create the sitemap.asp and sitemapindex.asp files in wwwroot folder and add the code below in each file correspondingly:
sitemap.asp
<%
Response.ContentType = "text/xml"
Set istarManager = Server.CreateObject("istar21.istarmanager")
'istarManager.TemplatePath = "c:\Program Files\iStar\iSTARSitemap\"
istarManager.TemplatePath = "c:\inetpub\templates\"
istarManager.SiteId = 1
istarManager.ProcessRequest Request, Response, Application, Server, Session, "sitemap.template"
Set istarManager = nothing
%>
sitemapindex.asp
<%
Response.ContentType = "text/xml"
Set istarManager = Server.CreateObject("istar21.istarmanager")
'istarManager.TemplatePath = "c:\Program Files\iStar\iSTARSitemap\"
istarManager.TemplatePath = "c:\inetpub\templates\"
istarManager.SiteId = 1
istarManager.ProcessRequest Request, Response, Application, Server, Session, "sitemapindex.template"
Set istarManager = nothing
%>
Create the template files for sitemapindex.template and sitemap.template containing the code below:
sitemap.template
<?xml version="1.0" encoding="utf-8" ?> <isdata source="istardatasources.searchproducts" numperpage="30000"> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <isloop name="$products"> <url> <loc>http://WWW.DOMAIN.COM/<isvar expr="htmlencode($detailURL)"></loc> <changefreq>daily</changefreq> </url> </isloop> </urlset>
sitemapindex.template
<?xml version="1.0" encoding="utf-8" ?> <isdata source="istardatasources.categorylister" forceDept="1"> <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <isloop name="$departments"> <sitemap> <loc>http://WWW.DOMAIN.COM/sitemap.asp?dept=<isvar expr="urlencode($deptCode)"></loc> <changefreq>daily</changefreq> </sitemap> </isloop> </sitemapindex>
In the two template files replace WWW.DOMAIN.COM with the domain name or IP address (if not live yet) of the site.
Verify that it works by going to http://WWW.DOMAIN.COM/sitemapindex.asp and check the departments listed on the sitemap
(i.e. http://WWW.DOMAIN.COM/sitemap.asp?dept=ACC)
Google Analytics Code for the Receipt Page
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("ACCOUNT_NUMBER_GOES_HERE");
pageTracker._initData();
pageTracker._trackPageview();
pageTracker._addTrans(
"<isvar name="$receiptId">", // Order ID
"Affiliation", // Affiliation
"<isvar name="$total">", // Total
"<isvar expr="$taxTotal">", // Tax
"<isvar expr="$shippingBase + $shippingPremiums">", // Shipping
"<isvar name="$customerCity">", // City
"<isvar name="$customerState">", // State
"Country" // Country
);
<isloop name="$productDetails">
pageTracker._addItem(
"<isvar name="$receiptId">", // Order ID
"<isvar name="$upc">", // SKU
"<isvar name="$description">", // Product Name
"Category", // Category
"<isvar expr="$extPrice">", // Price
"<isvar name="$quantity">" // Quantity
);
</isloop>
pageTracker._trackTrans();
</script>
Google Checkout Integration
Google Checkout integration is not a feature in i.STAR It may be possible to do a Google checkout implementation but it won't be integrated into Retail STAR and it will only be one item into the cart at a time
PayPal Integration
If you maintain your own site you can add the appropriate PayPal code to receipt.template page. This code will add a button to the receipt page that will take the shopper to PayPal payment page, and populate certain fields with the information passed in from i.STAR.
If you wish for CAM to implement it for you, notify your CAM project manager in advance, so that a contract can be created for the billable design time.
Retailer Instructions:
1. Set up Payment Option in Retail STAR (Type Cash) with a note so that shopper knows to look for the PayPal button on the receipt page after check out. This note will be displayed on the payment options page like this:
2. Choose Method 1 or Method 2 (described below) and provide that to your CAM project manager along with the email address associated with your PayPal account.
Note: Do not provide your PayPal password to CAM. It is not needed for set up.
There are two type of PayPal integration you can have on your i.STAR site:
See Method 1: Passing the Aggregate Cart Amount to PayPal
If you wish, you may aggregate your entire shopping cart and pass the total amount into PayPal's Buy Now Button code (that is, you will need to post a single name for the entire cart and the total price of the cart's contents as though it were a purchase of a single item).
https://www.paypal.com/cgi-bin/webscr?cmd=p/pdn/howto_checkout-outside#methodone
Here is an example of passing order number, subtotal + tax and shipping to PayPal:
<form name="formp" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="business" value="YOUREMAILADDRESS@DOMAIN.COM"> <input type="hidden" name="item_name" value="<isvar name="$receiptId">"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="amount" value="<isvar name="$subTotal">"> <input type="hidden" name="tax" value="<isvar expr="$taxTotal">"> <input type="hidden" name="shipping" value="<isvar expr="$shippingBase + $shippingPremiums">"> <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but6.gif" name="submit" alt="Make payments with PayPal - it's fast, free and secure!"> </form>
See Method 2: Passing Individual Items to PayPal
If you want to pass individual items to PayPal, information about the items will be included in the buyers' and sellers' History logs and notifications. This process is much like the one described for Method 1, "Passing Aggregate Cart Amount to PayPal".
https://www.paypal.com/cgi-bin/webscr?cmd=p/pdn/howto_checkout-outside#methodtwo
If you want to pass in shipping total and tax total, here are additional instructions for that from PayPal:
You may pass aggregate shipping amount via the handling variable. ie. sum of shipping costs=3.00:
<input type="hidden" name="handling_x" value="3.00"> //while x is a placeholder for the numeric value as stated in the online manual.
To pass in tax:
Via the 'tax' variable as a flat amount, then you may add a line like the following to your button code (i.e. tax for an item=3.20):
<input type="hidden" name="amount" value="3.20">
Here is an example of the code to be used to pass individual line items to PayPal:
<form name="formp" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="upload" value="1"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="business" value="YOUREMAILADDRESS@DOMAIN.COM"> <input type="hidden" name="invoice" value="<isvar name="$receiptId">"> <isexpr expr="$counter = 1"> <isloop name="$productDetails"> <input type="hidden" name="item_name_<isvar name="$counter">" value="<isvar name="$description">"> <input type="hidden" name="amount_<isvar name="$counter">" value="<isvar expr="$extPrice">"> <input type="hidden" name="quantity_<isvar name="$counter">" value="<isvar name="$quantity">"> <isexpr expr="$counter = $counter + 1"> </isloop> <input type="hidden" name="tax_cart" value="<isvar expr="$taxTotal">"> <isexpr expr="$basePremShipping = $shippingBase + $shippingPremiums"> <input type="hidden" name="shipping_1" value="<isvar expr="formatprice($basePremShipping)">"> <input type="hidden" name="return" value="http://www.superiorhobbies.com"> <input type="hidden" name="cancel_return" value="http://www.superiorhobbies.com"> <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but6.gif" name="submit" alt="Make payments with PayPal - it's fast, free and secure!"> </form>
Full list of the receipt page output variables can be found here: ReceiptProcess_Data_Source#Output_Variables
MAP Pricing (Minimum Advertised price)
If you need to hide an item's price from displaying until it is added to the cart, such as to conform to MAP pricing requirements, put this code at the beginning of the long description of each item whose price you need to hide:
<style>
#price { display: none; }
</style>
<font color=#D61705><b>*** Click on Buy It to add item to cart ***</b></font><br><br>
The "Click to Buy It" portion is changeable. That's the part that displays. It's also set to be bold and the color red in this example.
You also need to turn OFF the prices from displaying on product listing pages (Department, Search, and Specials in admin -- Suppress Prices setting).
