Avise-me quando chegar

O recurso Avise-me quando chegar disponibiliza um formulário de cadastro de e-mails na página dos produtos que não possuem unidades disponíveis em estoque. Pelo formulário, os clientes se cadastram para receber e-mails transacionais da loja. Dessa forma, quando um cliente cadastrar seu e-mail em um produto indisponível, ele recebe um aviso assim que o item voltar a ter disponibilidade em estoque.

Nesse tutorial você confere como alterar o front-end da loja e modificar o formulário de cadastro de e-mails em páginas de produtos indisponíveis.

🚧 Para que a funcionalidade esteja completa e funcione corretamente, você precisa também configurar os e-mails transacionais.
Saiba mais sobre esse recurso em Funcionalidades: Avise-me quando chegar.

Formulário

Se você utiliza um template de loja, o formulário Avise-me quando chegar está localizado no arquivo _form_notify.liquid. Nesse arquivo liquid você altera os atributos do formulário.

<form action="/lista_de_espera" method="post" class="notify-when-arrives {{ classNotify }}" data-form-notify>
  <label for="email-notify-when-arrives">Avise-me quando chegar</label>
  <div class="form-wrapper">
    <input type="hidden" name="key" value="{{ current_shop.subdomain }}-avise-me">
    <input type="hidden" name="sku" value="{{ product.variants[0].sku }}">
    <input type="hidden" name="nome" value="{{ product.name }}">
    <input type="hidden" name="url" value="{{ product.url }}">
    <input type="hidden" name="referencia" value="{{ product.reference }}">
    <input class="email" type="email" name="email" id="email-notify-when-arrives" placeholder="seu email" required>
    <button aria-label="Enviar e-mail para receber o aviso" type="submit">Enviar</button>
    <div class="msg-retorno" data-msg-retorno="">
      <div data-msg=""></div>
      <div class="msg-success" data-msg-success="">
        <p>Obrigado! Enviado com sucesso.</p>
      </div>
      <div class="msg-error" data-msg-error="">
        <p>Problema ao enviar, tente novamente.</p>
      </div>
    </div>
  </div>
</form>

A chamada do formulário na vitrine é feita no arquivo JavaScript notify.js.

export const notify = {
  submit: function (_$form) {
    var formData = _$form.serialize();

    if (!_$form.hasClass('sending')) {
      $.ajax({
        url: _$form.attr('action'),
        type: 'post',
        dataType: 'json',
        data: formData,
        beforeSend: function () {
          _$form.addClass('sending');
        },
      })
      .done(function (resp) {
        console.log('success');
        console.info(resp);

        var msgSuccess =
          'Você receberá um e-mail quando o produto estiver disponível';

        if (resp.error) {
          _$form.find('[data-msg-retorno] [data-msg-error]').html(resp.error);
          _$form
            .find('[data-msg-retorno] [data-msg-success]')
            .removeClass('visible');
          _$form
            .find('[data-msg-retorno] [data-msg-error]')
            .addClass('visible');
        } else {
          // Envia um email para o cliente saber que o usuário solicitou o avise-me
          $.ajax({
            url: '/webform',
            type: 'POST',
            data: {
              key: _$form.find('[name="key"]').val(),
              reply_to: _$form.find('[name="email"]').val(),
              email: _$form.find('[name="email"]').val(),
              product_name: _$form.find('[name="nome"]').val(),
              referencia: _$form.find('[name="referencia"]').val(),
              sku: _$form.find('[name="sku"]').val(),
            },
          })
            .done(function (resp) {
              _$form
                .find('[data-msg-retorno] [data-msg-success]')
                .addClass('visible');
              _$form
                .find('[data-msg-retorno] [data-msg-error]')
                .removeClass('visible');

              _$form[0].reset();
            })
            .fail(function (error) {
              _$form
                .find('[data-msg-retorno] [data-msg-success]')
                .removeClass('visible');
              _$form
                .find('[data-msg-retorno] [data-msg-error]')
                .addClass('visible');
            });
        }
      })
      .fail(function (resp) {
        console.log('error');
        console.error(resp);
        console.error(resp.responseText);
        console.error(resp.responseText.error);

        var errorText = JSON.parse(resp.responseText);
        console.info(errorText);

        _$form
          .find('[data-msg-retorno] [data-msg-error]')
          .html(errorText.error);
        _$form
          .find('[data-msg-retorno] [data-msg-success]')
          .removeClass('visible');
        _$form
          .find('[data-msg-retorno] [data-msg-error]')
          .addClass('visible');
      })
      .always(function () {
        _$form.removeClass('sending');
      });
    }
  },
  init: function() {
    $(document).on('submit', '[data-form-notify]', function (event) {
      event.preventDefault();
      notify.submit($(this));
    });
  }
};

Caso você esteja criando ou utilizando uma loja com template customizado, você precisa incluir esses arquivos acima (notify.js e \_form_notify.liquid) no seu layout.