> ## 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.

# Rating Widget

> Widget simples de exibição de rating com estrelas e total de avaliações

export const WidgetRatingSize = () => {
  const $rating = useRef(null);
  useEffect(() => {
    window.MartanConfig = window.MartanConfig || ({
      _pendingConfig: null,
      init: function (options) {
        if (window.MartanConfig._realInit) {
          window.MartanConfig._realInit(options);
        } else {
          window.MartanConfig._pendingConfig = options;
        }
      },
      getStoreId: function () {
        return window.MartanConfig._storeId || null;
      },
      getStoreKey: function () {
        return window.MartanConfig._storeKey || null;
      }
    });
    window.MartanConfig.init({
      storeId: 550100411,
      storeKey: '82Bfif6uTlqycRjbAy36eoeJZaWCbgHo'
    });
    const scriptId = 'martan-widgets-script';
    if (!document.getElementById(scriptId)) {
      const script = document.createElement('script');
      script.id = scriptId;
      script.src = 'https://cdn.martan.app/widgets.dev.umd.js';
      script.async = true;
      document.body.appendChild(script);
    }
    const skus = ['PA001', 'PA293', 'PA120', 'PA384', 'PA002'];
    const container = $rating.current;
    if (container) {
      container.innerHTML = '';
      const sku = skus[0];
      const wrapper = document.createElement('div');
      const ratingElement = document.createElement('martan-rating');
      ratingElement.setAttribute('data-product-sku', sku);
      ratingElement.setAttribute('data-size', '16');
      wrapper.appendChild(ratingElement);
      container.appendChild(wrapper);
    }
  }, []);
  return <div>
      <div ref={$rating}></div>
    </div>;
};

export const WidgetRatingCor = () => {
  const $rating = useRef(null);
  useEffect(() => {
    window.MartanConfig = window.MartanConfig || ({
      _pendingConfig: null,
      init: function (options) {
        if (window.MartanConfig._realInit) {
          window.MartanConfig._realInit(options);
        } else {
          window.MartanConfig._pendingConfig = options;
        }
      },
      getStoreId: function () {
        return window.MartanConfig._storeId || null;
      },
      getStoreKey: function () {
        return window.MartanConfig._storeKey || null;
      }
    });
    window.MartanConfig.init({
      storeId: 550100411,
      storeKey: '82Bfif6uTlqycRjbAy36eoeJZaWCbgHo'
    });
    const scriptId = 'martan-widgets-script';
    if (!document.getElementById(scriptId)) {
      const script = document.createElement('script');
      script.id = scriptId;
      script.src = 'https://cdn.martan.app/widgets.dev.umd.js';
      script.async = true;
      document.body.appendChild(script);
    }
    const skus = ['PA001', 'PA293', 'PA120', 'PA384', 'PA002'];
    const container = $rating.current;
    if (container) {
      container.innerHTML = '';
      const sku = skus[0];
      const wrapper = document.createElement('div');
      const ratingElement = document.createElement('martan-rating');
      ratingElement.setAttribute('data-product-sku', sku);
      ratingElement.setAttribute('data-size', '24');
      ratingElement.setAttribute('data-star-color', '#10b981');
      wrapper.appendChild(ratingElement);
      container.appendChild(wrapper);
    }
  }, []);
  return <div>
      <div ref={$rating}></div>
    </div>;
};

export const WidgetRatingCompacto = () => {
  const $rating = useRef(null);
  useEffect(() => {
    window.MartanConfig = window.MartanConfig || ({
      _pendingConfig: null,
      init: function (options) {
        if (window.MartanConfig._realInit) {
          window.MartanConfig._realInit(options);
        } else {
          window.MartanConfig._pendingConfig = options;
        }
      },
      getStoreId: function () {
        return window.MartanConfig._storeId || null;
      },
      getStoreKey: function () {
        return window.MartanConfig._storeKey || null;
      }
    });
    window.MartanConfig.init({
      storeId: 550100411,
      storeKey: '82Bfif6uTlqycRjbAy36eoeJZaWCbgHo'
    });
    const scriptId = 'martan-widgets-script';
    if (!document.getElementById(scriptId)) {
      const script = document.createElement('script');
      script.id = scriptId;
      script.src = 'https://cdn.martan.app/widgets.dev.umd.js';
      script.async = true;
      document.body.appendChild(script);
    }
    const skus = ['PA120', 'PA293', 'PA120', 'PA384', 'PA002'];
    const container = $rating.current;
    if (container) {
      container.innerHTML = '';
      const sku = skus[0];
      const wrapper = document.createElement('div');
      const ratingElement = document.createElement('martan-rating');
      ratingElement.setAttribute('data-product-sku', sku);
      ratingElement.setAttribute('data-theme', 'compact');
      ratingElement.setAttribute('data-size', '24');
      wrapper.appendChild(ratingElement);
      container.appendChild(wrapper);
    }
  }, []);
  return <div>
      <div ref={$rating}></div>
    </div>;
};

export const WidgetRatingPadrao = () => {
  const $rating = useRef(null);
  useEffect(() => {
    window.MartanConfig = window.MartanConfig || ({
      _pendingConfig: null,
      init: function (options) {
        if (window.MartanConfig._realInit) {
          window.MartanConfig._realInit(options);
        } else {
          window.MartanConfig._pendingConfig = options;
        }
      },
      getStoreId: function () {
        return window.MartanConfig._storeId || null;
      },
      getStoreKey: function () {
        return window.MartanConfig._storeKey || null;
      }
    });
    window.MartanConfig.init({
      storeId: 550100411,
      storeKey: '82Bfif6uTlqycRjbAy36eoeJZaWCbgHo'
    });
    const scriptId = 'martan-widgets-script';
    if (!document.getElementById(scriptId)) {
      const script = document.createElement('script');
      script.id = scriptId;
      script.src = 'https://cdn.martan.app/widgets.dev.umd.js';
      script.async = true;
      document.body.appendChild(script);
    }
    const skus = ['PA001', 'PA293', 'PA120', 'PA384', 'PA002'];
    const container = $rating.current;
    if (container) {
      container.innerHTML = '';
      const sku = skus[0];
      const wrapper = document.createElement('div');
      const ratingElement = document.createElement('martan-rating');
      ratingElement.setAttribute('data-product-sku', sku);
      ratingElement.setAttribute('data-size', '24');
      wrapper.appendChild(ratingElement);
      container.appendChild(wrapper);
    }
  }, []);
  return <div>
      <div ref={$rating}></div>
    </div>;
};

<WidgetRatingPadrao />

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:

```html theme={null}
<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`:

```html theme={null}
<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:

```html theme={null}
<div class="product-card__rating" data-sku="PROD-123"></div>
```

E então inicializar o auto-discovery:

```javascript theme={null}
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`) |

<Note>
  \* `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).
</Note>

**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)

<WidgetRatingPadrao />

```html theme={null}
<martan-rating
  data-product-sku="PA321"
>
</martan-rating>
```

### Tema Compacto

<WidgetRatingCompacto />

```html theme={null}
<martan-rating
  data-product-sku="PA321"
  data-theme="compact"
>
</martan-rating>
```

### Com Cor Customizada

<WidgetRatingCor />

```html theme={null}
<martan-rating
  data-product-sku="PA321"
  data-star-color="#10b981"
>
</martan-rating>
```

### Com Tamanho Customizado

<WidgetRatingSize />

```html theme={null}
<martan-rating
  data-product-sku="PA321"
  data-size="16"
>
</martan-rating>
```

### Com Dados Diretos (sem buscar da API)

```html theme={null}
<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](/widgets/customization).

## 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