Teesed's Bag o' Scripts

I'm not providing much here in the way of explanation at this point. If you have questions, post in the CafePress Forum and we'll go from there.

This code will replace your product dropdown with a more user-friendly and customizeable dropdown menu.

You can remove individual products or entire categories if you don't have them in your shop by adding the category id (c2,c3,c4,c5,c6 or c7) or the product type number to the "dontshowlist" array variable like this:

var dontshowlist = new Array("c3","11","74","75","163","162","Calendars");

This code will result in a dropdown without the "Baby/Toddler/Kids" products, and without the Stein and all of the calendars, like so. Note that since we removed all of the items under "-Calendars", we also need to remove the subcategory by putting "Calendars" in the dontshowlist array. Putting "Calendars" in the list won't remove all of the calendars, just the subcategory name itself.

You can also add multiple dropdowns by setting each menu's form name and id and select id as unique variables. By doing this and removing all but one successive category, you can create something like this:

Finally, each element of the form can be controlled by CSS. The forms are set with the following CSS variables:

Open CSS'd example in new window. Setting the CSS here would set it for all of these dropdown forms, so a new window will show the difference.

This script will let you post a message when showing products via the "browse by product type" url. This can be useful if you want to post something special about a specific product category or in the event of a product-specific sale or "out of stock" announcement..

for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}

return vars;
}

var hash = getUrlVars();

var prodtype = hash['type'];

switch (prodtype)
{
case "134" :
document.writeln("<h4>Cap Sleeve Tees!</h4>Get into sporty, stylin’ casual comfort with our Hanes Silver for Her<sup>(tm)</sup> Women’s Cap Sleeve Raglan. Looks great on the go or just hangin’ out. Made of 100% combed ring-spun cotton that gets even softer with each washing.");
break;
case "87" :
document.writeln("<h4>Camisole</h4>Comfort and style come together with our sexy cami. The thin fabric is a great way to beat the summer heat or for winter layering without looking bulky. Pair it with our thong as an easy, breezy summer sleep set.");
break;
default :
break;
}

// -->
</script>

This script will let you post a message that only appears on your front page or when a specific section is being viewed. Yes, you can put something in a section's "description" field to show on top, but this script allows you to show messages at the bottom of a section as well!

// replace with your information.
var storeid = "cafewish";

// how many sections have you put into the array below?
var numsections = 2;

// don't worry about these
var secnum = new Array(numsections);
var sectext = new Array(numsections);

// for each array variable, enter the text you want to show section number for "secnum[n]"
// note that arrays in javascript start with '0' as the number of the first item. So, your last item
// will be one number less than the variable 'numsections' above.

// Homepage text
var hometext = '<p align=center>This is the demo shop for Cafewish, your solution for CafePress shop organization!</p>';

// Section Name: Normal Section
secnum[0] = "2492089";
sectext[0] = '<p align=center>This is the normal layout of a CafePress Premium Shop. You can arrange the products, but it doesn\'t separate them into different categories like the Basic Shop does. </p>';

// Section Name: Customized Section
secnum[1] = "2492125";
sectext[1] = '<p align=center>This is what Cafewish can do for your shop. A place for everything and everything in its place! With just a little code, you can make it this easy for your customers to find what they are looking for! And now it can show which items are 2-sided!</p>';

// repeat the above for each section you want to code. Remember to change the 'numsection' variable above.

// You shouldn't need to change anything below this line.

Rotating Product Script
No, this doesn't make the images revolve, it just cycles through several product images and links to them.

/***********************************************
* Fade-in image slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Modified in DD Help Forums to optionally add Links and control over slide behavior
* Modifications marked with * © John Davenport Scheuer - jscheuer1REMOVETHISFIRST@comcast.net
***********************************************/

var slideshow_width='150px' //SET IMAGE WIDTH
var slideshow_height='150px' //SET IMAGE HEIGHT
var pause=4000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var repeat='yes' //SET to yes for repeating slideshow SET to no *
//for slideshow that cycles once and ends at the beginning
var links='yes' //SET to yes to use optional links, no for no links *

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="http://storetn.cafepress.com/nocache/4/26071324_F_store.jpg"
fadeimages[1]="http://storetn.cafepress.com/nocache/9/15187979_F_store.jpg"
fadeimages[2]="http://storetn.cafepress.com/nocache/5/24930535_F_store.jpg"
fadeimages[3]="http://storetn.cafepress.com/nocache/6/26338206_F_store.jpg"
fadeimages[4]="http://storetn.cafepress.com/nocache/4/26109694_F_store.jpg"

if (links=='yes'){
var linkimages=new Array()
//SET IMAGE LINKS. Extend or contract array as needed *
linkimages[0]='<a href="http://www.cafepress.com/teesed/706348">'
linkimages[1]='<a href="http://www.cafepress.com/teesed/444994">'
linkimages[2]='<a href="http://www.cafepress.com/teesed/680802">'
linkimages[3]='<a href="http://www.cafepress.com/teesed/717722">'
linkimages[4]='<a href="http://www.cafepress.com/teesed/711706">'
}

////NO need to edit beyond here/////////////

var a //*
var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1

