Pop-up de Newsletter

O componente Pop-up de Newsletter é um recurso para inscrição de clientes para uma newsletter da loja. Com esse componente o cliente se inscreve para uma lista de contatos para receber informações e novidades da loja. Esse componente permite que o lojista configure como os contatos recebidos podem ser utilizados, como integrações com sistemas externos, para o envio de e-mails.

📘 Demonstração do componente

Visualize como é o componente acessando o Pop-up de Newsletter Demo. Recomendamos utilizar a versão mais atualizada do componente: (v6).

Implementação

Para habilitar o Pop-up de Newsletter você deve importar os arquivos JavaScript e CSS do componente no projeto. Como é um componente nativo, é possível que esses arquivos já estejam no seu template, pois é preciso incluí-los uma única vez. Confira a seguir todos os passos para habilitar e inserir o componente em uma página.

Abra os arquivos do template da loja;
Acesse liquids > partials > common >_popup_newsletter.liquid;
Verifique se o arquivo contem códigos a seguir:

{% load_banners position: 'newsletter-popup' limit: 1 %}

{% for banner in loaded_banners %}
  {% assign image_url = '' %}
  {% assign upper_title = '' %}
  {% assign title = 'Cadastre-se em nossa newsletter' %}
  {% assign description = '' %}
  {% assign secondary_description = '' %}
  {% assign success_title = 'Obrigado!' %}
  {% assign success_subtitle = '' %}
  {% assign success_description = '' %}
  {% assign coupon = '' %}

  {% if banner.description contains '</p>' %}
    {% assign configs = banner.description | split: '</p>' %}

    {% for config in configs %}
      {% assign value = config | strip_html | split: ':' %}
      {% if config contains 'titulo_superior' and value[1] %}
        {% assign upper_title = value[1] | strip %}
      {% elsif config contains 'form_titulo' and value[1] %}
        {% assign title = value[1] | strip %}
      {% elsif config contains 'form_descricao' and value[1] %}
        {% assign description = value[1] | strip %}
      {% elsif config contains 'form_secundaria_descricao' and value[1] %}
        {% assign secondary_description = value[1] | strip %}
      {% elsif config contains 'sucesso_titulo' and value[1] %}
        {% assign success_title = value[1] | strip %}
      {% elsif config contains 'sucesso_subtitulo' and value[1] %}
        {% assign success_subtitle = value[1] | strip %}
      {% elsif config contains 'sucesso_descricao' and value[1] %}
        {% assign success_description = value[1] | strip %}
      {% elsif config contains 'cupom' and value[1] %}
        {% assign coupon = value[1] | strip %}
      {% endif %}
    {% endfor %}
  {% endif %}

  {% if banner.file_url != blank %}
    {% assign image_url = banner.file_url | resize: '500x' %}
  {% endif %}

  <script>
    window.popupNewsletterSettings = {
      script: "{{ 'newsletter-popup.v6.js' | component_path }}",
      styles: "{{ 'newsletter-popup.v6.css' | component_path }}",
      subdomain: '{{ current_shop.subdomain }}',
      imageUrl: '{{ image_url }}',
      upperTitle: '{{ upper_title }}',
      title: '{{ title }}',
      description: '{{ description }}',
      secondaryDescription: '{{ secondary_description }}',
      successTitle: '{{ success_title }}',
      successSubtitle: '{{ success_subtitle }}',
      successDescription: '{{ success_description }}',
      coupon: '{{ coupon }}',
    }
  </script>

  <div id="component-popup-newsletter-root"></div>
{% endfor %}

Acesse assets > javascripts >components > vndaComponents.js;
Verifique se o arquivo contém a seguinte função e configure-a de acordo com as suas necessidades:

