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>
<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
| Atributo | Tipo | Obrigatório | Descrição |
|---|
data-store-id | string | Sim* | ID da loja na API Martan |
data-store-key | string | Sim* | Chave da API (web_id) da loja |
data-product-id | string | Sim* | ID do produto na API Martan |
data-product-sku | string | Sim* | SKU do produto na API Martan |
data-items-per-page | number | Não | Número de itens por página (padrão: 10) |
data-header-type | string | Não | Tipo de header a exibir (padrão: “default”) |
data-list-type | string | Não | Tipo 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).
data-header-type:
default - Header padrão com estatísticashistogram - Header com histograma de distribuiçãocompact - Header compactominimal - Header minimalistacentered - 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
| Propriedade | Tipo | Descrição |
|---|
storeId | string | ID da loja |
storeKey | string | Chave da API |
productId | string | ID do produto |
productSku | string | SKU do produto |
itemsPerPage | number | Itens por página |
headerType | string | Tipo de header |
listType | string | Tipo de layout da lista (grid ou list) |
Exemplos
Padrão
<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>
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
