Attractive pop up window in Magento using window.js

Attractive pop up window in Magento using window.js

All Magento store owner might have felt at one point of time to open some of their pages inside a light box or pop out window. The most common problem with that is loading external JavaScript files causes conflict with the underlying prototype script of Magento. There are many work-around for it but here I am going to talk about a very simple solution for it.

You can display any of your Magento pages or URLs, be it product detail page, contact page, customer registration or even blocks like recently added products or products in wishlist or compare products in a simple pop out window without having to load external jQuery or .js files for it. What you need to do it make use of the default window.js provided by Magento itself.

Yes, Magento provides the feature to display any page inside a light box. All you need to do is define a function in your template file and pass a URL to that function. This can be accomplished in three simple steps:

1. Add .js and .css files

2. define the function

3. call the function

Let us see all the steps in a bit more detail. First we need to add the JavaScript and css files for it. Your Magento installation will be containing a file called window.js at root/js/prototype/ folder. For the style sheet you can find themes under the same prototype folder but a bit more deeper. You need to have all the following files in your theme too root\js\prototype\windows\themes\default.css

Add both of these files in your theme’s page.xml head block like this:

Source code

<action method="addJs"><script>prototype/window.js</script></action>

<action method="addCss">

<stylesheet>prototype/windows/themes/default.css</stylesheet>

</action>

Now you can declare the function in a file that you want to display in a pop up window. For example if you want to show the compare products in a pop out box you can add the following function in the catalog/product/compare/sidebar.phtml file of your theme.

Source code

<script type="text/javascript">

function showCompare(url){

win = new Window({ title: "Compare Products", url:url, zIndex:3000, destroyOnClose: true, recenterAuto:false, resizable: false, width:450, height:473, minimizable: false, maximizable: false, draggable: false});

win.showCenter(true);

}

</script>

Now we will call this function that we declared to open the compare product page in a new window. Find the code for the submit button on this sidebar.phtml and add a line like this:

Source code

<button class="button" title="<?php echo $this->__('Compare') ?>" onclick="showCompare('<?php echo $this->helper('catalog/product_compare')->getListUrl() ?>')" type="button"></button>

Where there was a function call like popWin() we replaced it with our own custom function that we just declared. This will open up your compare products page in a popup.

You can also display a specific CMS static block inside your pop out window too. Instead of passing URL you can just add an identifier(id).

Source code

<script type="text/javascript">

function showForm(id){

win = new Window({ title: "Privacy Policies", zIndex:3000, destroyOnClose: true, recenterAuto:false, resizable: false, width:450, height:473, minimizable: false, maximizable: false, draggable: false});

win.setContent(id, false, false);

win.showCenter();

}

</script>

Now this ID can be passed inside our function call like this:

Source code

<a onclick="return showForm('popup_form_policy')" href="#">Privacy Policy</a>

This popup_form_policy is the id of a div tag which contains your static block:

Source code

<div id="popup_form_policy">

<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('privacy-policy')->toHtml()?>

</div>

It’s really easy to implement this without having to load external jQuery or other scripts. You can add your own styles to make it more attractive.

Try it once. If you have any problem during implementation let us know.