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

# Snippets

> Fragmentos de código reutilizáveis compartilhados entre seções

# Snippets

<Info>
  Snippets são pedaços reutilizáveis de código Liquid que ajudam a manter consistência e reduzir duplicação ao longo do seu tema.
</Info>

## Visão Geral

* Não são visíveis no editor de tema
* Ideais para código que é repetido ao longo do seu tema
* Podem ser pensados como "componentes" ou "partials"
* Podem ser criados, deletados ou renomeados conforme necessário

## Criando Snippets

Snippets são armazenados no diretório `snippets/` com extensão `.liquid`. Por exemplo:

```liquid theme={null}
<!-- snippets/course-card.liquid -->
<div class="course-card">
  <img src="{{ course.thumbnail }}" alt="{{ course.name }}">
  <h3>{{ course.name }}</h3>
  <div class="progress-bar">
    <div class="progress" style="width: {{ course.user_data.progress }}%"></div>
  </div>
  <p>{{ course.user_data.progress }}% completo</p>
  <a href="/course/{{ course.id }}" class="button">{{ button_text | default: 'Continuar Aprendendo' }}</a>
</div>
```

## Usando Snippets

Para incluir um snippet em uma seção ou outro snippet, use a tag `render`:

```liquid theme={null}
{% for course_id in all_courses %}
  {% assign course = all_courses[course_id] %}
  {% render 'course-card', course: course, button_text: 'Ver Curso' %}
{% endfor %}
```

## Passando Variáveis para Snippets

Você pode passar variáveis para snippets ao renderizá-los:

```liquid theme={null}
{% render 'course-card', 
  course: course,
  button_text: 'Começar a Aprender',
  show_progress: false
%}
```

Dentro do snippet, essas variáveis estão disponíveis como variáveis locais:

```liquid theme={null}
<div class="course-card">
  <h3>{{ course.name }}</h3>
  
  {% if show_progress %}
    <div class="progress-bar">
      <div class="progress" style="width: {{ course.user_data.progress }}%"></div>
    </div>
  {% endif %}
  
  <a href="/course/{{ course.id }}" class="button">{{ button_text }}</a>
</div>
```

## Valores Padrão

Você pode fornecer valores padrão para variáveis de snippet usando o filtro `default`:

```liquid theme={null}
<a href="/course/{{ course.id }}" class="button {{ button_class | default: 'primary-button' }}">
  {{ button_text | default: 'Ver Curso' }}
</a>
```

## Casos de Uso Comuns para Snippets

<CardGroup cols={2}>
  <Card title="Componentes de UI">
    * Botões
    * Cards
    * Elementos de navegação
    * Barras de progresso
  </Card>

  <Card title="Padrões de Conteúdo">
    * Listagens de cursos
    * Layouts de módulos
    * Previews de aulas
    * Exibições de informações do usuário
  </Card>
</CardGroup>

## Exemplo: Snippet de Imagem

Um snippet para renderizar imagens consistentemente com carregamento lazy opcional:

```liquid theme={null}
<!-- snippets/image.liquid -->
<img
  src="{{ src }}"
  alt="{{ alt | escape }}"
  {% if class %}class="{{ class }}"{% endif %}
  {% if width %}width="{{ width }}"{% endif %}
  {% if height %}height="{{ height }}"{% endif %}
  {% if lazy_load %}loading="lazy"{% endif %}
/>
```

Uso:

```liquid theme={null}
{% render 'image', 
  src: product.image, 
  alt: product.title,
  class: 'rounded shadow',
  width: 300,
  height: 200,
  lazy_load: true 
%}
```

## Melhores Práticas

<Tip>
  * Crie snippets para componentes usados em múltiplos lugares
  * Passe variáveis para snippets para flexibilidade
  * Use convenções de nomenclatura consistentes
  * Mantenha snippets focados em uma única responsabilidade
  * Documente as variáveis esperadas para cada snippet
  * Use valores padrão para parâmetros opcionais
</Tip>