MINI TUTORIAL: NEWSLETTER POPUP IN MAGENTO (WITH COOKIE)

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 app/code/local/Val.

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. app/etc/modules/Val_NewsletterPopUp.xml.

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 root/js/val/

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 root/skin/frontend/themepackage/yourtheme/css/fancybox

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 root/app/design/frontend/themepackage/yourtheme/template/page/.

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 default and 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, root/app/design/frontend/themepackage/yourtheme/template/val/newsletter-popup.phtml

5.2: Place the following code inside of it. We’ll start off with the jQuery part and then the form after.

<script type="text/javascript">    jQuery(document).ready(function() {        var check_cookie = "<?php echo Mage::getModel('core/cookie')->get('popup-shown'); ?>";        if(!check_cookie) {            beginNewsletterForm();            <?php Mage::getModel('core/cookie')->set('popup-shown', 'true', 5);?>        }    });    function beginNewsletterForm () {        jQuery.fancybox({            'width': '910',            'height': '450',            'padding': '0px',            'autoDimensions': false,            'autoScale': false,            'autoSize': false,            'transitionIn': 'fade',            'transitionOut': 'fade',            'showCloseButton': true,            'type': 'inline',            'href': '#newsletter-popup'        });        jQuery("#newsletter-popup").trigger('click');    }</script><div style="display:none;">      <div id="newsletter-popup" class="container">            <div class="sub-container">                  <div class="content">                        <div class="register-form">                               <form id="newsletter-registration-form" action="<?php echo $this->getUrl('newsletter/subscriber/new/') ?>" method="post" id="newsletter-validate-detail">                                    <div class="form-fields-middle">                                          <div class="input-wrapper">                                                <input name="email" id="cm_email" onfocus="if(this.value=='Enter Your Email') this.value=''" onblur="if(this.value=='') this.value='Enter Your Email'" class="validate-email required-entry field-left" type="text" value="Enter Your Email" />                                          </div>                                    </div>                                    <div class="btn-sign-up-now">                                          <input type="submit" class="button" value="Sign Up" />                                    </div>                              </form>                        </div>                  </div>            </div>      </div></div><script type="text/javascript">      var newsletterSubscriberFormDetail = new VarienForm('newsletter-refistration-form', true);</script>

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 app/code/Mage/Core/Model/Cookie.php

This is a standard newsletter form with Magento validation classes, and as you can see in the jQuery we replaced $ with 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