Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Newsletter Pop-up

1. Añadí el Javascript en layout.tplPrimero colocá:

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

Luego, debés poner el código que hace funcionar al newsletter. En la plantilla Luxury, por ejemplo, se encuentra luego de cerrar el siguiente código:

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

Chequeá si bootstrap.js está siendo referenciado. En caso contrario, añadilo dado que es necesario para poder mostrar el 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 %}

Luego buscá el siguiente 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();

Y reemplazalo por este otro: 

 {% 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. Añadí el snipplet newsletter-popup.tpl en la carpeta "Snipplet". Es probable que dependiendo la plantilla el código se vea de forma diferente. En la plantilla Luxury, funciona el siguiente código: 

<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. Incluí la referencia newsletter-popup.tpl arriba de todo en home.tpl:

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

4. Añadí los textos que te se mostrarán en 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. A continuación, agregá las traducciones en 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. En el archivo settings.txt modificá todas las configuraciones generales del newsletter:

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. En style.css agregá el siguiente código: 

.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;
}
Error ‘$.cookie is not a function’: si encontrás este problema, es probable que el archivo layout.tpl esté cargando la librería jquery más de una vez, en consecuencia destruye la extensión .cookie. 

Para resolverlo, solo tenés que encontrar el jquery extra y eliminarlo. 

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.