Rating Widget

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

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-star-color`	string	Não	Cor das estrelas (padrão: `#ffc107`)
`data-theme`	string	Não	Tema do widget (padrão: `null`)
`data-disable-auto-fetch`	boolean	Não	Desabilita 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

Propriedade	Tipo	Descrição
`storeId`	string	ID da loja
`storeKey`	string	Chave da API
`productId`	string	ID do produto
`productSku`	string	SKU do produto
`starColor`	string	Cor das estrelas
`theme`	string	Tema do widget (`compact` ou `null`)
`rating`	number	Rating direto (0-5) - se fornecido, não busca da API
`totalReviews`	number	Total de avaliações - se fornecido, não busca da API
`disableAutoFetch`	boolean	Desabilita 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

Início

Widgets

Sincronizando Pedidos

Uso Direto

Auto-Discovery

Propriedades

Atributos HTML

Propriedades JavaScript

Exemplos

Tema Padrão (5 estrelas)

Tema Compacto

Com Cor Customizada

Com Tamanho Customizado

Com Dados Diretos (sem buscar da API)

Customização Avançada

Funcionalidades

​Uso Direto

​Auto-Discovery

​Propriedades

​Atributos HTML

​Propriedades JavaScript

​Exemplos

​Tema Padrão (5 estrelas)

​Tema Compacto

​Com Cor Customizada

​Com Tamanho Customizado

​Com Dados Diretos (sem buscar da API)

​Customização Avançada

​Funcionalidades

Uso Direto

Auto-Discovery

Propriedades

Atributos HTML

Propriedades JavaScript

Exemplos

Tema Padrão (5 estrelas)

Tema Compacto

Com Cor Customizada

Com Tamanho Customizado

Com Dados Diretos (sem buscar da API)

Customização Avançada

Funcionalidades