Adding Shadowbox to Magento Ecommerce by Chad Coleman

Adding Shadowbox to Magento Ecommerce

Tricks June 20th, 2008

Here is a tutorial on how to add the Shadowbox modal box to your Magento powered online store. For those unfamiliar with Magento, it is the latest and greatest in open-source eCommerce software. Varian has done the online communi-tay a great service by building a shopcart the right way, from the ground up. Thanks Varian! Granted, Magento has a strong learning curve, so those unfamiliar with basic HTML, CSS, or hacking at code… beware.

Parlez-vous français? Voici une traduction Google.

Magento Wiki offers the help of adding Lightbox2 to your Magento install, for those not interested in the Shadowbox Modal.

Step 01

Download Shadowbox. Go with the second download option. Just the files necessary to run shadowbox.

Shadowbox has been recently upgraded and restructured. This tutorial used the previous Shadowbox version structure. I’ve compiled Shadowbox how it used to be and created the proper directory structure as well. Please use this download link for your Shadowbox files.

Shadowbox for Magento.

As you are using this tutorial to add Shadowbox to a site that obviously is for commercial purposes, you’ll need to buy the Shadowbox Commercial License for $20.

Assuming that magento is installed in your root directory (yourdomain.com) -

From the root open the /js directory

yourdomain.com/js

Inside of the /js directory create a new directory named “sb” which is short for shadowbox

yourdomain.com/js/sb

Inside of /sb lets upload the 3 shadowbox directories /build, /images, and /src. So now on the server we should have:

yourdomain.com/js/sb/build yourdomain.com/js/sb/images yourdomain.com/js/sb/src

Step 02

Lets open your template directory and drop in the CSS file that comes with Shadowbox.

This tutorial will make use of the default template. So if you are not using the default template, you’ll need to exchange the default template name for your own template directory name.

The default template can be found here:

yourdomain.com/skin/frontend/default/default/

So now, you should have the CSS file named shadowbox.css in this directory:

yourdomain.com/skin/frontend/default/default/css/shadowbox.css

The Shadowbox CSS file can be found in /build/css/ of the shadowbox zip file that you downloaded.

Step 03

Lets open your template directory and drop in the images used by Shadowbox. Open your default template, open the images directory, and create a new directory named “sb”. Drop in the images that are found in the images directory of the Shadowbox download. So now you should have

yourdomain.com/skin/frontend/default/default/images/sb/loading.gif yourdomain.com/skin/frontend/default/default/images/sb/loading-light.gif yourdomain.com/skin/frontend/default/default/images/sb/overlay-85.png

Step 04

Now we need to modify the Shadowbox Javascript. Open up the javascript found at:

yourdomain.com/js/sb/src/js/shadowbox.js

Around line 81, lets replace

[-]View Code JAVASCRIPT

1	loadingImage: 'images/loading.gif',

with

[-]View Code JAVASCRIPT

1	loadingImage: SKIN_URL + 'images/sb/loading.gif',

And around line 131 lets replace

[-]View Code JAVASCRIPT

1	overlayBgImage: 'images/sb/overlay-85.png',

with

[-]View Code JAVASCRIPT

1	overlayBgImage: SKIN_URL + 'images/sb/overlay-85.png',

Step 05

Now lets modify the Magento template files and set them to use Shadowbox. Open up yourdomain.com/app/design/frontend/default/default/layout/page.xml

Around line 42, look for

[-]View Code HTML

1	<action method="addJs"><script>mage/cookies.js</script></action>

And insert this right after

[-]View Code HTML

1
2
3

<action method="addJs"><script>sb/src/js/lib/yui-utilities.js</script></action>
<action method="addJs"><script>sb/src/js/adapter/shadowbox-prototype.js</script></action>
<action method="addJs"><script>sb/src/js/shadowbox.js</script></action>

Scroll down around line 49 and look for

[-]View Code HTML

1	css/menu.css

After that, insert this:

[-]View Code HTML

1	css/shadowbox.css

Save and close.

Now lets open up yourdomain.com/app/design/frontend/default/default/template/catalog/product/view/media.phtml

