O Interaction Manager permite que você crie interações personalizadas que melhoram a funcionalidade do seu site sem exigir código adicional. Essas interações personalizadas são criadas pela combinação de regras predefinidas, oferecendo possibilidades ilimitadas de funcionalidade.
Pense nas regras como ingredientes: elas podem ser combinadas de diversas maneiras para criar uma variedade de resultados diferentes.
Alguns tutoriais de exemplo do que pode ser criado com o Interaction Manager podem ser encontrados no Blocs Academia.
Gerenciador de Interação Aberta
Para iniciar o Gerenciador de Interação, vá até o Barra de Menus Principal e a partir da Windows menus, selecione Gerente de interação ou, alternativamente, use o atalho do teclado ⌃⌘eu.
Adicionar interação
Para criar uma nova interação, clique em + botão que está localizado no canto superior direito da janela do Interaction Manager ou, alternativamente, use o atalho do teclado ⌃n.
Renomear interação
É possível renomear uma interação simplesmente clicando no texto do item de interação e digitando um novo nome.
Interação Duplicada
É possível duplicar uma interação por clique direito e selecionando duplicar no menu de contexto ou, alternativamente, use o atalho do teclado ⌘+D.
Remover interação
Para remover e excluir uma interação personalizada, basta selecionar o item de interação que deseja remover e clicar no botão - botão, que está localizado no canto superior direito da janela do Interaction Manager ou, alternativamente, use o atalho de teclado ⌘+⌫.
Editar interação
Para editar uma interação, clique em Configurações que está localizado na extrema direita do item de interação, ou simplesmente clique duas vezes no item de interação. Isso abrirá um popover contendo todas as regras contidas na interação.
Inserir uma regra
Para inserir uma nova regra em uma interação, basta clicar no + botão que está localizado no canto superior direito do popover de interação ou, alternativamente, use o atalho do teclado ⌃n. Isso abrirá um menu suspenso contendo todas as regras disponíveis que podem ser usadas dentro de interações personalizadas. Clicar em uma delas a inserirá abaixo da regra selecionada no momento.
Condicionais
Declaração If
A regra de instrução if é usada para executar lógica condicional. Ela permite que você coloque regras dentro dela que são acionadas somente se uma condição especificada for avaliada como verdadeira. Isso é útil para tomada de decisão em suas interações personalizadas, permitindo resultados diferentes com base em certas condições.
As instruções if de interação personalizada oferecem suporte às seguintes variáveis: URL, Visível, Na tela, Rolagem Y, Cookie, Sistema operacional (SO), Intervalo de tempo, Diurno, Noturno, Data, Dia, Mês, Dia da semana, Fim de semana. Todas as variáveis permitem que você especifique um valor de comparação e oferecem suporte a vários operadores.
Navegação
Navegar para a página
Esta regra navegará o navegador até a página especificada.
Navegar para URL
Esta regra navegará o navegador até o URL especificado.
Rolar para o alvo
Esta regra irá rolar até o elemento com o #ID ou classe especificados.
Atualizar página
Esta regra recarregará a página atual no navegador.
Classes
Alternar classe
Esta regra irá alternar a aplicação das classes especificadas aos elementos com os IDs ou classes especificados.
Adicionar classe
Esta regra adicionará as classes especificadas aos elementos com os IDs ou classes especificados.
Remover classe
Esta regra removerá as classes especificadas dos elementos com os IDs ou classes especificados.
Ação
Definir Atributo
Esta regra definirá o valor de um atributo de dados para o elemento com o #ID ou classe especificados.
Alternar visibilidade
Esta regra alternará a visibilidade dos elementos com os IDs ou classes especificados.
Alternar modal
Esta regra alternará um modal (mostrar/ocultar) com o #ID especificado.
Link de telefone
Esta regra iniciará uma chamada telefônica (em dispositivos compatíveis) para o número de telefone especificado.
E-mail link
Esta regra abrirá o cliente de e-mail do usuário atual com o campo de endereço preenchido com o endereço de e-mail especificado.
Baixar Arquivo
Esta regra acionará o download do arquivo especificado.
Enviar Mensagem
Esta regra submeterá um formulário com o #ID ou classe especificados.
Redefinir Forma
Esta regra irá redefinir um formulário com o #ID ou classe especificados.
Remover elemento
Esta regra removerá um elemento com o #ID ou classe especificados.
Desabilitar Elemento
Esta regra desativará um elemento com o #ID ou classe especificados.
Chamar JavaScript
Esta regra pode ser usada para chamar funções JavaScript personalizadas.
Seleção
Selecionar guia
Esta regra selecionará a guia para uma guia Bric com o #ID especificado.
Clique no item
Esta regra clicará programaticamente no elemento com o #ID ou classe especificados.
Elemento de foco
Esta regra irá focar programaticamente o elemento com o #ID ou classe especificados.
Verifique o elemento
Esta regra definirá programaticamente o estado selecionado do elemento com o #ID ou classe especificados.
Texto
Definir texto
Esta regra definirá o conteúdo de texto especificado para o elemento com o #ID ou classe especificados.
Copiar texto
Esta regra copiará uma sequência de texto especificada ou o conteúdo textual de um elemento para a área de transferência do usuário.
Definir valor
Esta regra definirá o valor do elemento de entrada com o #ID ou classe especificados.
Vídeo
Video Player
Esta regra pode acionar eventos como reproduzir, pausar, parar e silenciar para o elemento do player de vídeo com o ID especificado.
em áudio
Audio Player
Essa regra pode acionar eventos como reproduzir, pausar, parar e silenciar para o elemento do reprodutor de áudio com o #ID ou classe especificados.
Tocar som
Esta regra reproduzirá o arquivo de áudio mp3 atribuído (Adicionar arquivos de áudio ao Asset Manager).
Bootstrap
carrossel
Essa regra pode acionar eventos como reproduzir, pausar, próximo e anterior para o elemento do carrossel com o #ID especificado.
Interações
Chamada de interação personalizada
Esta regra chamará outra interação personalizada e permitirá um atraso definido em milissegundos.
Interação de pausa
Esta regra adiciona um atraso (em milissegundos) antes da execução da próxima regra de interação.
Parar interação
Esta regra impede que uma interação personalizada execute regras adicionais depois dela.
Opiniões sobre o curso
Notificação
Esta regra acionará uma notificação na web do navegador com a mensagem especificada.
Alertar
Esta regra acionará um alerta com a mensagem especificada.
Registro do console
Esta regra criará um log do navegador com o texto especificado.
Cookie
Definir cookie
Esta regra definirá um cookie no navegador do usuário com um nome, valor e número de dias especificados.
Destruir Cookie
Esta regra destruirá um cookie no navegador do usuário com um nome especificado.
misc
Definir HTML
Esta regra definirá o HTML do elemento com o #ID ou classe especificados.
Parar de carregar
Esta regra interromperá o carregamento do navegador da web.
Parar de carregar
Esta regra interromperá o carregamento do navegador da web.
Duplicar uma regra
É possível duplicar uma regra por clique direito e selecionando duplicar no menu de contexto ou, alternativamente, use o atalho do teclado ⌘+D.
Remover uma regra
Para remover uma regra de uma interação, basta selecionar a regra que deseja remover e clicar no botão - botão localizado no canto superior direito do popover de interação.
Coloque dentro da declaração If
Você pode colocar rapidamente várias regras dentro de uma instrução if selecionando-as, clicando com o botão direito e escolhendo Lugar Dentro > Declaração If no menu de contexto.
Código curto de dados
Agora você pode usar o dados() código curto em uma interação personalizada para obter personalizado atributo de dados valores do elemento de gatilho quando a interação é executada. Basta colocar o atributo de dados de destino dentro dos colchetes, assim: dados(meu-atributo). O atributo devo também pode ser armazenado no elemento de gatilho.
Você pode usar o dados() short-code em qualquer campo de texto de regra de interação. Saiba mais sobre como adicionar atributos de dados personalizados a elementos aqui..
Aplicar interações personalizadas
Interações personalizadas podem ser aplicadas a quase qualquer elemento dentro Blocs, itens como botões, imagens e ícones tenha uma opção de interação personalizada disponível no menu suspenso de interações da barra lateral padrão.
Outros elementos como Blocs, linhas, colunas, divs e texto mostrará um painel de interação personalizado no inspetor da barra lateral.
O Gerente de Menu tem suporte para usar interações personalizadas em itens de menu.
Acionar interação personalizada
Na maioria dos casos, as interações personalizadas podem ser acionadas de três maneiras: quando um elemento é clicou, quando o cursor do mouse está pairando sobre um elemento e quando o cursor do mouse folhas um elemento.
Também é possível acionar uma interação personalizada quando uma página tiver carregado, isso pode ser feito através do opções de configurações de página.
Também é possível arrastar uma interação personalizada do Gerenciador de Interações para elementos no Blocs design canvas para aplicá-los. Além disso, você pode arrastar interações personalizadas para páginas no Page Navigator para aplicar uma interação personalizada de carregamento de página.