Os e-commerces que contam com o Beon em suas plataformas conseguem definir estratégias de interação a partir do uso dos elementos disponibilizados pela nossa solução de personalização. Criar e gerenciar Áreas de Layout, a partir de um template pronto, é um exemplo. E é sobre essa funcionalidade que tratamos neste post. Confira!
Criando e gerenciando Áreas de Layout
O benefício desta função é poder adicionar elementos no corpo do seu site, coletando a classe ou ID, para incluir elementos Beon nestas localidades, consequentemente pode-se decidir o posicionamento que este elemento será exibido no seu site.
Atualmente, os elementos do Beon possuem referências dentro do site para que possam ser reproduzidos. Com a inclusão da tag usebeon é possível ver no campo Network a aplicação rodando e o seu tempo de reprodução. Isso gerencia a inclusão dos elementos do tipo Vitrine, Banner, Notificações e outros.
Normalmente, a estrutura de um site de e-commerce conta com Homepage, Catálogo, Produto, Carrinho, entre outras. Sendo assim, o Beon coleta informações de referência no site sendo id ou class do item do site, e inclui seu elemento com base nessas informações.
Com isso é possível incluir o elemento antes ou depois desta referência.
Exemplo: Coleta de informação de classe do site e configuração no painel Beon.
Do que você precisa para começar
Antes de seguir aprendendo mais sobre Áreas de Layout, confira o checklist abaixo para garantir que seu site tem tudo o que precisa para mergulhar no tutorial:
- Localizar a área de layout onde quer adicionar a vitrine (local do site que deseja aplicar o elemento Beon – homepage, catálogo, carrinho, etc.);
- Verificar a Página correspondente no Painel Beon. Ao acessar o painel Beon, avaliar o local correspondente desta configuração – homepage, catálogo, etc.);
- Avaliar o ID e Classe para a aplicação da área de layout. Verificar qual o código correspondente ao elemento.
Passo a passo para criar e gerenciar Áreas de Layout com o Beon
A seguir, você confere o passo a passo para criar e gerenciar Áreas de Layout do seu site de e-commerce usando o Beon.
- Acessar o site, ir em Inspecionar (botão direito do mouse, clicar na opção Inspecionar o local que deseja incluir o elemento Beon). Desta maneira irá descobrir a informação de ID ou classe do elemento de referência.
- Verificar qual a área de layout deseja aplicar o elemento Beon.Depois avaliar se desejo incluir o elemento Beon, antes do seletor ou depois. Pode-se usar o ID do elemento ou a classe da referência. Neste caso, mostramos o elemento id= beon-02 ou classe= beon-02, desejamos incluir um banner antes deste seletor no site.
- Acessar o Painel Beon e cadastrar esta área de layout na página correspondente. Verificar se o posicionamento do elemento que desejo incluir será aplicado antes ou depois do seletor. Se o seletor que deseja demarcar no painel Beon é ID, usamos a sintaxe #Nome da ID, se é uma classe .Nome da ClasseNeste exemplo criei a área de layout na Homepage, pois desejo incluir um Banner antes da referência ID #Beon-02, na homepage do site.
A configuração ficou da seguinte maneira:- Acessei a Homepage do Painel Beon
- Ir na opção: Adicionar área de layout
- Incluí a informação do Seletor ID: #beon-02, coloquei no posicionamento antes, pois desejo que o meu Banner seja exibido antes do seletor.
- Conclusão: aplicado um Banner na área de layout antes da referência de ID, sendo assim o elemento foi incluído antes do ID mencionado no site.
- Depois de cadastrar a área de layout desejada, lembrar que a função substituir substitui a área de layout pelo elemento que está incluindo vitrines, banner e etc. Sendo assim por padrão esta configuração fica como Não.
- Como identificar se a área de layout mencionada no Painel Beon existe no Site? A prova real é inspecionar o site e com a função find (Ctrl+F) para buscar pela área de layout mencionada. Pelo fato de que os sites mudam todo o momento a sua aparência, as vezes as referencias mapeadas podem alterar, sendo assim o ideal é verificar se a área de layout que deseja esta disponível na opção Inspecionar.
- Caso você queira que o seu site possua áreas de layout padrões (nomes padrões), é necessário incorporar no corpo do site HTML, divs que possuam ID ou classes que possuam estes nomes padrões.Este código possui o formato HTML e deve ser colocado em posicionamentos no site onde seria aplicado os elementos Beon desejados. Por ser uma configuração técnica, indicamos que aplique estes dados com o responsável pelo desenvolvimento do site.Código de exemplo: <div id=”beon-00″ class=”beon-00″ style=”padding-top: 10px;”></div>
Importante lembrar
Todos os ajustes voltados a layout, podem impactar na informação configurada em Área de layout no painel Beon, ou seja, qualquer modificação nas informações de ID/classe no site, devem ser corrigidas no Painel Beon, para que as vitrines, banner, faixas, etc., sejam exibidas no seu e-commerce. Se for realizar alterações de layout em diversas áreas de seu e-commerce, indicamos que realize avaliações com o time de suporte.
Exemplo de ocorrência de desalinhamento de área de layout:
Como corrigir instantaneamente:
- Acessar o painel Beon e desativar a vitrine/elemento no menu
- Desativar a página correspondente : A página terá o status Suspensa
- Siga as etapas acima e alguma coisa não sair como esperado, chame nosso time de Suporte: acessar o chat.