In version 1.0 (1.1.1 below)
Around line 51 find this code:

[-]View Code PHP

<?php foreach ($this->getGalleryImages() as $_image): ?>
		 <li>
		   <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $_product->getName();?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt=""/></a>
		</li>
	  <?php endforeach; ?>

And replace it with this:

[-]View Code PHP

<?php foreach ($this->getGalleryImages() as $_image): ?>
		 <li>
		   <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="shadowbox[rotation]" title="<?php echo $_product->getName();?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt=""/></a>
		</li>
	  <?php endforeach; ?>

version 1.1.1

Around line 51, replace this:

[-]View Code PHP

51
52
53

    <?php foreach ($this->getGalleryImages() as $_image): ?>
        <li><a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a></li>
    <?php endforeach; ?>

with this:

[-]View Code PHP

51
52
53

    <?php foreach ($this->getGalleryImages() as $_image): ?>
        <li><a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" rel="shadowbox[rotation]" title="<?php echo $_product->getName();?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(68, 68); ?>" width="68" height="68" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a></li>
    <?php endforeach; ?>

This just adds the rel=”shadowbox[rotation]” call to the anchor tag, to let shadowbox know that we are summoning its powers. Save and close.

Now lets open the file yourdomain.com/app/design/frontend/default/default/template/page/html/head.phtml

Lets replace

[-]View Code PHP

<script type="text/javascript">
	var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
	var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
</script>

With this

[-]View Code PHP

<script type="text/javascript">
	var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
	var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
	var SKIN_URL = '<?php echo $this->helper('core/js')->getJsSkinUrl('') ?>';
</script>
<!-- Added Shadowbox -->
<script type="text/javascript">
window.onload = function(){ Shadowbox.init(); };
</script>
<!-- end Added Shadowbox -->

Save and close.

Enjoy The Fruits

And now shadowbox should be fully functional for your product images. If you run into any problems, feel free to post questions or comments here.

And don’t forget to tip the man for his Shadowbox work!

These icons link to social bookmarking sites where readers can share and discover new web pages.

ecommerce, magento, shadowbox, Tricks, tutorials

About Chad Coleman Contact Chad

Chad has been building websites for friends, family and small businesses for the past 8 years. He currently lives and works in Coeur d'Alene, Idaho. Feel free to contact him regarding any design, web or development work.

Next and Previous Postings

36 Comments For This Post

srinigenie Says:
June 21st, 2008 at 9:13 am
Chad,

Shadowbox looks great and the tutorial seems very instructive too !! But I am seeing a lot of these and had some questions -

How to decide on lightbox or lightwindow or shadowbox
Will this cause any major impact on the page load time?
Chad Coleman Says:
June 21st, 2008 at 9:52 am
Hi srinigenie,

None of these would really cause “major” impact on the load time, but as lighbox and lightwindow both require the prototype framework, shadowbox would probably be the lightest load.

You can do the math, by finding out the file sizes of each modal box, and finding out which is the lightest. But really… they aren’t that big.
mary Says:
June 22nd, 2008 at 11:49 pm
thanks, Chad
your tutorial was very helpful
Chad Coleman Says:
June 23rd, 2008 at 12:31 am
Glad to help.
doctorlogos Says:
June 23rd, 2008 at 4:55 am
Good work! Very good explanation!
Jeff Says:
June 23rd, 2008 at 7:19 pm
Took me a while to figure out why it wasn’t working for me, … System > Cache Management> Refresh Cache. All good, thanks Chad
Chad Coleman Says:
June 23rd, 2008 at 9:33 pm
Good call. Thanks Jeff.
TechDivision Says:
June 23rd, 2008 at 10:12 pm
Hi Chad,

thanks for your tutorial, great work! It saves us a lot of time.
Brendan Falkowski Says:
June 24th, 2008 at 4:34 am
Nice rundown. I just started checking out Magento today. Was a little disappointed to see that image resizing slider, especially since everything else seems so well designed in Magento. I’ll definitely be back here when implementing the modal box.
Russ Says:
June 26th, 2008 at 12:53 pm
Seems that I’m having 2 problems. Followed your instructions to a T, but it seems that the “loading.gif” is not loading properly. Getting an X instead of the loading image. Also, this doesn’t work in firefox. Can that be fixed?
Chad Coleman Says:
June 26th, 2008 at 1:55 pm
Hi Russ,

