​
Snippets

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.

​
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: 
<!-- 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: 
{% 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: 
{% 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: 
<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: 
<a href="/course/{{ course.id }}" class="button {{ button_class | default: 'primary-button' }}">
  {{ button_text | default: 'Ver Curso' }}
</a>

​
Casos de Uso Comuns para Snippets

Componentes de UI

  • Botões
  • Cards
  • Elementos de navegação
  • Barras de progresso

Padrões de Conteúdo

  • Listagens de cursos
  • Layouts de módulos
  • Previews de aulas
  • Exibições de informações do usuário

​
Exemplo: Snippet de Imagem

Um snippet para renderizar imagens consistentemente com carregamento lazy opcional: 
<!-- 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: 
{% render 'image', 
  src: product.image, 
  alt: product.title,
  class: 'rounded shadow',
  width: 300,
  height: 200,
  lazy_load: true 
%}

​
Melhores Práticas

  • 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