Arquivos para incluir uma assinatura de newsletter com lightbox no Magento. Mais em: www.dsalvagni.com.br/magento-adicionar-pop-up-assinatura-newsletter

dsalvagni-newsletter-lightbox-alternativo.js

/*
Versão alterativa para quem quer tratar o retorno de forma diferente.
Somente um exemplo.
A lightbox irá exibir uma mensagem de sucesso e fechar apos 3s.
Também é possível fechá-la manualmente, chamando a função dsalvagni_newsletter_lightbox_close().
*/
function dsalvagni_newsletter_lightbox_onSubmit(formObj)
{
    if(newsletterSubscriberLightboxFormDetail.validator.validate())
    { 
        new Ajax.Updater({}, 
            formObj.attributes.action.value, 
            {
                asynchronous: true,
                evalScripts: false, 
                onSuccess: function(request, json)
                {
                    $('dsalvagni-newsletter-lightbox-return').update('<p>Obrigado por assinar nossa newsletter. <a href="javascript:dsalvagni_newsletter_lightbox_close()">Fechar janela</a></p>');
                    /* Remove o gif do loading - existem melhores formas de fazer isso.*/
                    $('dsalvagni-newsletter-lightbox-return').style.background="none";
                    /* Fechar automaticamente após 3 segundos */                    
                    window.setTimeout(function(){ 
                        dsalvagni_newsletter_lightbox_close() 
                    },3000);
                }, 
                onLoading: function(request, json){
                    Element.hide(formObj.id)
                    $('dsalvagni-newsletter-lightbox-return').style.display="block";
                },
                parameters: Form.serialize(formObj)
            }
        ); 
    } 
    return false;
}

function dsalvagni_newsletter_lightbox_init()
{
    $$('.dsalvagni-newsletter-lightbox-close-action').each(function(element) {
        element.on('click', function() 
        {
            Element.hide('dsalvagni-newsletter-lightbox-box');
            Element.hide('dsalvagni-newsletter-lightbox-overlay');
        });
    });    
}
/*
    Função para fechar a lightbox
*/
function dsalvagni_newsletter_lightbox_close()
{
    Element.hide('dsalvagni-newsletter-lightbox-box');
    Element.hide('dsalvagni-newsletter-lightbox-overlay');
}

Event.observe(window, 'load', dsalvagni_newsletter_lightbox_init);

dsalvagni-newsletter-lightbox.css

/*
	Z-INDEX
*/
.dsalvagni-newsletter-lightbox-box { z-index: 1000;}
.dsalvagni-newsletter-lightbox-overlay { z-index: 900; }

.dsalvagni-newsletter-lightbox-box {
	width: 400px;
	height: 200px;
	position:fixed;
	margin: -100px 0 0 -200px;
	top:50%;
	left:50%;
	background: #E0E0E0;
	border: 2px solid #FFF;
}

.dsalvagni-newsletter-lightbox-overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: #000;
	opacity: 0.5;
	-moz-opacity: 0.5;
	filter:alpha(opacity=5);
}