I went into my demo cart to check into this. The loading image works for me in FF2 and FF3, and it shows a broken image link in IE7. This most likely has to do with the javascript “SKIN_URL +” that calls the default theme image directory. I guess IE7 doesn’t like it.

It’s strange to me, that the working browsers differ between you and I. Not entirely sure why that is.

The other option is to input an absolute address to the images in the shadowbox.js

Open the file yourdomain.com/js/sb/src/js/shadowbox.js

See Step 04. Instead lets replace loadingImage: 'images/loading.gif', with loadingImage: 'http://yourdomain.com/skin/frontend/default/default/images/sb/images/loading.gif',

and overlayBgImage: 'images/sb/overlay-85.png', with overlayBgImage: 'http://yourdomain.com/skin/frontend/default/default/images/sb/images/sb/overlay-85.png',

Or you could always just drop the images in yourdomain.com/js/sb/images/loading.gif so that you dont need such a long absolute url.

Hopefully that should be a work around for getting the loading image to show. I’ll have to look into a better javascript call to the theme directory.
Russ Says:
June 27th, 2008 at 12:23 pm
found the problem. seems i had placed the shadowbox.js file in the /js/sb/ folder instead of in the /js/sb/src/js folder. so the problem is fixed for firefox, yet like you said IE 7 displays an X. so our problems are now displayed the same.

Still shows an “X” even with an absolute address. But works great in FF.

Fantastic addition to the Magento community and I really appreciate the addition.

A bit off track, but do you know of a way to implement this in the catalog view using an inline popup. Meaning when browsing a category and hovering over a product, you could choose a button “Quick View” that would open the product page in an inline page. Probably overstepping what you have already contributed, but this would be a fantastic addition.

Thanks again for all your help.

Chad Coleman Says:
June 27th, 2008 at 3:40 pm

Hi Russ,

heh…. I’m not gonna lie, I read over the tutorial and found I had forgotten the /src/js/ in that address. So it was my mistake. sorry. the tutorial has since been corrected.

As far as adding a shadowbox popup of the large image in the category list view, open up the file list.phtml from yourdomain.com/app/design/frontend/default/default/template/catalog/product/list.phtml

this file shows the list view and grid view used in the default template. so you’ll need to input this code twice. once in the grid section, and once in the list view section. just search that file for call to the image, and include this code with whatever styling you may want for it.

[-]View Code PHP

	<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
(<a href="<?php echo $this- rel="nofollow">helper('catalog/image')->init($_product, 'image'); ?>" rel="shadowbox" title="<?php echo $_product->getName();?>">View Detail</a>)
	<?php else: ?>
(<a href="<?php echo $this- rel="nofollow">helper('catalog/image')->init($_product, 'image'); ?>">View Detail</a>)
	<?php endif; ?>

this will add a (view detail) link, that will popup the large image in shadowbox.

Russ Dyer Says:
June 27th, 2008 at 8:57 pm
You’re the man!

However, I’m getting syntax errors from magento. Have you tested this code? Or am I just adding it to the wrong section? I put it after around line 95.

I appreciate everything.

Russ
Russ Dyer Says:
June 27th, 2008 at 9:02 pm
I get the following error:

Parse error: syntax error, unexpected ‘=’, expecting ‘,’ or ‘;’ in /myurl/app/design/frontend/poker/modern/template/catalog/product/list.phtml on line 98
Chad Coleman Says:
June 28th, 2008 at 1:42 am
I’ve tested this, so I know its good. What do you have for line 98?

I pasted that code right under the call to the image.
Russ Dyer Says:
June 28th, 2008 at 6:52 am
If I use:

$this->helper

on both lines instead of:

$this- rel=”nofollow”>helper

