Seções

​

Visão Geral

• 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

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>

{% schema %}
{
  "name": "Exibição de Curso",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Título da Seção",
      "default": "Curso em Destaque"
    },
    {
      "type": "select",
      "id": "course_id",
      "label": "Selecionar Curso",
      "options": [
        {
          "value": "",
          "label": "Nenhum"
        },
        {
          "value": "course-id-1",
          "label": "Curso 1"
        },
        {
          "value": "course-id-2",
          "label": "Curso 2"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "Largura Total",
      "default": false
    }
  ],
  "presets": [
    {
      "name": "Exibição de Curso",
      "settings": {
        "course_id": ""
      }
    }
  ]
}
{% endschema %}

​

Componentes do Schema

• 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

• 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

• Slides em um carrossel
• Itens em uma galeria
• Áreas de conteúdo personalizadas

"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

​

Contexto Disponível nas Sections

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

<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>