Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Newsletter Pop-up

Ao abrir uma loja, é possível aparecer um pop-up para que o cliente se cadastre e receba as notícias através de newsletter, de maneira automática. Se o seu layout não possui essa opção ou é personalizado, siga estes passos abaixo: 


1. Inclua o JavaScript em layout.tpl. Primeiro, coloque:

{{ 'js/jquery.cookie.js' | common_cdn | script_tag }} before {% head_content %}. 

Depois, é preciso adicionar o código que faz a newsletter funcionar. No layout Luxury, por exemplo, é usado o seguinte:

{{ 'js/luxury.js' | static_url | script_tag }}

Cheque se bootstrap.js está sendo referenciado e inclua-o em caso negativo. Isso é importante para poder mostrar o pop-up:

{{ '//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js' | script_tag }}
{% if settings.show_news_box %}
$('#newsletter-popup').submit(function(){
    $(".loading-modal").show();
    $("#newsletter-popup .btn").prop("disabled", true);
    ga_send_event('contact', 'newsletter', 'popup');
});
LS.newsletter('#newsletter-popup', '#newsModal', '{{ store.contact_url | escape('js') }}', function(response){
    $(".loading-modal").hide();
    var selector_to_use = response.success ? '.alert-success' : '.alert-error';
    $(this).find(selector_to_use).fadeIn( 100 ).delay( 1300 ).fadeOut( 500 );
    $('#newsletter-popup input[type="email"]').val('');
    $("#newsletter-popup .btn").prop("disabled", false);
});

$(document).ready(function(){ 
  LS.newsletterPopup();
});
{% endif %}

Procure então pelo seguinte código: 

{% if contact and contact.success and contact.type == 'newsletter' %}
-    var $newsletter = $('#newsletter');
-    $newsletter.find('form').hide();
-    $newsletter.find('.title').hide();
-    $newsletter.find('#ofertas').hide();

E substitua-o por este outro:

 {% if contact and contact.success %}
     {% if contact.type == 'newsletter' %}
          var $newsletter = $('#newsletter');
          $newsletter.find('form').hide();
          $newsletter.find('.title').hide();
          $newsletter.find('#ofertas').hide();
          ga_send_event('contact', 'newsletter', 'standard');
      {% elseif contact.type == 'contact' %}
           ga_send_event('contact', 'contact-form');
      {% endif %}
 {% endif %}

2. Inclua o snipplet newsletter-popup.tpl na seção "Snipplet". É provável que você veja o código de forma diferente dependendo do layout. No Luxury, por exemplo, funciona assim:

<div id="newsModal" class="modal hide fade newsmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  <div class="modal-body">
    <button type="button" class="close news" data-dismiss="modal" aria-hidden="true">×</button>
        <div class="row-fluid">
            <div class="span7">
                {% if template == 'home' %}
                    <h1 class="img logo news">
                        {% if has_logo %}
                          {{ store.logo  | img_tag(store.name) | a_tag(store.url)}}
                        {% else %}
                           <div class="logo text-only center newsmodal"> <a href="{{ store.url }}">{{ store.name }}</a></div>
                        {% endif %}
                    </h1>
                {% endif %}
                {% if settings.news_popup_txt %}
                    <p class="newsletter">{{ settings.news_popup_txt }}</p>
                {% else %}
                    <p class="newsletter">{{ '¿Te gusta lo que ves? ¡Suscribite y recibí todas nuestras novedades!'  | translate }}</p>
                {% endif %}
                <div class="span10">
                    <div id="newsletter-popup">
                        <form method="post" action="/winnie-pooh">
                            <div class="input-append">
                                <input type="text" name="name" placeholder="{{ "Nombre" | translate }}" />
                                <input type="email" class="email" name="email" placeholder="{{ "Email" | translate }}" />
                                <div class="winnie-pooh">
                                    <label for="winnie-pooh-newsletter">{{ "No completar este campo" | translate }}</label>
                                    <input id="winnie-pooh-newsletter" type="text" name="winnie-pooh"/>
                                </div>
                                <input type="hidden" name="message" value='{{ "Pedido de inscripción a newsletter" | translate }}' />
                                <input type="hidden" name="type" value="newsletter-popup" />
                                <input type="submit" name="contact" class="btn" value='{{ 'enviar' | translate }}' />
                            </div>
                        </form>
                         <div style='display: none;' class="loading-modal"><i class="fa fa-circle-o-notch fa-spin"></i> {{ "Enviando..." | translate }}</div>
                        <div style='display: none;' class="alert alert-success">{{ "Se inscribió al newsletter correctamente." | translate }}</div>
                        <div style='display: none;' class="alert alert-error" role='alert'>{{ "Ingresa tu email" | translate }}</div>
                    </div>
                </div>
            </div>
            <div class="span5 img-news">
            {% if "newsletter_image.jpg" | has_custom_image %}
                {{ "newsletter_image.jpg" | static_url | img_tag }}
            {% else %}
                {{ "images/newsletter_image_luxury.jpg" | static_url | img_tag }} 
            {% endif %}
            </div>
        </div>  
    </div>
</div>

3. Adicione a referência newsletter-popup.tpl acima de todo o conteúdo em home.tpl:

<!-- Modal -->
{% if settings.show_news_box %}
    {% include 'snipplets/newsletter-popup.tpl' %}
{% endif %}

4. Inclua o texto que será exibido em default.txt:

news_popup_txt_es = ¿Te gusta lo que ves? ¡Suscribite y recibí todas nuestras novedades!
news_popup_txt_pt = Inscreva-se para receber novidades!

