How to make a pop up window and filled it with product suggestions

Question

Ideally I want to use Observers when a client presses the buttons "Add to basket" or "Proceed to Checkout" to make a pop up window and make some suggestions on products. My problem is how can we make a pop up window with magento. Is there a way to make a .phtml and use that as a pop up window? Or the only way is to do it using jquery. I don't want to change the standard behaviour of the buttons, just to add some suggestions with products from the site.

Answer 1

First of all create extension in lacal pool.

In layout xml of your extension add prototype window library call(it is included in magento but is not called).

<reference name="head">
    <action method="addItem">
        <type>js</type>
        <name>prototype/window.js</name>
    </action>
</reference>

After in template where you want to open popup add javascript code

function showPopup(sUrl) {
    oPopup = new Window({
        id:'popup_window',
        className: 'magento',
        url: sUrl,
        width: 820,
        height: 600,
        minimizable: false,
        maximizable: false,
        showEffectOptions: {
            duration: 0.4
        },
        hideEffectOptions:{
            duration: 0.4
        },
        destroyOnClose: true
    });
    oPopup.setZIndex(100);
    oPopup.showCenter(true);
}

function closePopup() {
    Windows.close('popup_window');
}
//here assign click event to a tag with href to the content you want to display in popup
document.observe("dom:loaded", function() {
    $$('button selector')[0].observe('click', function(oEvent) {
         showPopup($(this).readAttribute('href'));
     Event.stop(oEvent);
   });
});

More information about Window object usage you can find here.

This is working in this Captcha extension. So you can install it and take a look how it works.

Answer 2

Checkout the below code for using magento's inbuilt lightbox and modify it as per requirement. Tried and Tested

add include below files using layout xml

<action method="addItem"><type>js</type><name>prototype/window.js</name></action>
<action method="addItem"><type>js_css</type><name>prototype/windows/themes/default.css</name></action>
<action method="addCss"><name>lib/prototype/windows/themes/magento.css</name></action>

below is the prototype function which will invoke the widowbox

function showPopup(sUrl) {
    oPopup = new Window({
    id:'popup_window',
    className: 'magento',
    url: sUrl,
    width: 820,
    height: 600,
    minimizable: false,
    maximizable: false,
    showEffectOptions: {
        duration: 0.4
    },
    hideEffectOptions:{
        duration: 0.4
    },
    destroyOnClose: true
    });
    oPopup.setZIndex(100);
    oPopup.showCenter(true);
}

function closePopup() {
    Windows.close('popup_window');
}

invoke function using below code

$('test_me').observe('click', function(event) {
    showPopup('<?php echo Mage::getUrl("customer/account/login") ?>');
    //Event.stop(oEvent);
});