X-Cart forums

[ShishaPipeUK]

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

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

 
<!-- 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, please 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:

 
{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:

 
{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:

 
{* 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

[ShishaPipeUK]

Here is another version of the head.tpl change keeping the original x-cart build code intact and adding the new days to christmas code. You may not want the "Printable Version" to appear to the right on your main front page.

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 original codeing:

{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:

{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>
{else}
{if $smarty.now|date_format:"%m" > 10}
<td width="100%" valign="middle" align="center">
<script language="JavaScript" src="{$SkinDir}/daystochristmas.js" type="text/javascript"></script></td>
<td width="1%"><img src="{$ImagesDir}/spacer.gif" width="10" height="1" alt="" /></td>
{/if}
{/if}

This way you keep the original x-cart code and the "Printable Version" does not appear on the main home page. But when the month is November (in this displayed code), you get the reminder to christmas message displayed on the home page without the "Printable Version" being displayed.

But this message will not be displayed on any pages that has the "Printable Version" command if you have it enabled, like the categories menu or the products page or compare page (if you have this installed)

Also if you have the "Printable Version" switched off (un ticked) in you admin section (General settings - Appearance Options - Miscellaneous - Enable printable version of categories and products pages in customer area) then you will get the "Just a reminder.... There are ?? days to christmas" message on all pages with this above code.
I prefer the 1st head.tpl code I posted as I am happy to have the "Printable Version" displayed on my home page, if they want to print it out why not, it should always be enabled for me

[shirtshop]

will this work under 3.5.10?

[ShishaPipeUK]

Yo can also added a walking santa, snowman or tree in the head page.

For the santa all you need is the santa.gif file thats attached and place this in your_shop_cart/skin1/images/custom/santa.gif.

Then in your head.tpl at /your_shopcart/skin1/head.tpl look for the following code:

 <tr>
  <td rowspan="2"><img src="{$ImagesDir}/spacer.gif" width="120" height="1" alt="" /></td>
  <td height="79" align="right">{include file="customer/top_menu.tpl"}</td>
  <td class="SpeedBarBox"><img src="{$ImagesDir}/spacer.gif" width="1" height="79" alt="" /></td>
 </tr>

And replace it with:

 <tr>
 {if $smarty.now|date_format:"%m" > 11}
<td rowspan="2"><img src="{$ImagesDir}/custom/santa.gif" width="61" height="74" alt="ShishaPipe UK" /></td>
{else}<td rowspan="2"><img src="{$ImagesDir}/spacer.gif" width="120" height="1" alt="" /></td>{/if}
  <td height="79" align="right">{include file="customer/top_menu.tpl"}</td>
  <td class="SpeedBarBox"><img src="{$ImagesDir}/spacer.gif" width="1" height="79" alt="" /></td>
 </tr>

[PhilJ]

1) It's October
2) It slows your site down completely
3) You're insane

[carpeperdiem]

Originally Posted by PhilJ

1) It's October
2) It slows your site down completely
3) You're insane

Phil, you crack me up. LOL.

I guess for some merchants, it's never too soon for Christmas. I'm in full swing on my holiday prep right now -- just went to press on the holiday catalog, we just closed a deal to be in 2 big charity (holiday) events in December, and we got picked up by a national US "afternoon talk show that isn't Oprah" for their "holiday gift show" (fortunately/unfortunately, Oprah's Favorite Things is no longer... after everyone in the audience received a Pontiac - it was no longer about Oprah finding cool products and giving them away -- it was how much the sponsors were willing to pay for the spot... Oprah got wise and just pulled the plug) --

-- so with that said, it's Ho-Ho-Ho around here 24/7 -- but I wouldn't put snowflakes on my site for at least 5 more weeks.

[ShishaPipeUK]

philJ, i am testing it at the moment with other scripts, so thats why i have got it working today, if you look now its turned off until December.

As for slowing the site down, yes it does, thats why i have been just looking at the snow effect on the header only and not all the page, and below is the mod for this.

Attached is the snow_header.js file, its currently set at 150 height, just adjust to your setting.

Then in the head.tpl file at /your_shopcart/skin1/head.tpl place the code:

{if $smarty.now|date_format:"%m" > 11 }
<script language="JavaScript" src="{$SkinDir}/snow_header.js" type="text/javascript"></script> {/if}

The > 11 means it only will work in December PhilJ

Attached are some snow flakes you might want to use, naturally the small the file size the better it will load.

I loaded the snow flakes into /your_shopcart/skin1/images/ directory.

Oh and PhilJ, I am not insane, just testing to see if it works, there is a difference

[balinor]

Are you serious? You are actually putting an animated santa on a live e-commerce site? Might as well add blinking text, a visible hit counter and one of those animated e-mail icons from the 90s too...

[ShishaPipeUK]

Or a snowman, yes, why not its only for one month of the year, might put a christmas tree as well, will see how i feel.

It will get my customers into the Christmas spirit

Balinor, good idea for the blinking text and the hit counter, and animated e-mail icon from the 90's do you have any that i can use

[Corto_Maltese]

Shisha ...

As PhilJ says, you are insane ...

but ...

I love your site and all its oldies ... At least ... it is the more original site I've seen for a long time.

And your mods are always a source of great inspiration ...

My best regards

Erick