Having your customers subscribe to your newsletter is one of the easiest ways to keep them engaged and coming back to your online store, and a newsletter popup is a great way to entice your customers to sign up. In this post, I will teach you, step-by-step, how to create a newsletter popup in Magento (with cookie).
Step 1: Create a new Module
1.1: Navigate to
app/code/local and create a folder with a ‘namespace’. This can be either the name of your company or the module’s author (eg. Magento uses Mage as its namespace). For the sake of this tutorial let’s use my name “Val” as the module’s author name. So, the path should look like this
1.2: For the next directory, give your module a descriptive name. We’re creating a newsletter pop-up so a good name would be, of course, NewsletterPopUp. Your path should now be
app/code/local/Val/NewsletterPopUp. Please, keep in mind these directories are case-sensitive.
1.3: To configure your module you will need to create an “etc” folder along with a config.xml file. So,
app/code/local/Val/NewsletterPopUp/etc/config.xml. This will inform Magento of the location of the files in our module, as well as events to observe, version number, and more.
1.4: Place the following code inside of config.xml
<?xml version="1.0" ?> <config> <modules> <Val_NewsletterPopUp> <version>0.0.1</version> </Val_NewsletterPopUp> </modules> <frontend> <layout> <updates> <newsletterpopup> <file>newsletterpopup.xml</file> </newsletterpopup> </updates> </layout> </frontend> </config>
We will create “newsletterpopup.xml” in the layouts folder later on. You can have your own custom name for it, but remember to keep it consistent, and it would be best practice to have it match the
newsletterpopup tags (still case-sensitive).
Step 2: Activate your Module
2.1: Navigate to
app/etc/modules and create an XML file. The name you give this file will only be used to determine the order in which it will be loaded, so there’s no need to worry too much about it. We want to focus on content, but I’d recommend sticking to the same naming convention in order to avoid confusion in the long term.
2.2: Place the following code inside of Val_NewsletterPopUp.xml
<?xml version="1.0" ?> <config> <modules> <Val_NewsletterPopUp> <active>true</active> <codePool>local</codePool> </Val_NewsletterPopUp> </modules> </config>
Step 3: Install all jQuery files.
3.1: Your cookies.js file should already be under
root/js/mage/ and you can place the jquery-noconflict.js and your prefered jquery library files (in this case we’re using jquery-1.7.2.min.js) under
3.2: For the purpose of this tutorial we will use fancybox, which you can download from here and we’ll be using version 1.3.4 in this tutorial (Update: Link to .zip file with all jQuery files at bottom of post with some extra ones that you don’t need, but I included them just in case).
Place all of your fancybox js files under
root/skin/frontend/themepackage/yourtheme/js/fancybox . Where “yourtheme” will be the name of the theme you’re using for your store. And then place all of your fancybox css and image files under
Tip: Magento includes jQuery 1.3 on the product page so you might need to remove it. If you’re getting js errors on the browser it might be that you have two jquery library versions included and conflicting with each other
Step 4: Create a layout file.
4.1: Navigate to
root/app/design/frontend/themepackage/yourtheme/layout and create newsletterpopup.xml.
4.2: We will place all the necessary jQuery libraries, CSS and the template inside of newsletterpopup.xml
<?xml version="1.0" ?> <layout version="0.1.0"> <default> <reference name="head"> <!-- These 2 below should already be included by Magento, but if not, you need to put them here --> <action method="addJs"><script>mage/cookies.js</script></action> <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/> <!-- You can skip the line below if you already have a jquery library of this version or higher added in the head of your site --> <action method="addJs"><script>val/jquery-1.7.2.min.js</script></action> <!-- And these are the fancybox files --> <action method="addItem"><type>skin_js</type><name>js/fancybox/jquery.fancybox-1.3.4.pack.js</name></action> <action method="addItem"><type>skin_css</type><name>css/fancybox/jquery.fancybox-1.3.4.css</name></action> </reference> <!-- This line adds our newsletter template at the end of your site's body, remember to replace 'val' to match your folder path --> <reference name="before_body_end"> <block type="core/template" name="newsletter_popup" as="newsletter_popup" template="val/newsletter-popup.phtml" /> </reference> </default> </layout>
Make sure you have the call
<?php echo $this->getChildHtml('before_body_end') ?>
inside of your footer, be it 1column.phtml, 2columns-left.phtml, any or all of those which can be found under
Also, if you’re planning on using any of these for something other than this module, it’s a better idea to place them inside of
root/app/design/frontend/themepackage/yourtheme/layout/local.xml. A good example is noconflict.js which would of course go inside of the
reference name="head" tags as well.
<!-- If it's in your root/js folder --> <action method="addItem"><type>js</type><name>val/jquery-noconflict.js</name></action> <!-- If it's in your theme/js folder --> <action method="addItem"><type>skin_js</type><name>js/val/jquery-noconflict.js</name></action>
And again, make sure you only have one jquery library included in the head.
Last but not least, don’t forget to replace all instances of “val” with your “namespace”.
Step 5: Create a template file.
5.1: Create newsletter-popup.phtml under your theme, so,
5.2: Place the following code inside of it. We’ll start off with the jQuery part and then the form after.
On line #9 you will see a ‘5’ at the end, this is the integer for time in seconds, so this cookie is set to expire in 5 seconds (good for testing). To learn more on how to use this function you can check out
This is a standard newsletter form with Magento validation classes, and as you can see in the jQuery we replaced
jQuery to avoid conflicts.
And there we go! That was the last step. You should now have a functional newsletter pop-up appear on your site only on the first time you visit thanks to the cookie. For testing purposes I would recommend turning it off instead of having to delete it every time you need to refresh the page. And of course, to make everything look better you’ll just need a bit of CSS under
skin/frontend/themepackage/yourtheme/css/yourtheme.css. Have a good day and happy coding.
Update: You can download all necessary jQuery files here