function fadepic(){
if (curpos<100){
curpos+=3
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/101
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
if (links=='yes') //*
tempobj.innerHTML=linkimages[nextimageindex]+'<img border=0 src="'+fadeimages[nextimageindex]+'"></a>' //*
else //*
tempobj.innerHTML='<img border=1 src="'+fadeimages[nextimageindex]+'">'
if (repeat=='no'){ //*
if ((nextimageindex==1)&&(a==1)) //*
return; //*
if (nextimageindex==0) //*
a=1; //*
} //*
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj2.style.visibility="hidden"
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
tempobj.style.visibility="visible"
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/101
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
if (links=='yes') //*
crossobj.innerHTML=linkimages[curimageindex]+'<img border=0 src="'+fadeimages[curimageindex]+'"></a>' //*
else //*
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>(click to view)</center>

Show html only between specific dates
Good for sales or special notices that are time-sensitive.

Step 1: put this code in your "head" tags area, or somewhere above where you're going to call the script.

// This script is for use with Cafepress ad banners. This particular script defaults to the
// large CP banner, but you can easily make changes to it in the "adtext" field below.
// Jim, Teesed.com
// For questions or suggestions, please post on CP message board
// http://forums.cafepress.com/groupee/forums?a=tpc&s=8101...=80810172&r=25210272

function checkSaleDate(firstdate,lastdate)
{

// Change the variables below for your storeid and any alternative html to show.
// Remember that any single quotes have to be preceded by a backslash.
// You have 3 required changes

// Change #1 - Replace "yourshopid" with your actual shopid

shopid = 'yourshopid';

// Change #2. Select your sale banner size selection
// Remove the two slashes (//) to select your banner size, and
// make sure there are two slashes in front of the other three choices.

adchoice = 1; // large 468 x 60 banner
// adchoice = 2; // square 125 x 125 banner
// adchoice = 3; // small 120 x 60 banner
// adchoice = 4; // extra long 750 x 40 banner provided by hecticstudios.com

// Change #3) Put the alternative text you want to display before or after sale dates.
// This can be actual text, html code for an alternative image banner, or just put '' to show nothing.

alttext = '';

// no need to change anything below this line if you don't want

// Ad banner text to display between firstdate and lastdate

if (adchoice == 1)
{
adtext = '<a href="http://www.cafepress.com/' + shopid + '"><img src="http://www.cafepress.com/content/banners/promo_468x60_01.gif" width="468" height="60" alt="Store Sale Banner" border="0"></a>';
}
else if (adchoice == 2) {
adtext = '<a href="http://www.cafepress.com/' + shopid + '"><img src="http://www.cafepress.com/content/banners/promo_125x125_01.gif" width="125" height="125" alt="Store Sale Banner" border="0"></a>';
}
else if (adchoice == 3) {
adtext = '<a href="http://www.cafepress.com/' + shopid + '"><img src="http://www.cafepress.com/content/banners/promo_120x60_01.gif" width="120" height="60" alt="Store Sale Banner" border="0"></a>';
}
else if (adchoice == 4) {
adtext = '<a href="http://www.cafepress.com/' + shopid + '"><img src="http://www.hecticstudios.com/salebanner.gif" width="750" height="40" alt="Store Sale Banner" border="0"></a>';

}
else { // just in case an ad choice hasn't been made, or it is something other than 1 - 4
adtext = '<a href="http://www.cafepress.com/' + shopid + '"><img src="http://www.cafepress.com/content/banners/promo_468x60_01.gif" width="468" height="60" alt="Store Sale Banner" border="0"></a>';
}

var startdate = new Date(firstdate);
var enddate = new Date(lastdate);
var today = new Date();

if ((today >= startdate) && (today <= enddate))
{
document.write (adtext);
}
else
{
document.write (alttext);
}

} //function checkSaleDate()

</SCRIPT>

Step 2: place this text block in your web page wherever you want the text or html code to appear --
-- don't forget to change the start and end dates to match the date range!--

<SCRIPT LANGUAGE="JavaScript">
checkSaleDate("1/15/2005","5/13/2006");
</SCRIPT>

Update: The CafePress marketplace no longer redirects to shops, so this code is useless. I'll leave it up as a javascript example someone might be able to use for something.

When someone clicks on one of your products in the Marketplace, they'll see a link to your shop. This link goes to your shop homepage, not the product page for that product. Go figure. This script will take that incoming link and place the customer on your shop's version of that product where they can have a better chance of finding what they are looking for.

// this script redirects marketplace product page incoming links
// to the actual product page
// one variable to set - your shop id

var shopid = "teesed";

// that's it. No touchy!

if (document.referrer&&document.referrer!="")
{
var referrer = document.referrer;

if (referrer.indexOf("/item/") >= 0)
{
urlArray = referrer.split("/");
var prodNumber = urlArray[urlArray.length -1];
window.location = "http://www.cafepress.com/" + shopid + "." + prodNumber;
}

}

//-->
</script>

When someone views a product page, this script will show them more products from this product's section or with this product's design. Awesome for incoming search engine links where the lady might not want the men's sleeveless tee, but can quickly see that it's available on the women's tank top or magnet.

(Sorry, CafePress' forum pruned the thread explaining this product. I'll try to get it updated here as soon as I can)

Teesed's Bag o' Scripts for CafePress Premium Shops