then the image pops up but without using shadowbox. any ideas?
Chad Coleman Says:
June 28th, 2008 at 11:07 am
Yea, sorry bout that. WordPress automagically inserted that re=”nofollow” in there, and it fubar’d the code up. I guess my code plugin only works for posts and not comments. Just strip that rel=”nofollow” out, and you should be good to go.

Also be sure to click the “View Code” button when copying the code. As long as you keep the rel=”shadowbox” inside the anchor tag, it should call shadowbox.

You might need to add the rel=”shadowbox” to the anchor tag after the “else”. I’m not seeing it in that above code I gave you.
Russ Dyer Says:
June 28th, 2008 at 2:21 pm
Yeah, I’m not sure.

I added the rel=”shadowbox” within the else anchor and it still doesn’t call upon shadowbox.

Thanks for all the help.

Russ
Aric Ross Says:
June 29th, 2008 at 2:33 am
Great tutorial, worked like a charm on the first go around with no errors. Thank you.
Russ Dyer Says:
June 29th, 2008 at 6:17 am
Chad,

My bad. It does work perfectly. The original Shadowbox tutorial I worked on in the Default/Modern template. And I did the Shadowbox View Detail tutorial under the Default/Default template. Works great! Thank you for all the help!

Russ
Gary Hides Says:
July 8th, 2008 at 8:21 am
Doesn’t seem to work for me - although there was no /lib/yui-utilities.js in my shadowbox download.

In fact, the structure just seems to be different to what you were mentioning. Like, there wasn’t another js folder in sb/src/.
Chad Coleman Says:
July 8th, 2008 at 8:32 am
Indeed. It appears that Michael just recently upgraded the script to 2.0, and has added the option of choosing which framework to use. Some big directory restructuring has been done.

I’ll have to ask him to include the previous version for download, in order to keep this tutorial good.
Gary Hides Says:
July 8th, 2008 at 8:54 am
Thanks for the feedback Chad.

Any chance of you uploading the files you worked with, so then you’re never going to come up with this problem again. Obviously, making sure people pay the $20 if they use it on a live commercial site.
Chad Coleman Says:
July 8th, 2008 at 9:10 am
Hi Gary,

Files are up.
Gary Hides Says:
July 8th, 2008 at 9:18 am
Awesome work. Thanks!
Gary Hides Says:
July 8th, 2008 at 9:21 am
p.s. Your portfolio link doesn’t work.
Chad Coleman Says:
July 8th, 2008 at 9:27 am
You bet. Heh, yea, I’m still kinda workin on this place as I find time. My moonlighting site is at frontierwebdesign.com
Gary Hides Says:
July 8th, 2008 at 9:41 am
Nice. I see you have a few sites. A family one too!

Thanks for the help in getting it to work. It seems fine now.
Woody Mendoza Says:
July 17th, 2008 at 7:50 am
Chad, Thanks for for sharing this tutorial. Worked like a charm. You should definitely add this to the Magento wiki.
Jeff Says:
July 26th, 2008 at 6:12 pm
Step05
Around Line 51 of

yourdomain.com/app/design/frontend/default/default/template/catalog/product/view/media.phtml

now appears different in latest magento 1.11
Chad Coleman Says:
July 28th, 2008 at 9:53 pm
Thanks Jeff. I’ve added an update, that includes version 1 and 1.11.

If you compare the code, you’ll see that basically, we’re just adding the rel=”shadowbox[rotation]” call to the anchor tag, with a minor change to the href.
Black Cat Says:
July 31st, 2008 at 7:31 pm
the guide is bad.

path him some files they don’t coincide with the zip of shadowbox and besides the method is not proper for those that have a multistore.
The relative paths are especially problematic in cms as Magento
Black Cat Says:
August 1st, 2008 at 3:22 am
ok sorry. I have read the guide in magento-wiki, don’t this.
Own Security Says:
August 11th, 2008 at 6:44 pm
Really good explanations! A lot better than many Wiki on Magento official website!

Thanks a lot Chad!
combicart Says:
August 27th, 2008 at 1:40 am
I’ve installed sb on my Magento 1.1.3 installation. Everything works fine exept the ‘Close’ button isn’t shown. The loading image, previous and next buttons are there but no close option. Have I missed a step or are there more people with this problem?