Product Zoom in Zazzle Store Builder
Zazzle Store Builder, ZSB, is a free tool released by Zazzle to help their shop owners create websites to showcase their Zazzle products. It's fairly flexible, very easy to use and does a great job of shielding non-programmers from all the crazy looking code needed to generate a product display from Zazzle's RSS feeds.
However, the default display ZSB generates looks pretty lame. The CSS file is well commented so that users can make visual customizations but the display's html is buried in the crazy looking code. This can make it difficult to add javascript enhancements that can make your ZSB site more customer-friendly.
The Problem
How can we enhance ZSB sites with features like the product zoom on Zazzle.com? When you browse Zazzle's marketplace and hover over a product the display zooms in and gives you an up close view of the design. Wouldn't it be great to be able to do that on your ZSB site too!
The Solution
Apparently, Zazzle uses the UIZE javascript framework to make it's UI enhancements like product zoom work. Fortunately, UIZE is open source so ZSB site owners can do the same. Here's how:
- First, download UIZE here. (Note: There's a lot in that package including some pretty cool examples of UIZE in action but you won't need all of it for this tutorial.)
- Copy the following files from the "uize_framework/js" directory in the zip file you just downloaded to a new folder called "js" in your ZSB root directory.
- Uize.js
- Uize.Fade.js
- Uize.Node.js
- Uize.Widget.Button.js
- Uize.Widget.CollectionItem.js
- Uize.Widget.CollectionItem.Zooming.js
- Download "Z.Page.library.js" below and put it in your "js" folder too.
Now you've got to make a few changes to your ZSB pages. Open up one of your ZSB pages in a text editor and do the following:
- Somewhere between your <head> and </head> tags add this line:
<script type="text/javascript" src="js/Uize.js"></script>
- Just before the closing </body> tag add these lines:
<script type="text/javascript">
window.$page_$$ = {
idPrefix:{root:'centerGrids',tagName:'DIV',className:'gridCell'},
widgetClass:'Uize.Widget.CollectionItem.Zooming',
previewZoomUrl:function () {return this.get ('previewUrl').replace ('<?php echo $gridCellSize; ?>','500')},
zoomPower:2
};
</script>
<script type="text/javascript">
Uize.module ({required:['Z.Page.library'],builder:function () {(window.page = new Z.Page).wireUi ()}});
</script>
Next, we'll need to edit "zstore.php". By default it should be located in the "include" folder. Open it in a text editor and do the following:
- Find this line:
<div class="centerGrids" style="width:<?php echo $gridWidth?>px">
and replace it with:
<div id="centerGrids" class="centerGrids" style="width:<?php echo $gridWidth?>px">
- Find this line:
if ( $key=="items" ) {
and add this line below it:
$zi = 0;
- Find this block of code:
// output the product's grid cell
echo <<<EOD
<div class="gridCell" style="width: {$gridCellWidth}px;margin:0 {$gridCellSpacing}px {$gridCellSpacing}px 0;">
<a href="$link" $analyticsLink class="realviewLink" style="height: {$gridCellHeight}px;"><img src="$imageSrc" class="realviewImage" alt="$title" title="" style="border:2px solid #$gridCellBgColor;" /></a>
<div class="gridCellInfo">
$displaytitle
$desc
$byline
$displayprice
</div>
</div>
EOD;
and replace it with:
// output the product's grid cell
echo <<<EOD
<div id="grid_item$zi" class="gridCell" style="width: {$gridCellWidth}px;margin:0 {$gridCellSpacing}px {$gridCellSpacing}px 0;">
<div style="width: {$gridCellWidth}px;height: {$gridCellHeight}px;overflow: hidden;">
<a id="grid_item$zi-previewShell" href="$link" $analyticsLink class="realviewLink" style="height: {$gridCellHeight}px;"><img id="grid_item$zi-preview" src="$imageSrc" class="realviewImage" alt="$title" title="" style="border:2px solid #$gridCellBgColor;" /></a>
</div>
<div class="gridCellInfo">
$displaytitle
$desc
$byline
$displayprice
</div>
</div>
EOD;
$zi++;
At this point the product zoom should be working. However, if you're using ZSB's default CSS stylesheet you will probably see the large image pop out of its frame when you hover over a product. You can fix that by adding one line to your "css/zstore.css" file.
- Look for the line:
.gridCell .realviewLink {
and add the following line underneath it:
position:relative;
- Note: If you're having this problem with a customized css file you'll have to play around with CSS a bit to get the large image contained.
That's it! If everything is setup correctly, you'll get Zazzle's product zoom effect on all the products in your ZSB grid. Note: So far this only works with one grid per page. I'll post an update when I get it working for multiple grids. To see a sample of this in action, download the full source here:
Enjoy!
Related posts:
Thank you so much for posting this. I was able to get it to work after using the .js files in your zip. Apparently the latest ones no longer work.
Here is the million dollar question…..
How do you get it to zoom up and outside the box instead of inside?
Like this person has: http://gifts.girlscantwhat.com/poster/
I’ve ran into a bit of a bigger problem. If zstore caching is enabled so that the images are served from my host, the hi res images are no longer used when zooming in.
How would one correct this?
By default, the cached images are stored in a “C” directory relative to the file being served.
I’ll have to look into it to be 100% sure but my guess is that the zooming will not work with cached images because the javascript code behind this expects the hi-res image to be in the same location as the low-res being differentiated only by a numeric value in the url that specifies the size of the image.
For example: If you are using low-res images that are 100px square the image url will contain the number “100″. The product zoom javascript will then look for the number “100″ in that url, replace it with a 500, and use the new url as your hi-res image.
I’m not sure off hand whether or not a cached image would contain the size of the image but even if it did, there would be no matching hi-res image available in that location.
I hope this makes sense.
Thank you for bringing that up. I personally never use the cache option so I didn’t think to test with it.