A client recently requested a popup on the home page. I decided to implement this functionality using colorbox, which I have been using quite a bit lately.
The first step is to add the css and js to your local.xml file, shown here – [download id=”2078″] and then upload the js and css files into the appropriate folders.
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-1.9.0.min.js, jquery.colorbox.js, and colorbox.css files. If you cannot click thru to the actual file, take a look at where you are uploading the jquery and css files.
Once you are sure that you these files are loading, you want to enter the following in your home page content, above everything else, shown here – [download id=”2080″]. Please note use of jQuery, which is using no-conflict mode (required in Magento).
If you clear your browser cache and go to your home page, you should now see a popup in home page. Once you have visited once, it will not load again, which is why you will need to clear your browser cache to test. You can also uncomment the for testing only link, which will show a link to open up popup manually.
Once you have it working, just comment out the link again.
This is what your popup should look like on page load…
How cool is that???
If you want to thank us for writing this post, you can buy us a round here and we’ll be eternally thankful.