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

# Reviews Widget

> Widget completo de avaliações com múltiplos layouts e funcionalidades

export const WidgetReviewsHeaders = () => {
  const $reviews = useRef(null);
  const [headerType, setHeaderType] = useState('default');
  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);
    }
  }, []);
  useEffect(() => {
    const container = $reviews.current;
    if (container) {
      container.innerHTML = '';
      const reviewsWidget = document.createElement('martan-reviews');
      reviewsWidget.productSku = 'PA081';
      reviewsWidget.headerType = headerType;
      reviewsWidget.listType = 'list';
      reviewsWidget.lazy = false;
      reviewsWidget.setAttribute('data-header-type', headerType);
      container.appendChild(reviewsWidget);
    }
  }, [headerType]);
  return <div style={{
    padding: '16px',
    border: '1px solid #e5e7eb',
    borderRadius: '8px'
  }}>
      <div style={{
    marginBottom: '16px',
    display: 'flex',
    alignItems: 'center',
    gap: '8px'
  }}>
        <label htmlFor="header-select" style={{
    fontWeight: 500
  }}>Estilo do Header:</label>
        <select id="header-select" value={headerType} onChange={e => setHeaderType(e.target.value)} style={{
    padding: '8px 12px',
    borderRadius: '6px',
    border: '1px solid #d1d5db',
    backgroundColor: '#fff',
    fontSize: '14px',
    cursor: 'pointer'
  }}>
          <option value="default">Default</option>
          <option value="histogram">Histogram</option>
          <option value="compact">Compact</option>
          <option value="minimal">Minimal</option>
          <option value="centered">Centered</option>
          <option value="urbano">Urbano</option>
        </select>
      </div>

      <div ref={$reviews}></div>
    </div>;
};

export const WidgetReviewsCustom = () => {
  const $reviews = 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 container = $reviews.current;
    if (container) {
      container.innerHTML = '';
      const reviewsWidget = document.createElement('martan-reviews');
      reviewsWidget.productSku = 'PA081';
      reviewsWidget.headerType = 'compact';
      reviewsWidget.listType = 'list';
      reviewsWidget.lazy = false;
      reviewsWidget.style.setProperty('--rw-primary-color', '#818cf8');
      reviewsWidget.style.setProperty('--rw-text-color', '#f3f4f6');
      reviewsWidget.style.setProperty('--rw-text-secondary', '#9ca3af');
      reviewsWidget.style.setProperty('--rw-border-color', '#374151');
      reviewsWidget.style.setProperty('--rw-bg-color', '#1f2937');
      reviewsWidget.style.setProperty('--rw-bg-secondary', '#111827');
      reviewsWidget.style.setProperty('--rw-star-color', '#fbbf24');
      reviewsWidget.style.setProperty('--rw-star-empty', '#4b5563');
      container.appendChild(reviewsWidget);
    }
  }, []);
  return <div style={{
    padding: '5px',
    border: '1px solid #e5e7eb',
    borderRadius: '8px'
  }}>
      <div ref={$reviews}></div>
    </div>;
};

export const WidgetReviews = () => {
  const $reviews = 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 container = $reviews.current;
    if (container) {
      container.innerHTML = '';
      const reviewsWidget = document.createElement('martan-reviews');
      reviewsWidget.productSku = 'PA081';
      reviewsWidget.headerType = 'histogram';
      reviewsWidget.listType = 'list';
      reviewsWidget.lazy = false;
      reviewsWidget.setAttribute('data-product-sku', 'PA081');
      reviewsWidget.setAttribute('data-header-type', 'histogram');
      reviewsWidget.setAttribute('data-list-type', 'list');
      container.appendChild(reviewsWidget);
    }
  }, []);
  return <div style={{
    padding: '5px',
    border: '1px solid #e5e7eb',
    borderRadius: '8px'
  }}>
      <div ref={$reviews}></div>
    </div>;
};

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:

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

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

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

| 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

<WidgetReviews />

### Customizando aparencia com CSS Variable

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

<WidgetReviewsCustom />

### Headers Disponíveis

<WidgetReviewsHeaders />

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