Popup de Newsletter

O recurso de Popup de Newsletter é utilizado para capturar o contato dos clientes, adicionando esse contato a uma lista de pessoas que deseja receber informações enviadas pela loja.

Observações:

O modal será exibido apenas uma vez no período de 24 horas.

Ele será exibido após 5 segundos do carregamento da página.

Vamos ao passo a passo

Passo 1 - Adicione o arquivo modal.css dentro da pasta css do tema, esse arquivo é responsável pela estilização do modal, dessa forma fique a vontade para realizar a personalização do recurso através deste arquivo (verificar Arquivos no final dessa página).

Passo 2 - Adicione o arquivo modal.js dentro da pasta js do tema, esse arquivo é responsável por toda as ações disponíveis no recurso (verificar Arquivos no final dessa página).

Passo 3 - Adicione o arquivo js-cookie.min.js dentro da pasta js do tema, esse arquivo é responsável por criar um cookie encarregado de quando será exibido novamente o modal (verificar Arquivos no final dessa página).

Passo 4 - Crie o arquivo modal-newsletter.html dentro da pasta elements do tema, é através desse arquivo que será montada toda a estrutura do popup.

Nesse arquivo adicione o código abaixo:

<div class="modal-theme newsletter-modal init-start">
  <div class="shadow"></div>
  <div class="overflow">
    <div class="center">
      <div class="box-center">
        <div class="close-icon"></div>
        <div class="modal-box flex">
          <div class="box-text flex justify-center align-center">
            <div>
              <div class="logo flex justify-center">
                {{ Image('logo') }}
              </div>
              <div class="text-content">
                <div class="title">ASSINE NOSSA NEWSLETTER</div>
                <p>Fique por dentro de todos os nossos super descontos e novidades!</p>
              </div>
              <form action="{{ links.newsletter }}" method="POST">
                <input type="hidden" name="loja" value="{{ store.id }}">
                <input spellcheck="false" autocomplete="off" name="name" class="text mail" type="text" placeholder="Digite seu nome">
                <input spellcheck="false" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" required autocomplete="off" name="email" class="text mail" type="email" placeholder="Digite seu e-mail">
                <button class="news-button">ENVIAR</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Passo 5 - Acesse o arquivo default.html localizado na pasta layout, nesse arquivo será necessário adicionar as referencias dos arquivos adicionados nos passos anteriores.

Nesse arquivo, dentro da tag <head></head> adicione a chamada do arquivo modal.css, como abaixo:

<link rel="stylesheet" href="{{ asset('css/modal.css') }}" type="text/css">

Ainda nesse arquivo, adicione ao final do arquivo, antes da tag </body> as chamadas abaixo:

<script type="text/javascript" src="{{ asset('js/js-cookie.min.js') }}"></script>
{% element 'modal-newsletter' %}
<script type="text/javascript" src="{{ asset('js/modal.js') }}"></script>

Após adicionado, ao carregar a pagina e se passar 5 segundos, o modal será exibido. Lembrando que será exibido apenas uma vez por dia, ou então até que os cookies da página sejam limpos.

Arquivos

Segue abaixo o link para download do arquivo compactado com os arquivos modal.css, modal.js e js-cookie.min.js

3KB

Arquivos-Modal-newsletter.zip