Skip to content

Instantly share code, notes, and snippets.

@dsalvagni
Last active August 29, 2015 14:02
Show Gist options
  • Save dsalvagni/901e23a079e6206748f1 to your computer and use it in GitHub Desktop.
Save dsalvagni/901e23a079e6206748f1 to your computer and use it in GitHub Desktop.
Arquivos para incluir uma assinatura de newsletter com lightbox no Magento. Mais em: www.dsalvagni.com.br/magento-adicionar-pop-up-assinatura-newsletter
/*
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);
/*
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;
}
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);
<?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 -->
<?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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment