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 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.