Página de Manutenção

voller · Novembro 16, 2020, 11:36am

Olá, bom dia

Gostaria de saber quando - se for, será criado uma página de manutenção…

Conversei com o Matheus a alguns meses atrás, mas a opção de que ele me passou eu não gostei muito…

Queria uma página de manutenção que fosse possível ativar e desativar e que desse para se colocar uma frase personalizada (segue um exemplo abaixo)…

Como tá chegando Black Friday eu pretendia deixar a minha loja em manutenção um dia ou algumas horas e só ativar no dia/hora da promoção e que isso fosse feito de uma forma rápida e prática pelo painel do administrador

Não só para a Black Friday mas para outras promoções ou lançamento de coleções que farei e que fosse necessária fechar a loja sem muita complicação.

thais · Novembro 16, 2020, 3:42pm

oi, tudo bem @voller?

Aqui: Sobre a página, o Jeito mais simples de fazê la é usar no CMS. Você vai em: Páginas > Extra.

Coloca o texto que você precisar. Se quiser, podemos personalizar com imagem ou cores.
Salve a pagina extra com o nome lancamento

No nosso caso, para ativar, bastaria colocar o trecho de código abaixo no arquivo que vou te passar:

[[redirects]]

  from = "/*"
  to = "https://www.vollermanie.com.br/pages/lancamentos"
  status = 302
  force = true

Esse código deve ser colocado no final do arquivo:

github.com

ecomplus-stores/voller/blob/master/.netlify/netlify.toml

[build]
  publish = "publish"
  functions = "functions-zip"

[[redirects]]
  from = "/*"
  to = "/.netlify/functions/ssr?slug=:splat"
  status = 200

[[headers]]
  for = "/storefront.*"
  [headers.values]
    Cache-Control = "public, max-age=3600"

[[headers]]
  for = "/storefront.js"
  [headers.values]
    Cache-Control = "public, max-age=0, must-revalidate"

[[headers]]

This file has been truncated. show original

(cada logista em o seu repositório, basta trocar o nome voller pelo seu respectivo repositório).

Pronto! Isso é suficiente para fixar essa página para os seus clientes.

Depois que vc criar a página extra, me avisa aqui que posso te ajudar com o layout dela. e se ficou meio confuso ou não entendeu alguma situação, me avisa aqui tbm ta!

Abraços!

voller · Novembro 17, 2020, 11:23am

Olá @thais bom dia
Tudo bem?

Entendi mais ou menos rsrs

Então pra ativar e desativar eu teria que ficar colocando e tirando esse trecho do código que você me passou certo?

thais · Novembro 17, 2020, 11:25am

Isso mesmo!

Só colocar ou retirar… Ele demora poucos minutinhos para executar e efetivar a mudança na sua loja. Rapidinho mesmo.

voller · Novembro 19, 2020, 5:02pm

Oii, @thais fiz a página extra como você orientou, sobre o layout poderia ser mais ou menos como te mandei na imagem de exemplo acima…

A minha logo, e a frase (que está na pagina extra) na minha cor principal logo abaixo.

thais · Novembro 19, 2020, 5:21pm

oi, tudo bem?

Coloca a sua logomarca na página extra que vc criou. Que ai eu ajeito aqui:

voller · Novembro 19, 2020, 5:27pm

Feito!

thais · Novembro 19, 2020, 5:28pm

Blz! Vou mexer aqui e te mando o código ai.

thais · Novembro 23, 2020, 12:45pm

oi, tudo bem?

Da uma olhadinha nessa pagína de manuntenção aqui:

É assim que precisa?

Se for, basta incluir o código abaixo:

#lancamentos .container {
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
    font-size: 200%;
    color: #d20039;
}
#lancamentos .container img {
    width: auto;
    max-width: 450px;
}

.__pages_lancamentos .header, .__pages_lancamentos .footer {
    display: none !important;
}

Se quiser que inclui ou retira alguma coisa, só avisar, ta!
Lembrando que essa página que eu te enviei é da minha loja de teste, ta!

Abraço!

voller · Novembro 24, 2020, 5:35pm

Olá @thais
Tudo bem?

A Página ficou boa, mas gostaria de modificar algumas coisas

Teria como mudar a fonte do texto? Se sim , pode ser a ‘‘Clarika Office Grotesque DEMO Bold’’
A página ficou com rolagem, teria como diminuir o espaço do inicio da página até a logo, e um pouco da logo até a frase? (via desktop e via mobile)

Segue imagem do espaço do inicio da página até a logo

Ficaria mais ou menos assim (isso via desktop), tirando um pouco de espaço tambem entre e logo e frase personalizada

Via Mobile a logo ficou muito grande e está rolagem tanto para baixo, quanto para os lados, teria que dar uma mexida tambem para deixar mais centrado e sem rolagem…

Outra coisa, voce tinha passado um código para colocar no final do arquivo do github, para caso eu quisesse ativar e desativar a página de manutenção

[[redirects]]

