«

»

Dec
04

Opening Compare Items Page In a Nice Pop-Up In Magento

To open compare item page in modal window we need to edit file ‘sidebar.phtml’ path given below

template/catalog/product/compare/sidebar.phtml

add the following js at the end of sidebar.phtml

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

we also need to edit like

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

With

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


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. and you are done

2 comments

  1. jarod says:

    You should also mention about adding window.js and css files to page head :)

    1. admin says:

      Magento works on prototype.js and window.js and its css already included no need to add those files

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>