Tema Padrão

O tema padrão da Kiwify conta com seis tipos de seção, que podem ser totalmente customizadas de acordo com suas preferências.

​

Login

Exibe o botão de login da Kiwify com layout, imagem de título e imagem de fundo. Expõe os seguintes parâmetros para o Editor de Temas:

• variant: controla o layout — sidebar ou fundo completo
  

  Layout de fundo completo

  

  Layout sidebar
• image_background: imagem exibida no fundo da tela de login (opcional)
• image_header: imagem exibida acima do botão de login (opcional; usa o logotipo da área de membros como fallback)

Essa seção utiliza o snippet auth-button para exibir o botão de login, que é um simples wrapper para o botão de login implementado nativamente na Área de Membros Kiwify.

​

Banner

Carrossel de imagens com passagem automática de slides. Utiliza a biblioteca Embla Carousel para controle de slides. Saiba mais sobre as bibliotecas disponíveis. Quando há mais de um slide, exibe setas para avançar e retroceder slides, e um controle de acesso direto aos slides na parte inferior. Expõe um único parâmetro:

• slides_delay: quantos segundos o componente deve esperar até trocar para o slide seguinte, quando há mais de um

Os slides podem ser no máximo 3, e são representados como blocos, que podem ter os seguintes parâmetros:

• mobile_image: imagem do slide na versão mobile; caso ausente, a imagem desktop é exibida no mobile também
• desktop_image: imagem do slide na versão desktop; caso ausente, a imagem mobile é exibida no desktop também

​

Cursos

Carrossel com links para cursos da área de membros. Cada link é exibido na forma de um card com a imagem e, opcionalmente, o nome do curso. Expõe os seguintes parâmetros para o Editor de Temas:

• title: título exibido no topo da seção
• items_variant: modo de exibição dos títulos dos conteúdos; pode ter os seguintes valores:
  • content_over: título sempre visível sobre a imagem do curso
  • content_hidden: título não é exibido
  • mouse_hover: título é exibido sobre a imagem do curso apenas ao passar o mouse sobre o card
• items_layout: formato de exibição dos cards; pode ter os valores portrait (retrato) ou landscape (paisagem). Vide
• all_accessible_courses: booleano que controla quais cursos serão exibidos na seção; se seu valor for verdadeiro, todos os cursos aos quais o usuário tem acesso serão exibidos, em ordem alfabética; se for falso, serão exibidos os cursos referenciados nos blocos da seção

Essa seção pode conter blocos, indicando quais cursos devem ser exibidos na seção e em qual ordem. Cada bloco contém apenas uma propriedade: course_id. Caso um curso referenciado em um bloco não seja acessível ao usuário final, ele será exibido mesmo assim. Se o curso tiver venda na área de membros configurada, o usuário final será capaz de clicar no link para realizar a compra.

​

Módulos

Carrossel com links para módulos de um curso da área de membros. Cada link é exibido na forma de um card com a imagem e, opcionalmente, o nome do módulo. Expõe os seguintes parâmetros para o Editor de Temas:

• title: título exibido no topo da seção
• items_variant: modo de exibição dos títulos dos conteúdos; pode ter os seguintes valores:
  • content_over: título sempre visível sobre a imagem do curso
  • content_hidden: título não é exibido
  • mouse_hover: título é exibido sobre a imagem do curso apenas ao passar o mouse sobre o card
• items_layout: formato de exibição dos cards; pode ter os valores portrait (retrato) ou landscape (paisagem)
• course_id: identificador do curso cujos módulos serão listados nessa seção

Caso um módulo do curso não seja acessível ao usuário final, ele será exibido mesmo assim. Se o curso tiver venda na área de membros configurada, o usuário final será capaz de clicar no link para realizar a compra do curso completo.

​

Aulas

Carrossel com links para aulas de um curso da área de membros. Cada link é exibido na forma de um card com a imagem e, opcionalmente, o nome da aula. Expõe os seguintes parâmetros para o Editor de Temas:

• title: título exibido no topo da seção
• items_variant: modo de exibição dos títulos dos conteúdos; pode ter os seguintes valores:
  • content_over: título sempre visível sobre a imagem do curso
  • content_hidden: título não é exibido
  • mouse_hover: título é exibido sobre a imagem do curso apenas ao passar o mouse sobre o card
• items_layout: formato de exibição dos cards; pode ter os valores portrait (retrato) ou landscape (paisagem)
• module_id: identificador do módulo cujas aulas serão listadas nessa seção

Caso o módulo selecionado não seja acessível ao usuário final, a seção inteira não é exibida.

​

Continuar Assistindo

Carrossel com links para aulas recomendadas para o usuário final continuar assistindo (vide objeto last_watched_lessons). Cada link é exibido na forma de um card com a imagem e, opcionalmente, o nome da aula. Expõe os seguintes parâmetros para o Editor de Temas:

• items_layout: formato de exibição dos cards; pode ter os valores portrait (retrato) ou landscape (paisagem)

Caso não haja nenhuma aula para continuar assistindo, a seção inteira não é exibida.

​

Cards

As seções de cursos, módulos, aulas e “continuar assistindo” são bem similares: exibem links para conteúdo da área de membros na forma de cards. Para evitar duplicação de código, esses links estão implementados nos snippets cards e cards-item. O snippet cards é responsável por exibir o título, configurar o carrossel e percorrer a lista de links, chamando o snippet cards-item para cada link. Ele recebe alguns argumentos que o tornam bastante flexível:

• section_items: lista de objetos que serão exibidos; mais detalhes abaixo
• is_horizontal: booleano que indica se os cards devem assumir o layout horizontal ou vertical
  

  Card horizontal

  

  Card vertical
• should_display_progress: booleano que indica se a barra de progresso deve ser exibida ou não
• percentage_field: propriedade dentro do campo user_data de cada item de section_items que contém o valor a ser exibido na barra de progresso
• path_format: string que indica o formato da URL para a qual o conteúdo aponta. Exemplos:
  • {id}: a URL final será o ID do item
  • {course_id}/{id}: a URL final será o valor do campo course_id do item, seguido da barra e do ID do item

Ele também precisa que sejam repassados os seguintes objetos globais para ele:

• section
• is_preview

O snippet cards-item recebe esses mesmos parâmetros exceto o section_items. No lugar, recebe o parâmetro item, que é basicamente um dos itens da lista section_items. Esse parâmetro item deve ser um objeto e pode ter as seguintes propriedades:

• thumbnail_slider_cover, logo_url e thumbnail: URL para a imagem do card. Qualquer um dos três nomes pode ser usado
• user_data: objeto do tipo user_data ou, no caso do item ser uma aula, lesson_user_data
• custom_offer: objeto do tipo custom_offer
• course_id: ID do curso ao qual o item pertence, no caso de módulos e aulas
• module_id: ID do módulo ao qual a aula pertence
• id: ID do curso, módulo ou aula
• name: nome do curso, módulo ou aula, a ser exibido no card