Home Page
From i.STAR Help
Contents |
Display Featured Items on the Homepage
Featured Items using includes
1. Create an include for the DataSource(s) that will be used on all pages that will display these featured items. (i.e. datasources.include) In this include you will place the DataSource(s), each with an appropriate prefix, corresponding to each features section to be displayed. You can customize DataSource(s) (see Customizing DataSources) to bring in items based on search term, icons, dept/class/suclass, manufacturer; same options that you would have linking to a browse(a=3) or product search (a=29) listing (see Info on Coding Navigation Links) and (see for List of Icon Numbers).
i.e. If there are three sections, each displaying a product listing marked with a separate icon you will have 3 datasources as shown in the example code below:
<isdata source="IStarDataSources.SearchProducts" search="''" dept="''" icon1="'13'" prefix="'Bargains'" numperrow="1" numperpage="1" pos="'1'"> <isdata source="IStarDataSources.SearchProducts" search="''" dept="''" icon1="'2'" prefix="'ComingSoon'" numperrow="1" numperpage="1" pos="'1'"> <isdata source="IStarDataSources.SearchProducts" search="''" dept="''" icon1="'8'" prefix="'New'" numperrow="1" numperpage="1">
2. Take the stock/productlisting/products-iconic.include and you can customize it to display as needed (with/without price, etc.) then save it as products-iconic-Bargains.include and products-iconic-ComingSoon.include etc. NOTE: All variables must be prefixed as shown in the code below:
<!-- begin products-iconic.include --> <table class='istar browse-iconic'> <isexpr expr="$bargains_colcount = 0"> <isloop name="$bargains_products"> <tr> <isexpr expr="$bargains_colcount = $bargains_colcount + 1"> <td class='tablerow1 content numPerRow<isvar name="$bargains_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 products-iconic.include -->
Featured Items using iFrames
1. Create a new template, i.e. featuredItems.template that would contain the code below (this is for an iconic product listing display):
NOTE: Components can be hidden with CSS, no need to go to custom for this.
<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" csurl="'http://www.domain.com/index.asp'">
<isinclude name="/stock/search-istar.include">
</body>
</html>
IMPORTANT! Make sure to change the csurl in the datasource to whatever the domain and the homepage of the site is.
2. Create the asp page in wwwroot (i.e. featureditems.asp) that contains the code below:
<%
Set istarManager = Server.CreateObject("istar21.istarmanager")
istarManager.TemplatePath = "c:\inetpub\templates\"
istarManager.SiteId = 1
istarManager.ProcessRequest Request, Response, Application, Server, Session, "FeaturedItems.template"
Set istarManager = nothing
%>
3. Add the iframe code to the homepage similar to the example below, to search for the icon number (see list of icon numbers) the retailer will be using to tag the featured items in Retail Star. This example uses icon 1 ie. Best Seller. If the icon being used was "Hot", icon1=1 would be icon1=5 instead:
<iframe scrolling=no src="featureditems.asp?icon1=1" width="632" height="725px;" border=0 frameborder=0 ></iframe>
Rotating Image Gallery
Create the external JavaScript file in wwwroot/js/bannerRotator.js containing the code below:
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Scragar | Licensed under: Public Domain
*/
function BannerRotator(){
// first, defaults:
this.timer = 2;
this.bannerNum = 0;// -1 = random
// then normal init work
this.banners = [];
this.binding = null;
this.timeout = null;
this.add = function(){// add a banner to the array
this.banners[this.banners.length] = [arguments[0], arguments[1]];
}
this.bind = function(){// bind to an element
if(typeof arguments[0] == 'string')
this.binding = document.getElementById(arguments[0]);
else
this.binding = arguments[0];
this.rotate();
}
this.rotate = function(){// the actual image rotator
if( ! this.empty())
return;
var showNum, tmpA = document.createElement('a'), tmpImg = document.createElement('img');
if(this.bannerNum < 0)// random
showNum = Math.floor(Math.random()*this.banners.length);
else// syncronous
showNum = this.bannerNum=(++this.bannerNum >= this.banners.length)?0:this.bannerNum;
tmpA.href = this.banners[showNum][0];
tmpImg.src = this.banners[showNum][1];
tmpA.appendChild(tmpImg);
this.binding.appendChild(tmpA);
}
this.empty = function(){// empty the element if possible
if(this.binding == null)
return false;
while(this.binding.hasChildNodes())
this.binding.removeChild(this.binding.firstChild);
return true;
}
this.startTimer = function(){// start the loop, normaly done during page load.
this.stopTimer();
this.timeout = window.setInterval(
(function(x){
return function(){
x.rotate();
}
})(this), this.timer*1000);
}
this.stopTimer = function(){// stop the loop, nice to make available via a button.
if(this.timeout != null)
window.clearInterval(this.timeout);
this.timeout = null;
}
}
On the homepage.template (or can be used on any other page) place the code below in the head. This example is rotating three images gallery1.jpg, gallery2.jpg and gallery3.jpg located in the images/gallery directory. This can be updated to accommodate any number of images
<script type="text/javascript" src="/js/bannerRotator.js"></script>
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
// Banner 1
var myBanner1 = new BannerRotator();
myBanner1.add('#', '/images/gallery/gallery1.jpg');
myBanner1.add('#', '/images/gallery/gallery2.jpg');
myBanner1.add('#', '/images/gallery/gallery3.jpg');
myBanner1.timer = 5;// 5 secs between images
// Set-up display
addLoadEvent(function(){
myBanner1.bind('banner1');// match to ID of element.
myBanner1.startTimer();
});
</script>
To display the image place the following div on the page where you want the banner to be: <div id="banner1"></div> and add the css you wish to control the placement, border etc of the div into the external css file.
