Home PHP Magento Newsletter Popup With Cookie in Magento
formats

Newsletter Popup With Cookie in Magento

Published on June 12, 2014, by in Magento, PHP.

Here we explain how to create newsletter popup with cookie.

 

1. Create new module.
Create the directories for your module:
app/code/local/VP/PopupNewsletter

VP is namespace
PopupNewsletter is module name

To configure your module you will need to create an “etc” folder along with a config.xml file.
So app/code/local/VP/PopupNewsletter/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.

config.xml

<config>
<modules>
<VP_PopupNewsletter>
<version>0.0.1</version>
</VP_PopupNewsletter>
</modules>
<frontend>
<layout>
<updates>
<popupnewsletter>
<file>popupnewsletter.xml</file>
</popupnewsletter>
</updates>
</layout>
</frontend>
</config>

 

2. Global module configuration
Create your custom block configuration xml file inside the app/etc/modules/ directory. I named mine VP_PopUpNewsletter.xml.

<?xml version=”1.0″?>
<config>
<modules>
<VP_PopUpNewsletter>
<active>true</active>
<codePool>local</codePool>
</VP_PopUpNewsletter>
</modules>
</config>

 

3. Install all jQuery files.
We add all jQuery libraries. Like : js/VP/jquery.js , jquery.cookie.js .

Now for popup we use colorbox which you can download from here after download you can add colorbox js below path.
skin/frontend/enterprise/yourtheme/js/
CSS file add below path.
skin/frontend/enterprise/yourtheme/css/

4. Create a layout file.
app/design/frontend/enterprise/yourtheme/layout/popupnewsletter.xml

<?xml version=”1.0″?>
<layout version=”0.1.0″>
<default>
<reference name=”head”>
<action method=”addItem”>
<type>skin_css</type>
<name>css/colorbox.css</name>
</action>
<action method=”addJs”>
<script>VP/jquery.min.js</script>
</action>
<action method=”addItem”>
<type>skin_js</type>
<name>js/colorbox/jquery.colorbox-min.js</name>
</action>
<action method=”addJs”>
<script>VP/jquery.cookie.js</script>
</action>
</reference>

<reference name=”before_body_end”>
<block type=”core/template” name=”popup_newsletter” as=”popup_newsletter” before=”-” template=”VP/popup-newsletter.phtml” />
</reference>
</default>
</layout>

Make sure you have call
<?php echo $this->getChildHtml(‘before_body_end’) ?>
inside of your footer, be it 2columns-right.phtml,1column.phtml, 2columns-left.phtml, any or all of those which can be found under app/design/frontend/enterprise/yourtheme/template/page/.

5. Create a template file.
app/design/frontend/enterprise/yourtheme/template/VP/popup-newsletter.phtml

<script type=”text/javascript”>
jQuery.noConflict();
jQuery(document).ready(function() {
if (jQuery.cookie(“popup”) != ‘1’) {
popup();
}
jQuery.cookie(“popup”, “1”, {path: “/”});
});

function popup() {
jQuery.colorbox({inline: true, href: “#newsletter-popup”, width: “50%”, height: “50%”});
}

</script>

<div style=’display:none’>
<div class=”block block-subscribe” id=”newsletter-popup”>

<div class=”block-title”>
<strong><span><?php echo $this->__(‘Newsletter’) ?></span></strong>
</div>
<div id=”feedback” style=”display:none” class=”mini-newsletter”>
Thank you for subscribing to our newsletter!
</div>
<div class=”news-loader” id=”news-loader” style=”text-align:center; display:none;”>
<img src=”<?php echo $this->getSkinUrl(‘images/opc-ajax-loader.gif’); ?>” />
</div>
<div class=”error-news-msg” id=”error-news-msg” style=”display:none;”>Please insert a valid email address.</div>
<form action=”<?php echo $this->getUrl(‘newsletter/subscriber/new/’) ?>” method=”post” id=”newsletter-detail”>
<div class=”block-content”>
<div class=”form-subscribe-header”>
<label for=”newsletter”><?php echo $this->__(‘Sign Up for Our Newsletter:’) ?></label>
</div>
<div class=”input-box”>
<input type=”text” name=”email” id=”newsletter” title=”<?php echo $this->__(‘Sign up for our newsletter’) ?>” class=”input-text required-entry validate-email” />
</div>
<div class=”actions”>
<button type=”button” title=”<?php echo $this->__(‘Subscribe’) ?>” class=”button” onclick=”return newsletter_validation();”><span><span><?php echo $this->__(‘Subscribe’) ?></span></span></button>
</div>
</div>
</form>

</div>
</div>
<script type=”text/javascript”>
function newsletter_validation()
{
var newsletterSubscriberFormDetail = new VarienForm(‘newsletter-detail’);
var form_email = $(‘newsletter’).getValue();
var params_form = $(‘newsletter-detail’);
new Validation(‘newsletter’);
if (echeck(form_email))
{
Element.hide(‘newsletter-detail’)
new Ajax.Updater({success: ‘newsletter-form’}, ‘<?php echo $this->getUrl(‘newsletter/subscriber/new’) ?>’, {
asynchronous: true, evalScripts: false,
parameters: {email: form_email},
onComplete: function(request, json) {
Element.hide(‘newsletter-detail’);
Element.hide(‘news-loader’);
Element.show(‘feedback’);
},
onLoading: function(request, json) {
Element.show(‘news-loader’);
},
});
}
else
{
return false;
}
}
function echeck(str) {

var at = “@”
var dot = “.”
var lat = str.indexOf(at)
var lstr = str.length
var ldot = str.indexOf(dot)
if (str.indexOf(at) == -1) {
goProcedural()
return false
}

if (str.indexOf(at) == -1 || str.indexOf(at) == 0 || str.indexOf(at) == lstr) {
goProcedural()
return false
}

if (str.indexOf(dot) == -1 || str.indexOf(dot) == 0 || str.indexOf(dot) == lstr) {
goProcedural()
return false
}

if (str.indexOf(at, (lat + 1)) != -1) {
goProcedural()
return false
}

if (str.substring(lat – 1, lat) == dot || str.substring(lat + 1, lat + 2) == dot) {
goProcedural()
return false
}

if (str.indexOf(dot, (lat + 2)) == -1) {
goProcedural()
return false
}

if (str.indexOf(” “) != -1) {
goProcedural()
return false
}
return true
}

function goProcedural()
{
Element.show(‘error-news-msg’);
Element.hide.delay(5, ‘error-news-msg’);
}
</script>

 

Thank you! Let ‘s ROCK … 🙂

Share!Share on FacebookShare on Google+Share on LinkedInTweet about this on TwitterFlattr the authorDigg thisPin on PinterestEmail this to someoneShare on StumbleUponShare on RedditShare on TumblrBuffer this pagePrint this page
Tags:
Comments Off on Newsletter Popup With Cookie in Magento.
Copyright © 2017 - Scalsys. All Rights Reserved