Ok, this is a mod which incorporates Boomers Xmas Lights and TelaFirma snow mod and my run up to xmas wording. It automatically starts in December with a IF command, so you can keep this always on your site and the 1st December (or any date you want) it will come into action in your x-cart :
If anyone knows any other neat JavaScripts for Christmas I would like to see them posted here if possible.
OK, letâ–“s start, 1st of all, the link to Boomers / TelaFirma code on this forum ( http://forum.x-cart.com/showthread.php?t=17695 ) just for a reference, but I will post it in my posting here anyway.
The two files we are changing are:
/your_shopcart/skin1/customer/home.tpl and /your_shopcart/skin1/head.tpl
The two JavaScripts we are adding are:
/your_shopcart/skin1/snow.js and /your_shopcart/skin1/daystochristmas.js
The Image and Flash file we are adding are:
/your_shopcart/skin1/images/snow3.gif http://www.theshisha.com/shopcart/skin1/images/snow3.gif
/your_shopcart/skin1/images/lights.swf
To make life easy for you I have attached these 4 files in a downloadable zip file with there directory structure. (4 KB)
The snow.js which needs to be uploaded to /your_shopcart/skin1/snow.js
Code:
//Configure below to change URL path to the snow image
var snowsrc="/shopcart/skin1/images/snow3.gif"
// Configure below to change number of snow to render
var no = 10;
var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;
if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><a href=\"<A href="http://dynamicdrive.com/\"><img">http://dynamicdrive.com/\"><img src='"+snowsrc+"' border=\"0\"></a></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src='"+snowsrc+"' border=\"0\"></layer>");
}
} else if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"<A href="http://dynamicdrive.com\"><img">http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"></a></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"></div>");
}
}
}
function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", 10);
}
function snowIE_NS6() { // IE and NS6 main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth : document.body.clientWidth;
doc_height = ns6up?window.innerHeight : document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i];
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
}
}
setTimeout("snowIE_NS6()", 10);
}
if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}
The
daystochristmas.js which needs to be uploaded to
/your_shopcart/skin1/daystochristmas.js
Code:
<!-- Begin
var day_description = "Christmas";
var day_before = "Christmas Eve";
var today = new Date();
var year = today.getYear();
if ((navigator.appName == "Microsoft Internet Explorer") && (year < 2000))
year="19" + year;
if (navigator.appName == "Netscape")
year=1900 + year;
var date = new Date("December 25, " + year);
var diff = date.getTime() - today.getTime();
var days = Math.floor(diff / (1000 * 60 * 60 * 24));
document.write("<center><h3>Just a reminder..... ")
if (days > 1)
document.write("There are " + (days+1) + " days until " + day_description + "!");
else if (days == 1)
document.write("Tommorrow is " + day_before + "!");
else if (days == 0)
document.write("Today is " + day_before + "!");
else if (days == -1)
document.write("It's " + day_description + "!");
else if (days < -1)
document.write(day_description + " was " + ((days+1)*-1) + (days < -2 ? " days" : " day") + " ago this year!");
document.write("</h3></center>");
// End -->
Now to the changes of you 4.1.3 xcart files, p
lease make backups before changing the head.tpl and home.tpl files.
First the home.tpl file at /your_shopcart/skin1/customer/home.tpl
After your </head> place the following code:
Code:
{if $smarty.now|date_format:"%m" > 11}
<!-- START CHRISTMAS LIGHTS AT THE TOP -->
<DIV id="top" style="position: absolute;top:0;left:0;width:100%;" width="100%">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="
https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="100%" HEIGHT="60" id="lights" ALIGN="">
<PARAM NAME=wmode VALUE=transparent> <PARAM NAME=movie VALUE="{$ImagesDir}/lights.swf">
<PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="{$ImagesDir}/lights.swf" menu=false quality=high bgcolor=#FFFFFF wmode="transparent" WIDTH="100%" HEIGHT="60" NAME="lights" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="<A href="http://www.macromedia.com/go/getflashplayer"></EMBED">http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
</DIV>
<!-- END CHRISTMAS LIGHTS AT THE TOP -->
<!-- START SNOW EFFECT -->
<script language="JavaScript" src="{$SkinDir}/snow.js" type="text/javascript"></script>
<!-- END SNOW EFFECT -->
{/if}
You will notice the code is within the IF statements and I have selected 11, being November, so any month greater than 11 (November) which will be December the above (Snow and Christmas lights) will be displayed. To test just set > 11 to > 9 for this month (10) October.
Now the mod to the
head.tpl at
/your_shopcart/skin1/head.tpl
Find this codeing:
Code:
{if (($main eq 'catalog' && $cat ne '') || $main eq 'product' || ($main eq 'comparison' && $mode eq 'compare_table') || ($main eq 'choosing' && $smarty.get.mode eq 'choose')) && $config.Appearance.enabled_printable_version eq 'Y'}
<td width="100%" valign="middle" align="right">{include file="printable.tpl"}</td>
<td><img src="{$ImagesDir}/spacer.gif" width="10" height="1" alt="" /></td>
{/if}
And replace it totaly with:
Code:
{* COMMENTED OUT ORIGINAL CODE
{if (($main eq 'catalog' && $cat ne '') || $main eq 'product' || ($main eq 'comparison' && $mode eq 'compare_table') || ($main eq 'choosing' && $smarty.get.mode eq 'choose')) && $config.Appearance.enabled_printable_version eq 'Y'}
END OF COMMENTED ORIGINAL CODE *}
{if $config.Appearance.enabled_printable_version eq 'Y'}
{if $smarty.now|date_format:"%m" > 10}
<td width="40%" valign="middle" align="center">
<script language="JavaScript" src="{$SkinDir}/daystochristmas.js" type="text/javascript"></script>
</td>
{/if}
<td width="22%" valign="middle" align="right">{include file="printable.tpl"}</td>
<td width="1%"><img src="{$ImagesDir}/spacer.gif" width="10" height="1" alt="" /></td>
{/if}
I have selected that this code will display at the begining of November as a count down to Christmas, so my customers can be reminded 
You may find a better way to insert this code, but i wanted the code to be displayed on every page at the top.
If you are looking at this post in November you can go to http://www.theshisha.com/shopcart/home.php to see this code in action, and in December you can go to the same site to see the Lights and Snow and anything else I think of between now and December.
Please feel free to comment and make the code better, I know we have some xcart experts on this forum that can improve this code, thats why i posted what i have done up to now