from = “/*”
to = “Voller Manie”
status = 302
force = true

Mas ontem você mandou um outro código, esse código é abaixo do outro? Não entendi direito, ou eu coloco esse código de ontem e logo abaixo o anterior?

thais · Novembro 24, 2020, 5:40pm

O código que eu mandei por último é o css para customizar a página. Ele deve ficar no CMS lá em Layout > Inserir código > ultimo quadro da tela.

Vou ajustar aqui o que me pediu e te mandar o código css completo, ta!

Abraço!

voller · Novembro 25, 2020, 7:32pm

Tá bom @thais , obrigada!

voller · Novembro 27, 2020, 3:30pm

Olá @thais, algum retorno?

thais · Novembro 27, 2020, 4:35pm

sim. Só corrigindo um erro aqui e já te libero.

thais · Novembro 27, 2020, 8:17pm

Oi, tudo bem?

Segue esse ultimo passo a passo que esta completo pra não confundir, ta!

Sua logo esta muito grande e ficou ruim de ajeitar na tela. Vá no CMS e faça o Upload dela só clicando no menu conforme imagem abaixo: (te enviei por e-mail).

voller11336×242 26.4 KB
No CMS, vá na sua página extra lançamentos e exclua o texto de lá e adicione o bloco HTML que vou colocar aqui embaixo da imagem:

<div class="extra-page" id="lancamentos" >
    <section class="md-content mb-5 pt-1 pt-sm-2 pt-lg-3">
        <div class="container">
            <p><img src="/img/uploads/logo_redefinida.png" alt=""></p>
            <p>Olá, estamos fechados preparando novidades incríveis para você!!</p>
            <p>Retornamos as 11h</p>

        </div>
    </section>
</div>

Coloque o seguinte CSS acessando o CMS na opção: Layout > Inserir código:

#lancamentos .container {
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
    font-size: 200%;
    color: #d20039;
    font-family: ‘Clarika Office Grotesque DEMO Bold’, sans-serif !important;
}
#lancamentos .container img {
    padding-bottom: 50px;
    width: auto;
    max-width: 450px;
}

.__pages_lancamentos .header,
.__pages_lancamentos .footer {
    display: none !important;
}

@media screen and (max-width: 480px) {
    #lancamentos .container img {
        padding-bottom: 50px;
        max-width: 100% !important;
    }
}

Ativar ou desativar a página de lançamento e desativar as outras entradas: Para ativar, bastaria colocar o trecho de código abaixo no arquivo que vou te passar:

[[redirects]]

  from = "/*"
  to = "https://www.vollermanie.com.br/pages/lancamentos"
  status = 302
  force = true

Esse código deve ser colocado no final do arquivo:

github.com

ecomplus-stores/voller/blob/master/.netlify/netlify.toml

[build]
  publish = "publish"
  functions = "functions-zip"

[[redirects]]
  from = "/*"
  to = "/.netlify/functions/ssr?slug=:splat"
  status = 200

[[headers]]
  for = "/storefront.*"
  [headers.values]
    Cache-Control = "public, max-age=3600"

[[headers]]
  for = "/storefront.js"
  [headers.values]
    Cache-Control = "public, max-age=0, must-revalidate"

[[headers]]

Agora esta o passo completo. O layout eu alterei conforme vc pediu, ta! Ate o passp 3 você pode fazer qualquer momento. Só o passo 4 que ativa ou desativa a página, ta!

Abraço!

voller · Dezembro 27, 2020, 8:14pm

@thais , eu fiz a edição na página: https://github.com/ecomplus-stores/voller/blob/master/.netlify/netlify.toml , conforme você havia indicado. Entretanto, não está redirecionando ainda.

Eu fiz um teste e acessei a página: https://www.vollermanie.com.br/pages/lancamentos e está com as modificações que eu fiz e etc. Mas não está redirecionando quando eu acesso a página inicial para essa. Teria mais algum outro detalhe que eu teria que fazer?

thais · Dezembro 28, 2020, 11:29am

oi @voller, tudo bem?

Verifiquei aqui e o código precisa ser colocado no início do trecho.
Só mudar onde você colocou no final e colocar no começo, tudo bem?

Aguardo seu retorno!

Abraço!

voller · Dezembro 28, 2020, 12:14pm

@thais, fiz como você me passou agora, colocando o código no inicio do arquivo, mas quando entra no site, aparece assim…

thais · Dezembro 28, 2020, 1:57pm

oi @voller, tudo bem?

Fizemos uma mudança em outro arquivo para manter todas as imagens e evitar conflitos. Esta ok ai agora. Pode dar uma olhada por favor.

Para voltar a sua página ao normal, você precisa entrar aqui e apagar esse texto que esta na imagem abaixo de verde:

Ok?

Esse mesmo código nesse local habilita a página de manutenção. Vou apenas colocar o código aqui para documentar, (caso precise usar outras vezes):

<script>
if (location.pathname !== '/pages/lancamentos') {
  location.href = 'https://www.vollermanie.com.br/pages/lancamentos';
}
</script>

Abraço!