5. Depois, adicione as traduções em translations.txt:

es "Suscripción al newsletter desde el footer"
pt "Inscrição para newsletter (rodapé)"

es "Elegí el título para la sección "Newsletter" en el footer"
pt "Escolha o título da seção "Newsletter" no rodapé"

es "Suscripción al newsletter desde un pop-up en el inicio"
pt "Inscrição para newsletter em pop-up na página inicial"

es "Permitir que tus clientes se registren para recibir novedades desde un pop-up en la página de inicio"
pt "Permitir que seus clientes se inscrevam na newsletter"

es "¡Invitá a los clientes a registrarse para recibir tus novedades!"
pt "Escreva algo para seus clientes se inscreverem na sua newsletter!"

es "Imagen para el pop-up"
pt "Imagem para popup"

es "Usá una imagen atractiva para aumentar las suscripciones. Te recomendamos que midan 280 x 320 px"
pt "Você pode utilizar uma imagem (de preferência de 280 x 320 px)"

es "Frase motivadora para el pop-up"
pt "Frase motivadora para o pop-up"

6. No arquivo settings.txt, modifique todas as configurações gerais da newletter:

Newsletter
    title
        title = Suscripción al newsletter desde el footer
    subtitle
        subtitle = Elegí el título para la sección "Newsletter" en el footer
        
    i18n_input
        name = news_txt
        description = ¡Invitá a los clientes a registrarse para recibir tus novedades!
    
    title
        title = Suscripción al newsletter desde un pop-up en el inicio
    checkbox
        name = show_news_box
        description = Permitir que tus clientes se registren para recibir novedades desde un pop-up en la página de inicio

    subtitle
        subtitle = Frase motivadora para el pop-up
    i18n_input
        name = news_popup_txt
        description = ¡Invitá a los clientes a registrarse para recibir tus novedades!

    subtitle
        subtitle = Imagen para el pop-up
    image
        original = newsletter_image.jpg
        description = Usá una imagen atractiva para aumentar las suscripciones. Te recomendamos que midan 280 x 320 px

7. Inclua o seguinte código em style.css:

.logo.img.news {   
   text-align: center;
}

.logo.text-only.center {
    text-align: center;
}

#newsletter-popup input.btn {
    padding: 10px;
}

.logo.text-only.center.newsmodal {
    max-width: 400px;
    text-overflow: ellipsis;
    overflow: hidden;}

#newsletter input.btn {
    width: 95px;
}
#new
sletter-popup .loading-modal {
   font-size: 14px;
    text-align: center;
   margin-top: 20px;
}


/* Newsletter popup*/

div#newsModal {
    left: 42%;
    top: 10%;
    z-index: 200000;
}

@media (max-width: 767px) {
    #newsModal.newsmodal {
        left: 2%;
        width: 97%;
    }    
   
    .span5.img-news {
       display: none;}
}

@media (max-width: 480px) { 
   #newsModal.newsmodal {
       left: 0;   }
}

p.newsletter {
    font-size: 18px;
    text-align: center;
    padding:20px 0px;
}

h1.img.logo.news {
    text-align: center;
    padding: 20px 0px;
    margin: 0 auto;
}

button.close.news {
    margin: -10px -2px 5px 5px;
    font-size: 32px;
    font-weight: 400;
}

#newsletter div.winnie-pooh,#newsletter-popup div.winnie-pooh {
  display: none; 
}


/Esta parte reemplaza el código viejo: newsletter form/
#newsletter form, #newsletter-popup form{
    margin-top: 5px;
}

#newsletter .contact-error, #newsletter .contact-ok,  {
    font-size: 12px;
    text-align: left;
}

#newsletter input[type="news"], #newsletter input[type="text"], #newsletter input[type="email"], .account-form-wrapper input[type="text"], .account-form-wrapper input[type="email"], .account-form-wrapper input[type="password"], #newsletter-popup input[type="news"], #newsletter-popup input[type="text"], #newsletter-popup input[type="email"] {
    border: 2px solid;
    padding: 9px;
    font-size: 13px;
    margin:0 0 0 10px;
    letter-spacing: 1px;
    background: none;
}

#newsletter input[type="news"], #newsletter input[type="text"], #newsletter input[type="email"],#newsletter-popup  input[type="news"], #newsletter-popup input[type="text"], #newsletter-popup input[type="email"]{
    width: 37%;
    height: 18px;
}

#newsletter input[type="news"]:first-child, #newsletter input[type="text"]:first-child, #newsletter input[type="email"]:first-child, #newsletter-popup input[type="news"]:first-child, #newsletter-popup input[type="text"]:first-child, #newsletter-popup input[type="email"]:first-child,{
    margin: 0;
}

#newsletter input.btn, .account-form-wrapper input.btn, #newsletter-popup input.btn{
    border: none;
    height: 40px;
    padding: 1px;
    font-size: 13px;
    position: relative;
    letter-spacing: 3px;
    text-transform: uppercase;
}
#newsletter-popup input.btn{
    padding: 10px;
}
.logo.text-only.center.newsmodal{
    max-width: 400px;
    text-overflow: ellipsis;
    overflow: hidden;
}
#newsletter input.btn {
    width: 95px;
}
#newsletter-popup .loading-modal{
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
}
.img-news img {
max-width: 280px;
}

Observação

<strong>Error ‘$.cookie is not a function’</strong>: Se você encontrar este problema, é provável que o arquivo layout.tpl esteja carregando a biblioteca jQuery mais de uma vez, afetando a extensão .cookie.

Para resolvê-lo, é preciso apenas encontrar o jQuery extra e eliminá-lo.