Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.martan.app/llms.txt

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

O widget de avaliações permite que clientes visualizem e interajam com avaliações de produtos. Ele oferece múltiplos layouts, filtros, busca e paginação.

​
Uso Básico

O widget sempre busca as avaliações da API Martan. Configure as credenciais e o produto: 
<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>
Ou usando SKU do produto com layout em lista: 
<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

AtributoTipoObrigatórioDescrição
data-store-idstringSim*ID da loja na API Martan
data-store-keystringSim*Chave da API (web_id) da loja
data-product-idstringSim*ID do produto na API Martan
data-product-skustringSim*SKU do produto na API Martan
data-items-per-pagenumberNãoNúmero de itens por página (padrão: 10)
data-header-typestringNãoTipo de header a exibir (padrão: “default”)
data-list-typestringNãoTipo de layout da lista de avaliações (padrão: “grid”)
* data-store-id e data-store-key podem ser omitidos se configurados globalmente. É necessário fornecer data-product-id OU data-product-sku (não ambos).
Valores possíveis para data-header-type:
  • default - Header padrão com estatísticas
  • histogram - Header com histograma de distribuição
  • compact - Header compacto
  • minimal - Header minimalista
  • centered - Header centralizado
Valores possíveis para data-list-type:
  • grid - 2 cards lado a lado (padrão)
  • list - 1 card por linha, full width

​
Propriedades JavaScript

PropriedadeTipoDescrição
storeIdstringID da loja
storeKeystringChave da API
productIdstringID do produto
productSkustringSKU do produto
itemsPerPagenumberItens por página
headerTypestringTipo de header
listTypestringTipo de layout da lista (grid ou list)

​
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