Skip to main content
O widget de rating exibe a avaliação média de um produto com estrelas e o total de avaliações. Ele pode buscar dados automaticamente da API Martan ou receber valores diretos.

​
Uso Direto

O widget de rating pode ser usado diretamente com props para buscar automaticamente da API: 
<martan-rating
  data-store-id="seu-store-id"
  data-store-key="sua-store-key"
  data-product-sku="PROD-123"
  data-star-color="#fbbf24"
  data-theme="compact"
>
</martan-rating>
Ou usando product-id: 
<martan-rating
  data-store-id="seu-store-id"
  data-store-key="sua-store-key"
  data-product-id="123"
  data-theme="compact"
>
</martan-rating>

​
Auto-Discovery

O widget também suporta auto-discovery, procurando automaticamente elementos no DOM com classes específicas: 
<div class="product-card__rating" data-sku="PROD-123"></div>
E então inicializar o auto-discovery: 
window.MartanRating.init({
  store_id: 'seu-store-id',
  web_id: 'sua-store-key',
  widget_rating: {
    star_color: '#fbbf24',
    theme: 'compact',
    custom_class: '.minha-classe-custom',
  },
})
O widget irá:
  • Criar automaticamente componentes <martan-rating> nos elementos encontrados
  • Observar o DOM para novos elementos adicionados dinamicamente

​
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-star-colorstringNãoCor das estrelas (padrão: #ffc107)
data-themestringNãoTema do widget (padrão: null)
data-disable-auto-fetchbooleanNãoDesabilita busca automática da API (padrão: false)
* 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-theme:
  • compact - Exibe apenas uma estrela com rating
  • null (padrão) - Exibe 5 estrelas com rating e total

​
Propriedades JavaScript

PropriedadeTipoDescrição
storeIdstringID da loja
storeKeystringChave da API
productIdstringID do produto
productSkustringSKU do produto
starColorstringCor das estrelas
themestringTema do widget (compact ou null)
ratingnumberRating direto (0-5) - se fornecido, não busca da API
totalReviewsnumberTotal de avaliações - se fornecido, não busca da API
disableAutoFetchbooleanDesabilita busca automática

​
Exemplos

​
Tema Padrão (5 estrelas)

<martan-rating
  data-product-sku="PA321"
>
</martan-rating>

​
Tema Compacto

<martan-rating
  data-product-sku="PA321"
  data-theme="compact"
>
</martan-rating>

​
Com Cor Customizada

<martan-rating
  data-product-sku="PA321"
  data-star-color="#10b981"
>
</martan-rating>

​
Com Tamanho Customizado

<martan-rating
  data-product-sku="PA321"
  data-size="16"
>
</martan-rating>

​
Com Dados Diretos (sem buscar da API)

<martan-rating rating="4.5" total-reviews="120"> </martan-rating>

​
Customização Avançada

Para mais opções de estilização usando variáveis CSS, consulte a página de Customização.

​
Funcionalidades

  • ✅ Integração com API Martan
  • ✅ Auto-discovery de elementos no DOM
  • ✅ Requisição única à API (compartilhada entre múltiplos componentes)
  • ✅ Dois temas: padrão (5 estrelas) e compacto (1 estrela)
  • ✅ Customização de cor das estrelas
  • ✅ Suporte a dados diretos (sem buscar da API)
  • ✅ Observação automática do DOM para novos elementos
  • ✅ Customização via CSS variables