Adding Shadowbox to Magento Ecommerce
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.
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
loadingImage: 'images/loading.gif',
with
loadingImage: SKIN_URL + 'images/sb/loading.gif',
And around line 131 lets replace
overlayBgImage: 'images/sb/overlay-85.png',
with
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
<action method="addJs"><script>mage/cookies.js</script></action>
And insert this right after
<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
css/menu.css
After that, insert this:
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:
<?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:
<?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:
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:
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
<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
<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!
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?
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.
thanks, Chad
your tutorial was very helpful
Glad to help.
Good work! Very good explanation!
Took me a while to figure out why it wasn’t working for me, … System > Cache Management> Refresh Cache. All good, thanks Chad
Good call. Thanks Jeff.
Hi Chad,
thanks for your tutorial, great work! It saves us a lot of time.
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.
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?
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',withloadingImage: 'http://yourdomain.com/skin/frontend/default/default/images/sb/images/loading.gif',and
overlayBgImage: 'images/sb/overlay-85.png',withoverlayBgImage: '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.
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.
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.phtmlthis 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.
this will add a (view detail) link, that will popup the large image in shadowbox.
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
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
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.
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?
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.
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
Great tutorial, worked like a charm on the first go around with no errors. Thank you.
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
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/.
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.
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.
Hi Gary,
Files are up.
Awesome work. Thanks!
p.s. Your portfolio link doesn’t work.
You bet. Heh, yea, I’m still kinda workin on this place as I find time. My moonlighting site is at frontierwebdesign.com
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.
Chad, Thanks for for sharing this tutorial. Worked like a charm. You should definitely add this to the Magento wiki.
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
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.
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
ok sorry. I have read the guide in magento-wiki, don’t this.
Really good explanations! A lot better than many Wiki on Magento official website!
Thanks a lot Chad!
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?
The update to 1.1.4 has broke my shadowbox integration. will this happen with every update?
Just a problem with the closebox that doesn’t appear
hi there,
I am using Magento ver. 1.0.19870.4
I am trying to make the required changes to
yourdomain.com/app/design/frontend/default/default/template/page/html/head.phtml
However this is the only code in the file…which is significantly different to what the tutorial says is in it!
getCssJsHtml() ?> getChildHtml() ?> helper('core/js')->getTranslatorScript() ?>
I tried adding the code in the tutorial however it did not work.
Please can you help
Callum
Great! You’re the best!
I am running Magento 1.1.6 and was wondering if there are any changes I need to know about before adding this to my web?
My first run was unsuccessful as my header gave me a Blank and SKIN error.
Rick
I am using magento 1.1.8
Error:
Warning: simplexml_load_string() [function.simplexml-load-string]: Entity: line 50: parser error : AttValue: ” or ‘ expected in D:\EasyPHP 2.0b1\www\magento\app\code\core\Mage\Core\Model\Layout\Update.php on line 293
any idea?
Thanks for all.
Hey
Absolutely great tutorial.
On version 1.1.8, no joy. There are a few differences and I tried to work my way around them. However, it seems I’ve failed.
Scratch that. Works wonderfully. I’m with Jeff on the cache.
Coding is a little different still, but it’s intuitive.
This method is still a go in 1.1.8
Hi ,
firsty i’m sorry for my poor english, i’m french.
I want to say thank you, it’s a very good work.
I have a question :
i don’t understood how to put an html page into a shadowbox.
Example : i want to open a shadowbox with the login page when the user click on “addtocart”.
Is it possible ?
Thx a lot for your help, i spent 2 days between your website and the mickael jackson’s website.
Hi Miko,
That sounds to be a pretty big job. I don’t think you’ll find support for something like that. You may need to hire a developer to solve that issue.
I have learned alot about magento web development from your site and wanted to say thanks for the tutorials. As far as future learning, I am really interested in using jquery with magento. Also, learning how to create custom queries and pulling specific data out of magento to display on custom pages. My ultimate feat would be to learn how to create a popular feature known as “quick view.”
It can be seen on big name retailers websites like http://www.ae.com or http://www.moosejaw.com. On a category page, mouseover a product image and you will see a link “quick view” and it will popup a modal box with the product view page loaded into it.
Another feature I would like to learn to implement into magento is the main top navigation system on the aforementioned websites.
I hope this helps to find future articles to write about. Thanks and keep up the great work.
Hi,
Thank you for this tutorial, it works good with magento 1.2.1.
However, there is a small problem, posted above, but without solution. There is no close button for the shadowbow opened picture. So ok, the esc key do the job, but this is not very good for unexperienced users.
I already used shadowbox, and normally, there is a close button on the bottom right corner…. Where is it ?
I have run into the no close problem as well with the latest magento release.
Have not found a solution thus far.
Any ideas?
Cheers.
Hi,
Nice tutorial but it would be cool to have the same with a recent shadowbox 2 package. The old one is deprecated and I wouldn’t install a deprecated package in a new website.
Same here. All good on v1.2.1
Except no close button on the shadowbox.
Here is a quick fix for the missing close button issue:
Create a folder named ‘images’ in the magento root
put an image named ‘closebox.png’ in that folder (i just grabbed one from google images)
The better way would be to change the code and place the image in an appropriate location. If you want to take that route, you should be looking near line 201 in shadowbox.css.
Hope this helps.
Thnx Chad for this tutorial it really helped me out!!!!
I followed this tutorial but in magento 1.2.1.2 not working … using modified default design
http://cp.nostresscommerce.cz/nase-sluzby-a-produkty/podpora-pro-magento/prirucka-ceskeho-uzivatele.html
any ideas? thanks
Hello and tx for the good job. I implemented shadowbox on the image gallery, but i’m stuck trying to replace the awful zoom thingie on the main image in product view by a nice shadowbox. Can you help?
Thanks in advance.
I HAVE A PROBLEM MY SHADOW BOX PLACE IN THE END OF THE PAGE NOT IN FRONT OF THE SCREEN.WHEN I CLICK ON THE PIC THE SHADOW BOX APPEARS END OF THE PAGE.I MUST SCROLL THE PAGE FOR SEEING THAT.
ANYONE CAN HELP ME?
You haven’t linked to your css file properly then, but the javascript is working ok
double check you have uploaded the css files, and linked to them properly
Thanks for the great tutorial. Works well with Magento ver. 1.2.1.2.
Just wondering if anyone can solve this issue: I’m also wanting to use some javascript which adds a selected state to the nav but it conficts with Shadowbox so that it doesn’t function.
The js is:
function setActive() {
aObj = document.getElementById(‘leftCol’).getElementsByTagName(‘a’);
for(i=0;i=0) {
aObj[i].className=’selected’;
}
}
}
window.onload = setActive;
Any help greatly appreciated.
Ok. Worked it out.
Incase anyone else needs to know, Shadowbox is initiated using window.onload and so was my other javascript so they conflicted. You need to add them to the same function so that there is only one window.onload. Changed head.phtml script to:
window.onload = initAll;
function initAll(){
Shadowbox.init();
setActive();
}
great work, thank you very much
Great Work, thank you
This instruction is for installation of Shadowbox 2
Shadowbox currently release Shadowbox 3.0b, which is IE8 compatible
May I know whether there is installation guide for this?
Thank you
I’ve found a similar tutorial which is about shadowbox 3.0b here: http://www.swiftcore.com/en/magento/integrate-shadowbox-alternative-lightbox-30b-magento.html
Thanks Chad for everything.
I ask you a tutorial on how to create a Magento theme. step by step.
and what are the tools and software that your suguieres.
I hope it is possible for you.
Thanks4All
I wish I had a cool blog like yours. I would love to start one myself with WordPress but I’m affraid I’d give it up too soon ^^’
If anyone is having a problem with the close button, follow the steps below.
Copy closebox.png from
js/sb/images/closebox.pngto
skin/frontend/default/YOURTHEME/images/sb/closebox.pngNext open
skin/frontend/default/YOURTHEME/css/shadowbox.cssaround line 201 you should see
background-image: url(images/closebox.png);change this to
background-image: url(../images/sb/closebox.png);save and upload.
refresh and enjoy your new close button.
this is really a great effort. i helped me alote. i was wondering how to get skin url in javascript in magento and it really helped me. thanx Chad Von Lind
The link to download shadowbox doesn’t work anymore?
My apologies. The DL link has been corrected.
hi chad,
iam newbie to magento, first of all let me thank u for such an awesome tutorial for shadowbox. i got an error after i followed ur steps the error is
Parse error: syntax error, unexpected ‘=’ in /opt/lampp/htdocs/magento/app/design/frontend/default/default/template/catalog/product/view/media.phtml on line 71
can u plz look into the error and let me know the solution for it
regards
It appears you’ve written some bad syntax, judging by the parse error. Check that line to see that you’ve written the code properly. It doesn’t know what to do with that “=” that you have in that line.
hi chad
thnx for the response, but unable to find the invalid “=” in line of code i’m sending the line that is giving plz look into the line and plz plz find the error. Desperately looking for the solution.
<a href="helper(‘catalog/image’)->init($this->getProduct(), ‘image’, $_image->getFile()); ?>” rel=”shadowbox[rotation]” title=”getName();?>”><img src="helper(‘catalog/image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())->resize(68, 68); ?>” width=”68″ height=”68″ alt=”htmlEscape($_image->getLabel()) ?>” />
Regards
Great stuff, thanks. Last thing I needed to make a new store more presentable.
Thanks for this excellent tutorial Chad, you are a true specialist.
I was wishful and not anxious for a stunner pill, I not quite desirable it (pretty) much the same as reception at minimum partition of what it claimed equivalent to levee. The colon cleanse is a wordplay. It serves NO aspiration, and has not made any disaccord. The Acia berry doesn’t festival anything at all for ambition and it makes me upset which causes me equal to faculty nasty which causes me to feel dormant. I security’t plane had the motion I as a rule have to inculcation. I took it for 10 days. I’Colloq racket forbiddance as suggestive of in the groove hence I posterior have a handful or a sprinkling or a number of energy again. I’area contrite I emaciated my wealth. Please instructor’t destruction yours