Pular para o conteúdo principal

Documentation Index

Fetch the complete documentation index at: https://docs.kiwify.com.br/llms.txt

Use this file to discover all available pages before exploring further.

Seções são blocos de conteúdo reutilizáveis definidos em arquivos .liquid. Eles são os blocos de construção do seu tema e podem ser personalizados através do editor de tema.

​
Visão Geral

Seções:
  • São altamente personalizáveis através de parâmetros
  • Podem ser reutilizadas múltiplas vezes com diferentes configurações
  • Suportam blocos aninhados para layouts complexos
  • Podem ser criadas, deletadas ou renomeadas conforme necessário

​
Estrutura da Seção

Um arquivo de seção geralmente consiste de duas partes:
  1. Markup - O código Liquid/HTML que renderiza a seção
  2. Schema - Uma definição JSON que especifica as opções de personalização disponíveis no editor de tema

​
Exemplo de Seção

<div class="course-list {% if section.settings.full_width %}container-fluid{% else %}container{% endif %}">
  <h2>{{ section.settings.title }}</h2>
  
  {% if section.settings.course_id != blank %}
    {% assign course = all_courses[section.settings.course_id] %}
    {% if course %}
      <div class="course-card">
        <h3>{{ course.name }}</h3>
        <img src="{{ course.thumbnail }}" alt="{{ course.name }}">
        <div class="progress">{{ course.user_data.progress }}%</div>
      </div>
    {% endif %}
  {% endif %}
</div>

​
Componentes do Schema

O bloco schema define como a seção aparece no editor de tema:
  • name - O nome de exibição no editor de tema
  • settings - Array de opções de configuração
  • blocks - Configurações de bloco opcionais
  • presets - Configurações pré-definidas para adicionar a seção
  • kiwi_extra - Configurações adicionais para o editor de tema
    • icon - Ícone a ser associado com este tipo de seção no editor de tema
    • blocks_hidden_if - Objeto representando uma condição que oculta blocos de seção dentro do editor de tema se satisfeita
      • setting - Qual configuração desta seção verificar
      • value - Valor esperado para que a seção de bloco seja ocultada

​
Tipos de Configuração

Consulte Tipos de Input para mais detalhes.
  • checkbox: Toggle booleano (verdadeiro/falso)
  • course: Dropdown populado com todos os cursos da área de membros
  • image_picker: Seleção de imagem
  • module: Grupo dropdown para selecionar um módulo de um curso da área de membros
  • range: Slider numérico
  • select: Grupo de botões toggle
  • text: Input de texto de linha única

​
Blocos de Seção

Blocos permitem componentes reutilizáveis e configuráveis dentro de uma seção. Eles são ideais para:
  • Slides em um carrossel
  • Itens em uma galeria
  • Áreas de conteúdo personalizadas
Cada bloco tem seu próprio tipo e configurações: 
"blocks": [
  {
    "type": "slide",
    "name": "Slide",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Imagem do Slide"
      },
      {
        "type": "text",
        "id": "alt_text",
        "label": "Texto Alternativo"
      }
    ]
  }
]

​
Melhores Práticas

  • Crie seções reutilizáveis com parâmetros claros
  • Use valores padrão significativos
  • Agrupe configurações relacionadas
  • Use blocos para componentes que precisam ser individualmente personalizáveis
  • Mantenha o markup limpo e de fácil manutenção

​
Contexto Disponível nas Sections

No seu código Liquid de seção, você tem acesso a:
  1. O objeto section contendo todas as configurações do JSON do template
  2. Objetos globais como all_courses, all_modules, e all_lessons
  3. Helpers de tradução via filtro t

​
Estilizando Sections

Os temas Kiwify usam TailwindCSS para estilização. Este framework utility-first permite construir designs personalizados diretamente no seu markup: 
<div class="flex flex-col md:flex-row p-4 gap-6 rounded-lg shadow-md bg-white">
  <img class="w-full md:w-1/3 rounded-md object-cover" src="{{ course.thumbnail }}" alt="{{ course.name }}">
  <div class="flex-1">
    <h3 class="text-xl font-bold text-gray-900">{{ course.name }}</h3>
    <div class="h-2 w-full bg-gray-200 rounded-full mt-2">
      <div class="h-2 bg-green-500 rounded-full" style="width: {{ course.user_data.progress }}%"></div>
    </div>
  </div>
</div>