How to show POP UP on Page Load In Magento

A client recently requested a popup on the home page. So, I decided to implement this functionality using FancyBox, which I have been using quite a bit lately.

The first step is to add the css and Jquery to your head.phtml file which is located at app --> design --> frontend -->  default --> metro-blue(this is my theme folder) --> template -->page -->html . and then upload the  Jquery Files and css files into the appropriate folders.

Add following files to the head.phtml file as shown below:

• <link rel="stylesheet" type="text/css" href="<?php echo $this>getSkinUrl('fancybox/jquery.fancybox-1.3.4.css');?>" media="screen" />
• <script type="text/javascript" src="<?php echo $this->getSkinUrl('fancybox/jquery.fancybox-1.3.4.js');?>"></script>
• <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
• <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
• <link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl('bootstrap/jquery-ui.css');?>" media="screen" />

Once you have done that, load your home page and check in source code (right click view source) that you can actually click thru the links in source code to the jquery.min.js, jquery.fancybox-1.3.4.js, and jquery.fancybox-1.3.4.css files. If you cannot click thru to the actual file, take a look at where you are uploading the jquery and css files.

Please note use of jQuery, which is using no-conflict mode (required in Magento).To check this,open head.phtml and go to the end of document & you'll see code like this:

<script type="text/javascript">

  jQuery.noConflict();

  // Code that uses other library's $ can follow here.

</script>

if such code not found in head.phtml then just add to it.

Once you are sure that  these files are loading, you want to enter the following in your home page content, above everything else, shown here:

• Login to Magento admin panel.
• Navigate to CMS -> Pages-> home .
• Click on content part on left side. On right side, click on html link as shown in below screenshot.

• add the below code using editor on home page.Here,i m showing jquery tabs on page load.

<script type="text/javascript">// <![CDATA[

jQuery(document).ready(function () {

           jQuery.fancybox({

            'width': '800px',

            'height': '700px',

            'transitionIn': 'fade',

            'transitionOut': 'fade',

            content: '<div id="tabs"><ul><li><a href="#tabs-1">EXECUTIVE</a></li><li><a href="#tabs-2">DELUX</a></li><li><a href="#tabs-3">SUPER-DELUX</a></li><li><a href="#tabs-4">CREAM-CLUB</a></li></ul><div id="tabs-1"><p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.<br>For more Information <a href="http://www.lolo24.com/index.php/admin/cms_wysiwyg/directive/___directive/e3tzdG9yZSB1cmw9J2V4ZWN1dGl2ZS5odG1sJ319/key/25a2c64d0f7833bc5f613208227d29f8/"><b>CLICK HERE</b></a></p></div><div id="tabs-2"><p>All our products in deluxe category are awesome, Precious, making our offers a true.</p><a href="http://www.lolo24.com/index.php/admin/cms_wysiwyg/directive/___directive/e3tzdG9yZSB1cmw9J2RlbHV4ZS5odG1sJ319/key/25a2c64d0f7833bc5f613208227d29f8/"><img src="http://www.lolo24.com/index.php/admin/cms_wysiwyg/directive/___directive/e3ttZWRpYSB1cmw9Ind5c2l3eWcvaW5mb3J0aXMvdWx0aW1vL2N1c3RvbS9VbnRpdGxlZC00LmpwZyJ9fQ,,/key/25a2c64d0f7833bc5f613208227d29f8/" alt="" /></a></div><div id="tabs-3"><p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. bia nostra, per inceptos himenaeos. </p></div><div id="tabs-4"><p>HEllo. </p></div></div>'

           });

jQuery( "#tabs" ).tabs();

});

// ]]></script>

• If you clear your browser cache and go to your homepage, you should now see a popup on home page as shown below.This is what your popup should look like on page load…

How cool is that???