Barra lateral

Descrição

Este widget exibe várias seções e widgets de gamificação no mesmo espaço. Você pode encontrar os dados de gamificação do jogador, seus impulsionadores, uma versão compacta da loja de recompensas e informações sobre missões e torneios.

Configuração

• classe <string|required>: gamification_widget
• tipo-de-dados <string|required>: barra lateral
• data-height <string|required>: adicionar altura com pixels (600px por exemplo) para definir a altura do widget no formulário aberto
• data-open <string|optional>: true para mostrar a barra lateral aberta por padrão. Se não for fornecido, o padrão é false
• data-disable-toggle <string|optional>: true para desabilitar a alternância da barra lateral entre seu estado aberto/fechado. Se não for fornecido, o padrão é false
• data-show-menu-names <string|optional>: true para sempre exibir o nome de cada guia de menu. Se não for fornecido, o padrão é false
• data-menu-default <string|optional>: isso indica qual guia será exibida aberta por padrão na barra lateral. Se não for fornecido, o padrão é home. Opções disponíveis:
  • home
  • missões
  • loja de recompensas
  • torneios
• data-minimalist-orientation <string|optional>: retrato | paisagem para exibir a barra lateral minimalista e as animações com o modo retrato ou paisagem. O modo retrato usa as animações cima | baixo, e o modo paisagem usa as animações esquerda | direita. Se não for fornecido, o valor padrão é retrato. Além disso, essa configuração só funciona com a personalização minimalista.

Lembrete

A propriedade data-height é obrigatória. Sem isso, a altura do widget variará em cada página interna, dependendo do conteúdo.

Notas importantes

• A cor da barra lateral do widget (incluindo a seção do cabeçalho, os botões do menu e as ações do impulsionador) é determinada pela cor do tema principal. Em alguns casos, é aplicada uma transição para um tom mais escuro da cor principal, como mudar da cor principal para uma versão escurecida da mesma cor.
• O widget da barra lateral possui dois estados: aberto e fechado. Eles são alternados clicando no avatar.
• A barra lateral será exibida fechada por padrão, mas isso pode ser modificado usando a propriedade data-open na configuração.
• Se você deseja desabilitar a alternância da barra lateral entre o estado fechado/aberto, você pode usar a propriedade data-disable-toggle na configuração.
• A barra lateral terá a guia inicial selecionada por padrão, mas isso pode ser modificado usando a propriedade data-menu-default na configuração.
• Somente o nome da guia selecionada será exibido por padrão. Se você deseja exibir os nomes em todas as guias, você pode usar a propriedade data-show-menu-names na configuração.
• A versão "Desktop" aparece em larguras de janela acima de 600px, mas esse ponto de interrupção pode ser modificado nas configurações de administração no Backoffice -> Mais informações
• A barra lateral tem uma largura máxima padrão de 330px, mas esse valor pode ser ajustado nas configurações de administração no Backoffice -> Mais informações
• A versão minimalista deve ser ativada nas configurações de administração no Backoffice -> Mais informações

Exemplo: Com props obrigatórios

Mostre-me o código!

<div class="gamification_widget" data-type="sidebar" data-height="600px"></div>

Exemplo: Com prop show-names

Mostre-me o código!

<div
  class="gamification_widget"
  data-type="sidebar"
  data-height="600px"
  data-show-menu-names="true"
></div>

1. Com prop Nomes de Menu

2. Sem prop Nomes de Menu

IU:

1. Barra Lateral Aberta Desktop

2. Barra Lateral Fechada Desktop

3. Barra Lateral Aberta Mobile

4. Barra Lateral Fechada Mobile

Importante

• Observe que a versão móvel fechada da barra lateral está sempre no modo escuro

Seções Opcionais

No sidebar widget há três seções opcionais que só aparecem se você as tiver ativadas.

Você deve especificar se deseja que esses recursos estejam ativados quando decidir usar nossos widgets pela primeira vez.

Missões

Se você não tiver o recurso de missões ativado, a barra lateral oculta todo o conteúdo relacionado, incluindo o deslizador com as missões ativas e a página de missões.

Boosters

