MINI TUTORIAL: NEWSLETTER POPUP IN MAGENTO (WITH COOKIE)

待我称王封你为后i 2022-06-06 06:24 159阅读 0赞

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">
                
                <action method="addJs"><script>mage/cookies.js</script></action>
                <block type="page/js_cookie" name="js_cookies" template="page/js/cookie.phtml"/>
    
                
                <action method="addJs"><script>val/jquery-1.7.2.min.js</script></action>
    
                
                <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>
    
            
            <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.

<action method="addItem"><type>js</type><name>val/jquery-noconflict.js</name></action>
    
    
    <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.

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][]

[here]: http://www.demacmedia.com/wp-content/uploads/2013/08/jquery-files-for-popup1.zip