Magento comes with a lot of files, utilities and libraries, one of which is window.js. It is a Prototype based library implementing some classes that allow you to add windows to a web page. This can be simple pop-ups and modal windows and dialogs. They can be dragged, minimized, resized and closed. You can open multiple windows if you wanted to. You can load content from a link, an HTML container on the page or via Ajax. This library is seriously versatile. The Magento admin already uses window.js for various pop-up functions such as the widget options and image management. Well if the back end can do it, then the front end can too.
How to use it
The library is located under [magento_root]/js/prototype/window.js. Additionally, window.js comes with a bunch of CSS themes found under: /js/prototype/windows/themes/*. To load the library in the front end we will make or add an entry to our design theme’s local.xml:
<default>
<reference name="head">
<action method="addJs"><script>prototype/window.js</script></action>
<action method="addItem"><type>js_css</type><name>prototype/windows/themes/default.css</name></action>
<action method="addItem"><type>js_css</type><name>prototype/windows/themes/magento.css</name></action>
</reference>
</default>
The bare minimum necessary to make the windows look right is default.css. In our example above, we are also loading a supplied window.js theme: magento.css. This is the theme that the back-end loads. Now, that we have the library and styles loaded, what can we do with this? For example, we can load the compare items page in a nice pop-up instead of opening a new window. Make an override of the template/catalog/product/compare/sidebar.phtml in your local design theme and add the following to the end:
<script type="text/javascript">// <![CDATA[
function showCompare(url) {
winCompare = new Window({className:'magento',title:'Compare Products',url:url,width:820,height:600,minimizable:false,maximizable:false,showEffectOptions:{duration:0.4},hideEffectOptions:{duration:0.4}});
winCompare.setZIndex(100);
winCompare.showCenter(true);
}
// ]]></script>
Also modify the line that says:
<button class="button" title="<?php echo $this->__('Compare') ?>" onclick="popWin('<?php echo $_helper->getListUrl() ?>','compare','top:0,left:0,width=820,height=600,resizable=yes,scrollbars=yes')" type="button"></button>
to:
<button class="button" title="<?php echo $this->__('Compare') ?>" onclick="showCompare('<?php echo $this->helper('catalog/product_compare')->getListUrl() ?>')" type="button"></button>
Add some items to compare and click on the “Compare” button and, voila, your compare page loads in a nice pop-up. I know, the Magento window theme isn’t exactly the most exciting one, but you can copy a theme CSS file to your local skin CSS folder and customize to your heart’s content.
Now, we might notice that the button actions in the compare window don’t quite work as expected. This is due to some of the links like Add to Cart and Add to Wishlist use setPLocation to set the target page URL. This won’t work in our pop-up since window.js loads the page into an iframe. So the remedy is to override the product/compare/list.phtml and add:
<script type="text/javascript">
// <![CDATA[
function setILocation(url){
window.parent.location.href = url;
}
// ]]>
</script>
Then replace all setPLocation calls with setILocation.
The close button won’t work either but you don’t really need that as the window provides its own close button so you can simply remove it from the template.
Conclusion
In our example we saw how to open the compare page in a window.js pop-up. You can use this approach to create size guide pop-ups for example. However this is a powerful library and can do much more that just pop-up windows. To get a good overview of its power, visit the window.js homepage at prototype-window.xilinus.com. You will find the documentation and a few examples there.
Originally published on magebase.com. Copyright © 2011 Magebase - All Rights Reserved.
Proud members of the 
Hi, thanks for this code but in the compare window, ‘Close Windows’ Button don’t work
Yeah, that’s exactly what I said just before the conclusion in my article. You can remove the close button, or change the javascript to make it work.
Doh ! My bad. Nice quick tip
Thanks very much Robert…excellent! mod
Hello!
Thanks for great article. I just have done all of this for my compare list.
I can share additional js to close window with default “Close this window” button in compare list:
1. Replace onclick=”window.close();” with onclick=”close_window()”;
2. add this to js section in the end:
function close_window() { var elements = window.parent.document.getElementsByClassName('dialog'); for (i = 0; i < elements.length; i++){ id = elements[i].firstChild.id; break; } id = id.replace('_close',''); window.parent.Windows.close(id, event); }Hello, i added the button and the javascript to my page. But in firefox the window won’t close. In every other browser it works but not in firefox. Do you have a idea what’s the solution for this problem is?
best regards
Stefan
Hello Beautiful people, i just saw this and i think is going to solve the problem i am having for long time now. Please can anyone put me in the right direction? I want create a block to put anywhere and any page on my magento site and to as soon as the page loads. I cannot realize it with this method, i know it is my fault, please how can i do it? In the parameter supplied in new window instance, where did the “className ” came from?
Best Regards
The only local.xml file I found is the one from etc/local.xml which contains the configuration file. Are you actually referring to the page.xml or catalog.xml?
Thanks…
I added the below code to page.xml
<default> <reference name="head"> <action method="addJs"><script>prototype/window.js</script></action> <action method="addItem"><type>js_css</type><name>prototype/windows/themes/default.css</name></action> <action method="addItem"><type>js_css</type><name>prototype/windows/themes/magento.css</name></action> </reference> </default>By referring to local.xml I mean the local.xml file you can place in: app/design/frontend/[package]/[theme]/layout/local.xml.
It is used to override the various layouts from the other xml layout file without having to change those or copy them into your custom theme. This is the recommended method for overriding and customizing the Magento theme layouts.
You can read more about this here: http://magebase.com/magento-tutorials/5-useful-tricks-for-your-magento-local-xml/
Hi Robert,
Thanks a lot, I actually change my implementation to use local.xml as I like that concept of clean update and it works for me too.
Hi,
Robert, I am new to JavaScript, please help me.
I want based on your example to make a pop-up message on the product page.
How correctly do it?
You could create your own showPopup(…) Javascript function as per example of the showCompare(…) function, then in your link, use onClick=”showPopup(…)”.
To load the library in the front end where i need add an entry to my design theme’s?
You can add the lines in the first code block on this page to your theme’s local.xml as outlined. Read this article to learn more about local.xml.
Hi Robert,
Loved your posts about local.xml and on the easy pop.up, both helped a lot !
Now I’m stuck with trying to change the appearance of my product comparison pop-up.
The only thing I want to do is changing the order in which the attributes are shown … that’s all, but I can’t find where to change it.
Can you direct me in the right direction ??
If you look at the template that outputs the compare items,
template/catalog/product/compare/list.phtmlyou will see the section outputting the attributes:So, you could create yourself a helper method in your custom extension that will re-order the return from
$this->getAttributes()to your liking.The problem is that your products may have various attributes so your sorting method will need to be flexible to handle this. If you are using attribute sets, then this can get quite involved. Unfortunately, there seems to be no simple way to go about this.
Another avenue could be exploring the attribute’s position property but that is only available for edit for attributes used in the layered navigation so using this would not be meaningful unless you manage to make it editable in the attribute admin. If you do manage this, then your sorting routine would be potentially as simple as adding a
$attributes->setOrder('position', 'ASC')filter to the attribute collection.Tnx !
I’ll look into it a bit further, but it sounds out of my league.
Just thinking …. could I add some kind of sorting method (let’s say alphabetical) to the foreach line in list.phtml you mentioned ??
Thank you for the tutorial(s). How would i achieve this for a more simple purpose? I know the first step where you add the js / css is universal, but because this tutorial describes how to modify compare, it leaves me confused if i just wanted to make an <a> tag that pops up a window with some information — basically can you please provide me with more simple example to help the lesson hit home?
Thanks,
Maier
What you need is pretty much already in the article.
1. create your own showMyWindow() javascript function as shown with the showCompare function. You don’t need a URL unless you’re opening a full page in the popup as we did with the compare page.
2. Follow examples form the documentation of the window.js library showing how to load arbitrary HTML into your popup. Add the code for that in your showMyWindow() function.
You will understand that we can’t provide everyone with specific tutorials and examples so, you will have to have some reasonable knowledge in working with JavaScript and do your own additional research.
If anyone in this comment thread has an example for Maier’s question, please feel free to help out, thanks
.