How to: If you look at the source code there, you'll see the script between the two comment codes with "likewise" in them. Put the code in the top part of your "Footer" section of your "Custom HTML". If you have any Cafewish Categories code, make sure to put it after that code.
What I need: Testing and feedback. For now, I like just showing the products instead of adding the product titles, etc. and that's easier on the code. I can just slam pic after pic without worrying about layout. If you have a wide store, it will go 5 or 6 before wrapping. I also figure someone might like to put in their own background color of the iframe to match their site. I've also limited it to the first 30 products to come with the design but maybe you'd want to pass that through as a variable as well.
And if a javascript guru has a better way to do what I did, feel free to let me know. I'm just good enough to be dangerous...
Caveat: I only have two api keys, so if bazillions of people are on at the same time, it may not return a product list, but there will only be problems in the iframe, and your page will still load. I reserve the right to remove this at any time, so you may want to set this topic to "notify".
Cost: Free
Installation: From your Shop Management page for that shop, go to "Customize Shop Appearance" then "Custom HTML".
Scroll down to the text area that has "Footer" above it. Click into that box and move your cursor to the very first line. If you know your template and know where you want to put the actual code, proceed below. If you don't know much about the html, type something like "here?" then hit the "Save" button. Go to a page on your shop and search for "here?" to see if it's in the right spot. If it's not, go back to your Custom HTML page and move the "here?" around until it's where it should be. I'm putting mine right under the rest of the main contents section. Once you've found where you want it to go, copy this code and paste it right there in place of "here?".
<!-- begin likewise by Cafewish.com --> <script type="text/javascript"> <!-- var storeUrl = location.href; var splitStoreUrl = storeUrl.split("cafepress.com"); var partTwo = splitStoreUrl[1]; var foundDot = partTwo.indexOf("."); var noShow = partTwo.indexOf(".aspx");
if (foundDot>1 && noShow==-1){ document.write('<iframe frameborder="0" src="http://www.cafewish.com/likewise.asp?fontsize=16px&fontcolor=lawngreen&fontfamily=Times New Roman&thumbsize=75px&bgcolor=ffffff&maxresults=9&title=Check%20out%20these%20other%20great%20products:" width="325" height="780"></iframe>');
} --></script> <!-- end likewise by Cafewish.com -->
(last code update 5/25/08 4:52 pm US CST)
Click "Save"
Go to your shop. You shouldn't see anything on the storefront or any section page, or bio or cart pages. This should only appear on product pages.
This message has been edited. Last edited by: Teesed,
This is really cool! I put it in one of my premium shops, but there was a problem, and then I moved it to a different premium shop and had the same problem. The script seems to be spreading across the entire area but UNDERNEATH the sidebar instead of the correct area to the right of it. You can see it here:
I've made my own templates, but I'm using the sidebar. The template is a very simple surrounding table.
When I tried it in my shop that does NOT use a sidebar, but uses more extensive tables, it acted like there was some kind of extra table codes in there - it didn't stretch all the way across like in the example above, but it seemed to cut off the rest of the page from loading, after the iframe. (I took the code out, but shoot me a note if you want more details.) And 'more products with this design' was flush right for some reason - may be the way I've coded the table though - not sure.
On the plus note - cool! It pulls up the products nicely! :-) I don't know if the API can do this, but if you could give us the option of pulling up similar products by SECTION (and putting 'similar products' instead of 'products with same design' in case a person has done sections by product instead) that would ROCK - I use different images for tees, journals, etc. One of the limitations of the marketplace is that it only shows similar products by which image is being viewed, not design section. That might not be do-able with current setup, but I thought I'd ask.
Also, being able to do this in my off-site shops would be great too. Just sayin'.
thanks for losing sleep on this! :-) Kristen
CafePress Voice - A community-elected Shopkeeper focus group. We don't make policy, but we do make noise!
Kristen, good point about the placement. If you've got tables and such, you may need to play around with the placement (Edit - just added this info to the OP). In fact, you might just put a little text like "
(test)
" where you will put it and test out the placement with that first. When you find it's in the right spot, then put the code there.
The "more products with this design" is in the javascript code itself, so you can control what that says, where it goes, how it looks, etc. with a little html there. You can even control the height of the iframe to make it tall enough not to scroll if you want. The only thing "out" of your control is what is in the iframe itself, but I will add some parameters to that soon.
As for "by section", I'll see about that. The problem is that to get this, I use the product api to get the design number, then open the CP page with that design on it to get the products with that design. If I use that api to find out what section the product is in, if the product is in more than one section I'm not sure what will happen there. But I'll let that run around in my head.
As for the loss of sleep, I was working on another project (yes, yours Susan) and had to get away from it for a bit. This has been on my mind for a while, so it was nice to get it off "the list". :P
This message has been edited. Last edited by: Teesed,
Buzz Edition Blog Looking for hot newsworthy quality designs and the big story they were inspired by. PM me with the design link and a link to the story behind it for inclusion at Buzz Edition. Entertainment, Elections, Pop Culture, Etc.
I think that this will really help with sales to customers who find my designs through Google Products. This way they'll be able to look at each design on multiple products simultaneously, rather than just exiting my shop after deciding that they're not that interested in the original, single product that they chose to view.
My pleasure. I've added some variables to the script url to customize it a little more.
These are all added on to the end of the url like this:
src=.../likewise.asp?bgcolor=ffffff&maxresults=9
these are all optional and have defaults:
parameter, value, default bgcolor,rgb color value without the "#",nothing background, a background image url, nothing maxresults, max number of designs to return, 15
So, if you have a background color or image to match up, use either of those.
If you want it to default to no more than a certain number of products, use that. This is useful like I've got my demo page done right now. I set the max to return 9 designs. I know with my template that will return 3 wide, so it will be no more than 3 high. So, 3 x 150 height of the image comes back as 450, plus a little cushion, so I'm setting the height of my iframe to be 500 which won't ever show a scrollbar. It will look like part of the page! If you want it to show more than 15, then put what you want. If you put 30 and a height of 500, only three rows will show, and there will be a scrollbar to see more.
Have fun and send any suggestions along the way. I likely won't tweak much from here forward unless it's a realllllly good idea. Or if it's late and I need a break from other stuff.