0

I have some pop ups like:

  • Popup that open when user stay in site above 30 seconds/visit X pages etc...
  • Popup that open when user click on login/register/some button etc...

Each popup have a black background (with opacity) and I think to do that like that:

  1. Create an appropriate DOM container that loads in all pages:

    <div id="popup-container" style="display: none">
        <div class="close-btn">X</div>
        <div class="background-overlay-popupLoader"></div> 
        <div class="popup-content center-mid"></div>  
    </div>
    
  2. Create a module that handle the Ajax requests via controllers:

config.xml:

<?xml version="1.0" encoding="utf-8" ?>
<config>
    <global>
        <modules>
            <Michael_PopupLoader>
                <version>0.0.1</version>
            </Michael_PopupLoader>
        </modules>
        <blocks>
            <popup_loader>
                <class>Michael_PopupLoader_Block</class>
            </popup_loader>
        </blocks>
    </global>
    <frontend>
        <routers>
            <popup_loader>
                <use>standard</use>
                <args>
                    <module>Michael_PopupLoader</module>
                    <frontName>popuploader</frontName>
                </args>
            </popup_loader>
        </routers>
        <layout>
            <updates>
                <popup_loader>
                    <file>popupLoader.xml</file>
                </popup_loader>
            </updates>
        </layout>
    </frontend>
</config>

IndexController.php

<?php
    class Michael_PopupLoader_IndexController extends Mage_Core_Controller_Front_Action {
        public function loginAction(){
            /*First way*/
            $this->loadLayout();
            $this->renderLayout();
            /*Second way*/
            $block = $this->getLayout()->createBlock('core/template')->setTemplate('customer/form/loginPopup.phtml');
            $this->getResponse()->setBody($block->toHtml());
        }
    }
?>

As you see I tried two ways:

  1. Create block in the controller, it's works but then I can't do: $this->getChildHtml("anotherBlock") in loginPopup.phtml.
  2. Create layout file popupLoader.xml and I tried remove all code so I'll get only loginPopup.phtml (without the default blocks that load in any page like header, footer etc..) but I can't get rid from page/Xcolumns-right.phtml:
<layout version="0.0.1">
    <popup_loader_index_login>
        <remove name="head" />
        <remove name="header" />
        <remove name="right" />
        <remove name="left" />
        <remove name="footer" />
        <block type="core/template" name="catalog.topnav" template="customer/form/loginPopup.phtml" />
    </popup_loader_index_login>
</layout>
  1. And finally load the block contents with ajax and I expect get loginPopup.phtml contents only! (without header/footer etc...):

    $(content).load("/popupLoader/index/login", function () { $(popupCont).fadeIn(); });

I don't sure that I am doing it right.

I'm trying to do that right? How should I do that?

I will appreciate any source-code, free-plugin, github-repo that I can learn from it.
Thanks
Michael P.S: I tried to highlight my code but..

  • Hello Michael, welcome to Magento SE. Could you please show us the files that you have tried ? could you please be more specific to your question. Question seems to be too broad now. – Rajeev K Tomy Aug 24 '15 at 3:48
  • @RajeevKTomy you absolutely right, I edited my question. Thank you. – Michael Aug 24 '15 at 7:33
  • seems a bit over complex for a popup, why don't you just put the html required for the modal popup into the footer? – paj Aug 24 '15 at 10:29
  • @paj Do you mean load them all and then display:none? because I have a lot of pop ups, it's will be mistake to load them in any page, magento is heavy without our help :) so I trying to load the popup content only when required. – Michael Aug 24 '15 at 10:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.