Reviews Widget

​

Uso Básico

<martan-reviews
  data-store-id="seu-store-id"
  data-store-key="sua-store-key"
  data-product-id="123"
  data-items-per-page="10"
  data-header-type="default"
  data-list-type="grid"
>
</martan-reviews>

<martan-reviews
  data-store-id="seu-store-id"
  data-store-key="sua-store-key"
  data-product-sku="PROD-123"
  data-items-per-page="10"
  data-list-type="list"
>
</martan-reviews>

​

Propriedades

​

Atributos HTML

• default - Header padrão com estatísticas
• histogram - Header com histograma de distribuição
• compact - Header compacto
• minimal - Header minimalista
• centered - Header centralizado

• grid - 2 cards lado a lado (padrão)
• list - 1 card por linha, full width

​

Propriedades JavaScript

​

Exemplos

​

Padrão

​

Customizando aparencia com CSS Variable

<style>
  martan-reviews {
    --rw-primary-color: #10b981;
    --rw-star-color: #f59e0b;
    --rw-progress-bar-color: #f59e0b;
    --rw-bg-color: #ffffff;
    --rw-text-color: #1f2937;
    --rw-font-family: 'Arial', sans-serif;
  }
</style>

​

Headers Disponíveis

​

Funcionalidades

• ✅ Integração com API Martan
• ✅ Listagem de avaliações com layout responsivo
• ✅ Múltiplos tipos de header (default, histogram, compact, minimal, centered)
• ✅ Filtros por número de estrelas
• ✅ Busca por texto (via API)
• ✅ Ordenação (data, rating)
• ✅ Paginação e carregamento incremental
• ✅ Estatísticas (média, distribuição de estrelas)
• ✅ Customização via CSS variables
• ✅ Debounce na busca para melhor performance