export const NewsletterComponent = {
  root: document.querySelector('#component-popup-newsletter-root'),
  settings: window.popupNewsletterSettings || false,
  loaded: false,

  setPopupNewsletter: function () {
    const { settings, root } = NewsletterComponent;

    // Define propriedades do componente
    let maxWidth = settings.maxWidth;
    let subdomain = settings.subdomain;
    let imageUrl = settings.imageUrl;
    let upperTitle = settings.upperTitle;
    let title = settings.title;
    let description = settings.description;
    let secondaryDescription = settings.secondaryDescription;
    let successTitle = settings.successTitle;
    let successSubtitle = settings.successSubtitle;
    let successDescription = settings.successDescription;
    let coupon = settings.coupon;

    // Inicia o componente
    const componentNewsletterPopup = new Vnda.Component.NewsletterPopup({
      maxWidth: maxWidth,
      maxHeight: 500,
      imageUrl: imageUrl,
      imagePosition: 'left',
      popupPosition: 'center',
      upperTitle: upperTitle,
      title: title,
      description: description,
      secondaryDescription: secondaryDescription,
      successTitle: successTitle,
      successSubtitle: successSubtitle,
      successDescription: successDescription,
      coupon: coupon,
      textBtnSubmit: 'Enviar',
      classBtnSubmit: 'button-newsletter',
      formKey: `${subdomain}-newsletter`,
      hasNameField: false,
      hasLastNameField: false,
      hasDateOfBirthField: false,
      hasPhoneField: false,
      delay: 500,
      frequency: '7',
      language: 'pt-BR',
      placeholders: {
        // firstName: 'Nome',
        // lastName: 'Sobrenome',
        // phone: 'Telefone',
        email: 'Digite seu e-mail',
      },
    });

    // Renderiza o componente e marca como carregado
    componentNewsletterPopup.render(root);
    NewsletterComponent.loaded = true;
  },

  loadPopupNewsletter: function () {
    if (!NewsletterComponent.loaded) {
      const { settings } = NewsletterComponent;
      addAsset(settings.script, NewsletterComponent.setPopupNewsletter);
      addAsset(settings.styles);
    }
  },

  init: function () {
    const { root, settings } = this;

    if (!root || !settings) return;

    const eventType = window.innerWidth <= 1024 ? 'scroll' : 'mousemove';
    window.addEventListener(eventType, () => {
      NewsletterComponent.loadPopupNewsletter();
    }, { once: true });
  },
};

Confira os parâmetros do componente para configurá-los como desejado.

Parâmetros do componente

Os parâmetros definem as características dos Pop-up de Newsletter. Veja na tabela abaixo os parâmetros e o que eles determinam no componente. Note que os parâmetros que possuem valores padrões estão sinalizados na coluna Default, e as opções de entrada que o parâmetro pode receber estão apresentados na coluna Tipos/Opções de entrada.

Parâmetro	Descrição	Tipos/Opções	Default	Obrigatório
`maxWidth`	Define a largura máxima do pop-up.	-	-	Não
`maxHeight`	Define a altura máxima do pop-up.	-	-	Não
`imageUrl`	URL da imagem do pop-up.	-	-	Não
`imagePosition`	Posição da imagem no pop-up.	`left` ou `right`	`right`	Não
`popupPosition`	Posição do pop-up na tela.	`center`, `top`, `bottom`, `right`, `left`, `right top`, `left top`, `right bottom`, `left bottom`	`center`	Não
`upperTitle`	Define o título superior do pop-up.	`string`	-	Não
`title`	Define a label do título do pop-up.	`string`	`Cadastre-se em nossa newsletter`	Não
`description`	Primeiro parágrafo da descrição.	`string`	-	Não
`secondaryDescription`	Define um segundo parágrafo.	`string`	-	Não
`successTitle`	Título da mensagem de sucesso.	`string`	`Obrigado!`	Não
`successSubtitle`	Subtítulo da mensagem de sucesso.	`string`	-	Não
`successDescription`	Mensagem de sucesso do envio.	`string`	-	Não
`coupon`	Define o cupom e se o campo deve aparecer.	`string`	-	Não
`textBtnSubmit`	Label do botão de envio.	`string`	`Enviar`	Não
`formKey`	Key do formulário no Admin.	-	-	Sim
`hasNameField`	Habilita o campo Nome.	`true` ou `false`	-	Não
`hasLastNameField`	Habilita o campo Sobrenome.	`true` ou `false`	-	Não
`hasDateOfBirthField`	Habilita o campo Data de Nascimento.	`true` ou `false`	-	Não
`hasPhoneField`	Habilita o campo Telefone.	`true` ou `false`	-	Não
`classBtnSubmit`	Classe extra para o botão.	`.btn`, `.btn-primary`, etc.	-	Não
`delay`	Tempo (ms) para abertura do pop-up.	`int`	`500`	Não
`frequency`	Frequência de abertura para o usuário.	`once`, `always`, `7`, `14`, `30`, `365`	`always`	Não
`language`	Idioma das labels do formulário.	`pt-BR`, `en`	`pt-BR`	Não
`placeholders`	Define os textos de placeholder.	Objeto com `firstName`, `lastName`, `phone`, `email`	Nome, Sobrenome, Telefone, E-mail	Não

O campo `Email` do formulário é habilitado por padrão no componente e sua propriedade não pode ser alterada.

Exemplo de implementação

Confira foi feita a implementação do componente de popup de newsletter no Template1 acessando os arquivos:

_popup_newsletter.liquid,

vndaComponents.js,

_popup_newsletter.scss