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:

A modal será exibida apenas uma vez no período de 24 horas.

Ela será exibida após 5 segundos do carregamente da pagina.

Vamos ao passo a passo

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

Passo2 - 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 anexo). 

Passo3 - 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 id="modal-newsletter">
    <modal v-if="showModal" @close="showModal = false">
        <div slot="header">
            <h3>Newsletter</h3>
        </div>
        <div slot="body">
            <form action="{{ links.newsletter }}" method="POST">
                <input type="hidden" name="loja" value="{{ store.id }}">
                <input name="name" type="text" placeholder="João da Silva">
                <input name="email" type="text" placeholder="joao@email.com">
                <button>Cadastrar</button>
            </form>
        </div>
    </modal>
</div>

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

Nesse arquivo, dentro da tag <head></head> adicione a chamado 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:

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

Após adicionado ao carregar a pagina, após 5 segundos será exibida a modal, lembrando que será exibida apenas uma vez por dia, ou então até que os cookies da pagina serem limpos.

Peek_2019-08-12_14-40.gif

Bruna Lourencini 
Tem mais dúvidas? Envie uma solicitação

Comentários

    Artigos nessa seção

    Powered by Zendesk