Landing Page na Wake

Criada por Alex Camargo, Modificado em Seg, 10 Jun na (o) 3:46 PM por Alex Camargo

A Wake possui dois modelos de loja atualmente:

- Modelo Clássico, que utiliza o Style Editor

- Modelo Storefront, que utiliza o Storefront para edição de templates.

Para saber qual é o seu caso basta verificar se no menu do admin da sua loja existe a opção "Storefront".

Modelo Clássico

- Acessar Vitrines > Conteúdos e clicar em "Adicionar Conteúdo"

- Informe um Título como desejar (por ex: Programa de Pontos)

- Em "Posicionamento" escolha "Centro"

- No editor de conteúdo clique "Código-Fonte"

- Copie e cole o código abaixo

<div id="bq-landingpage"></div>

- Clique na aba "Apresentação"

- Marque o item "Não exibir conteúdo nas buscas?"

- Clique em Salvar e depois em Confirmar

- Agora acesse Vitrines > Hotsites e clique em "Adicionar Hotsite"

- Informe um nome no campo "Nome Hotsite" (por ex: Programa de Pontos)

- Marque a seleção "Ativo"

- Informe uma URL (por ex: programa-de-pontos)

- Em "Template" escolha "Hotsite em Branco"

- Em "Tamanho da página" informe 1

- Agora clique na aba "Produtos"

- Marque "Não exibir Produtos no Hotsite"

- Agora clique na aba "Banner/Conteúdos Vinculados"

- Em "Adicionar novo conteúdo" busque pelo conteúdo criado na etapa anterior (no nosso exemplo utilizamos "Programa de Pontos") e clique em Adicionar

- Agora clique em Salvar

A página agora ficará disponível na URL escolhida. Em nosso exemplo: /programa-de-pontos

Importante: A Wake possui um tempo de cache considerável. Sendo assim, talvez essa página recém criada ainda não esteja disponível.
Você pode forçar essa limpeza de cache através do Style Editor

Modelo Storefront

Criar Hotsite

A primeira etapa é criar um hotsite. O conteúdo será adicionado posteriormente, via Storefront

- Acesse Vitrines > Hotsites e clique em "Adicionar Hotsite"

- Informe um nome no campo "Nome Hotsite" (por ex: Programa de Pontos)

- Marque a seleção "Ativo"

- Informe uma URL (por ex: programa-de-pontos - anote esse endereço pois você irá utilizá-lo posteriormente)

- Em "Template" escolha "Hotsite em Branco"

- Em "Tamanho da página" informe 1

- Agora clique na aba "Produtos"

- Marque "Não exibir Produtos no Hotsite"

- Agora clique em Salvar

Criar template no Storefront

- Acesse o menu StoreFront > Repositório e clique em Editar

- No menu de arquivos, vá em "Pages" e clique em "Criar novo arquivo"

- Em "nome do arquivo" digite "bonifiq.html" e clique em "Criar Arquivo"

- Clique em fechar e clique no arquivo recém-criado (bonifiq.html)

- Adicione o conteúdo abaixo e clique em Salvar

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        {{ head title: data.hotsite.name store: store }}
        {{ data_layer_config common: common }}
        {{ hotsite_structured_data hotsite: data.hotsite base_url: store.urls.base current_url: store.urls.current }}
        {{ asset type: "css" paths: ["navbar", "footer", "mini_cart", "user_login", "spot", "product", "output", "glider", "slider_price" ]}}
        {{ meta_tags seo: data.hotsite.seo }}
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    
    <body class="bg-mainBg">
        <header class="shadow-xl lg:shadow-none bg-mainBg">
            {{ links }}
            {{ header }}
            {{ navbar store: store menu_groups: common.menu_groups position: "Topo Header" }}              
        </header>
       
        {{ side_cart }}
        {{ overlay }}
     
        <div class="flex flex-col my-4 w-full lg:flex-row lg:justify-center">
         <div id="bq-landingpage">Carregando...</div>
        </div>

        {{ footer is_preview: is_preview store: store }}
        
        {{ sdk_client }}
        {{ asset type: "js" paths: ["components", "navbar", "product", "mini_cart", "user_login"]}}
    </body>
</html>

Você pode adicionar qualquer conteúdo aqui, que melhor se adapte ao layout da sua loja. Mas é muito importante que o "miolo" da página contenha a div:

<div id="bq-landingpage"></div>

- Ainda no Storefront, acesse a pasta "Configs" e clique em "pages.json"

- Localize o nó "type" e dentro dele "customs" e adicione o código abaixo dentro desse nó:

            {
            "urlMatch": "programa-de-pontos",
            "path": "bonifiq.html"
            }

Aqui é muito importante notar que:

- O nome utilizado em "urlMatch" deve bater com aquele salvo no hotsite (no nosso exemplo, programa-de-pontos)

- Clique em Salvar

Importante:

- Para ver as mudanças você precisa limpar o Cache do Storefront

- As alterações acima consideram alterações realizada diretamente na branch main do storefront. Talvez você ou sua agência prefiram criar outra branch para realizar os testes antes de aplicar em produção.