Se você não tiver o recurso de boosters ativado, a barra lateral oculta as ações para comprar ou ativar boosters adicionais.

Torneios

Se você não tiver o recurso de torneios ativado, a barra lateral oculta todo o conteúdo relacionado, incluindo o deslizador com os torneios ativos e a guia de menu de torneios.

Seção de Missões

Abaixo estão capturas de tela mostrando o conteúdo da página de missões.

1. Lista de Pacotes

   

2. Detalhes do Pacote - Em Ordem

   

3. Detalhes do Pacote - Em Qualquer Ordem

   

4. Histórico de Missões

   

Seção de Torneios

Abaixo estão capturas de tela mostrando o conteúdo da guia de menu de torneios.

1. Lista de torneios ativos

   

2. Detalhes do torneio

• Torneio agendado

  

• Torneio ativo

  

• Torneio finalizado

  

3. Modal de jogos do torneio

4. Histórico de torneios

Seção da Loja de Recompensas

Abaixo estão capturas de tela mostrando o conteúdo da página da loja de recompensas.

Todos os produtos:

Produtos da categoria:

Modal de detalhes do produto:

Informações de Envio:

Customização

Os seguintes recursos podem ser personalizados para o Widget da Barra Lateral. Para modificar esses valores, vá para o Backoffice (Configurações -> Widgets):

1. Ponto de interrupção móvel

Esta propriedade é usada para definir o ponto de interrupção em que a versão móvel da barra lateral fica visível.

Por exemplo: Se você definir 500px, a versão móvel estará disponível apenas para telas menores que 500px. Se deixado em branco, o valor padrão será 600px.

Importante: Isso se aplica apenas se a configuração minimalista não estiver ativada.

2. Largura máxima da barra lateral aberta

Esta propriedade é usada para definir a largura máxima da barra lateral aberta.

O valor mínimo permitido é 330px, e se o campo ficar vazio, o valor padrão será 330px.

3. Minimalista

Para ativar a versão minimalista da barra lateral em dispositivos móveis, basta ativar a opção nas Configurações do Backoffice.

Exemplos de UI Minimalista da Barra Lateral

Notas importantes

• Quando a versão minimalista da barra lateral está ativada, ela se aplica apenas a dispositivos móveis e tablets. Usamos isMobile e isTablet do react-device-detect para essa detecção. Se o plugin não conseguir identificar um dispositivo, a versão de desktop será usada como fallback. Os clientes são incentivados a testar e adaptar sua implementação conforme necessário.

Exemplo: Com modo retrato

Mostre-me o código!

<div
  class="gamification_widget"
  data-type="sidebar"
  data-height="600px"
  data-minimalist-orientation="portrait"
></div>

Exemplo: Em modo paisagem

Mostre-me o código!

<div
  class="gamification_widget"
  data-type="sidebar"
  data-height="600px"
  data-minimalist-orientation="landscape"
></div>

4. Imagem de Fundo do Cabeçalho da Barra Lateral

Agora você pode adicionar uma imagem de fundo à seção principal na widget da barra lateral.

5. Módulos da Barra Lateral

Neste conjunto de customizações, você pode habilitar ou desabilitar alguns módulos adicionados à widget da barra lateral. Abaixo, veremos exemplos de cada um.

1. Lealdade: Se você desabilitar o módulo de lealdade, todos os componentes de gamificação serão ocultos na barra lateral.

2. Impulsionadores: Se você desabilitar o módulo de impulsionadores, os componentes de impulsionadores e o botão para ativá-los no componente "Minhas Recompensas" serão ocultos na Barra Lateral.

3. Missões: Se você desabilitar o módulo de missões, as missões ativas na página inicial da Barra Lateral e o item no menu serão ocultos.

4. Torneios: Se você desabilitar o módulo de torneios, os torneios ativos na página inicial da barra lateral e o item no menu serão ocultos.

5. Loja de Recompensas: Se você desabilitar o módulo da loja de recompensas, toda a página da loja de recompensas e a opção no menu serão ocultas da barra lateral.

6. Minhas Recompensas: Se você desabilitar o módulo Minhas Recompensas, todo o componente Minhas Recompensas será oculto da página inicial da barra lateral.