.dsalvagni-newsletter-lightbox-close {
	position: absolute;
	top: -14px;
	right: -14px;
	left: auto;
	bottom: auto;

	line-height: 30px;
	width: 30px;
	height: 30px;
	font-size: 14px;
	font-weight: bold;
	border-radius: 30px;

	background: #000;
	border: 2px solid #FFF;
	color: #FFF;
	text-decoration: none;
	text-align: center;

}
.dsalvagni-newsletter-lightbox-return {
	text-align: center;
	vertical-align: middle;
	display: none;
	/* Centralizar verticalmente = box height - padding*2 */
	height: 170px;
	background: url(http://loadinggif.com/images/image-selection/3.gif) center center no-repeat;
}
.dsalvagni-newsletter-lightbox-return img
{
	display: inline-block;
}

/* STYLE */

.dsalvagni-newsletter-lightbox-content
{
	padding:15px;
}

.dsalvagni-newsletter-lightbox-header label
{
	font-size: 22px;
	margin-bottom: 15px;
	display: inline-block;
}

.dsalvagni-newsletter-lightbox-content .input-box input[type="text"],
.dsalvagni-newsletter-lightbox-content .input-box input[type="email"]
{
	font-size: 20px;
	line-height: 35px;
	width: 90%;
	padding: 0 5%;
}
.dsalvagni-newsletter-lightbox-content .actions
{
	margin-top:15px;
}

dsalvagni-newsletter-lightbox.js

function dsalvagni_newsletter_lightbox_onSubmit(formObj)
{
    if(newsletterSubscriberLightboxFormDetail.validator.validate())
    { 
        new Ajax.Updater(
            {
                /* 
                    O retorno do post acaba indo pro form, sem necessidade. Deixei passar na revisão do código.
                    Melhor manter comentado.
                */
                //success:formObj.id
            }, 
            formObj.attributes.action.value, 
            {
                asynchronous: true,
                evalScripts: false, 
                onComplete: function(request, json)
                {
                    Element.hide('dsalvagni-newsletter-lightbox-box');
                    Element.hide('dsalvagni-newsletter-lightbox-overlay');                    
                }, 
                onLoading: function(request, json){
                    Element.hide(formObj.id)
                    $('dsalvagni-newsletter-lightbox-return').style.display="block";
                },
                parameters: Form.serialize(formObj)
            }
        ); 
    } 
    return false;
}
function dsalvagni_newsletter_lightbox_init()
{
    $$('.dsalvagni-newsletter-lightbox-close-action').each(function(element) {
        element.on('click', function() 
        {
            Element.hide('dsalvagni-newsletter-lightbox-box');
            Element.hide('dsalvagni-newsletter-lightbox-overlay');
        });
    });    
}
Event.observe(window, 'load', dsalvagni_newsletter_lightbox_init);

lightbox.phtml

<?php 
    /* Definimos que o cliente ainda não assina a newsletter */
    $customerSubscribed = false;
    /* Verifica se está logado */
    if(Mage::getSingleton('customer/session')->isLoggedIn())
    {
        /* Retorna o e-mail do cliente */
        $Email = Mage::getSingleton('customer/session')->getCustomer()->getEmail();
        /* Verifica se já assina */
        $subscriber = Mage::getModel('newsletter/subscriber')->loadByEmail($Email);
        if($subscriber->getId())
        {
            /* Assina */
            $customerSubscribed = true;
        }
    }

    /* Definimos que ainda não foi exibido */
    $newsletterShowed = false;
    /* Verificamos se existe o cooke */
    $mageCookie = Mage::getModel('core/cookie');
    if(!$mageCookie->get('dsalvagni-newsletter-ligthbox'))
    {
        /* Definimos o cookie */
        $mageCookie->set('dsalvagni-newsletter-ligthbox', 'shown',time()+86400);
    }
    /* Cookie existe. Marcamos como já exibido. */ 
    else $newsletterShowed = true;

?>
<!-- OVERLAY -->
<div class="dsalvagni-newsletter-lightbox-overlay" id="dsalvagni-newsletter-lightbox-overlay" <?php echo ($customerSubscribed || $newsletterShowed) ? 'style=" display:none; "' : null; ?>></div>
<!-- LIGHTBOX CONTAINER -->
<div class="dsalvagni-newsletter-lightbox-box" id="dsalvagni-newsletter-lightbox-box"  <?php echo ($customerSubscribed || $newsletterShowed) ? 'style=" display:none; "' : null; ?>>

    <!-- X CLOSE -->
    <a href="javascript:;" class="dsalvagni-newsletter-lightbox-close-action dsalvagni-newsletter-lightbox-close">X</a>
    <!-- /X CLOSE -->

    <!-- FORM NEWSLETTER -->
    <form action="<?php echo $this->getFormActionUrl() ?>" method="post" id="dsalvagni-newsletter-lightbox-form" onsubmit="dsalvagni_newsletter_lightbox_onSubmit(this); return false;">
        <div class="dsalvagni-newsletter-lightbox-content">
            <div class="dsalvagni-newsletter-lightbox-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-email" title="<?php echo $this->__('Sign up for our newsletter') ?>" class="input-text required-entry validate-email" />
            </div>
            <div class="actions">
                <button type="submit" title="<?php echo $this->__('Subscribe') ?>" class="button"><span><span><?php echo $this->__('Subscribe') ?></span></span></button>
                <!-- CLOSE BUTTON -->
                <button type="button" title="<?php echo $this->__('Close') ?>" class="button dsalvagni-newsletter-lightbox-close-action"><span><span><?php echo $this->__('Close') ?></span></span></button>
                <!-- /CLOSE BUTTON -->
            </div>
        </div>
    </form>
    <!-- MENSAGEM DE RETORNO -->
    <div class="dsalvagni-newsletter-lightbox-return" id="dsalvagni-newsletter-lightbox-return">
    </div>
    <!-- /MENSAGEM DE RETORNO -->
    <!-- /FORM NEWSLETTER -->
    <script type="text/javascript">
    //<![CDATA[
        var newsletterSubscriberLightboxFormDetail = new VarienForm('dsalvagni-newsletter-lightbox-form');
    //]]>
    </script>
</div>
<!-- /LIGHTBOX CONTAINER -->

local.xml

<?xml version="1.0"?>
<layout version="0.1.0">
    <!-- Inserindo as alterações na home da loja -->
    <!-- Para exibir em todas as páginas, alterar "cms_index_index" para "default" -->
    <cms_index_index>
    <!-- Arquivos CSS e JS sendo incluídos somente para esta página -->
        <reference name="head">          
          <action method="addItem"><type>skin_js</type><name>js/dsalvagni-newsletter-lightbox.js</name><params/></action>
          <action method="addItem"><type>skin_css</type><name>css/dsalvagni-newsletter-lightbox.css</name><params/></action>
        </reference>
        <!-- Inserindo o lightbox no CONTENT, mas pode ser em outro -->
        <reference name="content">
            <block type="newsletter/subscribe" name="dsalvagni.lightbox.newsletter" template="newsletter/lightbox.phtml"/>
        </reference>
    </cms_index_index>
</layout>