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
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
<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
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:
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>
<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:
Then replace all
setPLocation calls with
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.
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.