<commit_before>### Índice

- Plugins
    - [Sku Selector](#sku-selector)
    - [Quantity Selector](#quantity-selector)
    - [Accessories Selector](#accessories-selector)
    - [Buy Button](#buy-button)
    - [Minicart](#minicart)

- Coming soon...
    - NotifyMe
    - Price

- [Notas](#notas)


---

# Sku Selector

## Uso

Chame o plugin em uma `div` vazia:

    $('.sku-selector-container').skuSelector(data, options);

- <b>`data`</b> deve ser um JSON de SKUs padrão da API.

- <b>`options`</b> opcional, é um objeto que pode ter as seguintes propriedades:
    - <b>`selectOnOpening`</b>
        default: `false`. Se `true`, na inicialização do plugin seleciona o primeiro SKU disponível (o primeiro que vier no array).

    - <b>`modalLayout`</b>
        default: `false`. Se `true`, usa o template de modal.

    - <b>`warnUnavailable`</b>
        default: `false`. Se `true`, mostra form de "avise-me" quando um SKU indisponível for selecionado.

    - <b>`showPriceRange`</b>
        default: `false`. Se `true`, mostra o preço mínimo e o máximo dentre os SKUs selecionáveis com as dimensões já selecionadas.

## Eventos

O Sku Selector lança os seguintes eventos:

- <b>`vtex.sku.ready []`</b> quando o Sku Selector é renderizado.
- <b>`vtex.sku.dimensionChanged [productId, name, value]`</b> quando uma dimensão é selecionada.
- <b>`vtex.sku.selected [productId, sku]`</b> quando um SKU é definido.
- <b>`vtex.sku.unselected [productId, selectableSkus]`</b> quando o SKU torna-se indefinido.


---

# Quantity Selector

## Uso

Chame o plugin em uma `div` vazia:

    $('.quantity-selector-container').skuSelector(productId, quantity, options);

- <b>`productId`</b> o ID do produto.

- <b>`quantity`</b> default: `1`. A quantidade inicial do produto. .

- <b>`options`</b> opcional, é um objeto que pode ter as seguintes propriedades

    - <b>`readonly`</b>
        default: `true`. Define se o input de quantidade deve ter o atributo readonly.

    - <b>`max`</b>
        default: `5`. Define a quantidade máxima que pode ser selecionada.

    - <b>`text`</b>
        default: `"Selecione a quantidade:"`. Define o texto a ser exibido.

    - <b>`style`</b>
        default: `"text"`. Define o tipo de input a ser usado. Opções possíveis: `"text"`, `"select"`, `"number"`

## Eventos

O Quantity Selector lança os seguintes eventos:

- <b>`vtex.quantity.ready [productId, quantity]`</b> na inicialização.
- <b>`vtex.quantity.changed [productId, quantity]`</b> quando a quantidade é mudada.

Adicionalmente, o Quantity Selector escuta pelos seguintes eventos:

- <b>`vtex.quantity.changed [productId, quantity]`</b> a quantidade pode ser mudada por meio de scripts externos e o plugin se atualizará.


---

# Accessories Selector

## Uso

Chame o plugin em uma `div` vazia:

    $('.acc-selector-container').accessoriesSelector(productId, data, options);

- <b>`productId`</b> o ID do produto.

- <b>`data`</b> deve ser um JSON de acessórios padrão da API.

- <b>`options`</b> (nenhuma no momento.)

## Eventos

O Accessories Selector lança os seguintes eventos:

- <b>`vtex.accessory.selected [productId, accessory]`</b> quando um acessório é selecionado ou removido. O objeto `accessory` tem a propriedade `quantity`, que será 0 ou 1, dependendo do caso.


---

# Buy Button

## Uso

Chame o plugin na `a` que age como botão de comprar:

    $('.buy-button').buyButton(productId, data, options);

- <b>`productId`</b> o ID do produto.

- <b>`data`</b> opcional, é um objeto que pode ter as propriedades `sku`, `quantity`, `seller` e `salesChannel`.

- <b>`options`</b> opcional, é um objeto que pode ter as seguintes propriedades

    - <b>`errorMessage`</b>
        Mensagem de erro que será alertada se o usuário clicar no botão sem ter escolhido um SKU. Default: *"Por favor, selecione o modelo desejado."*

    - <b>`redirect`</b>
        default: `true`. Determina a propriedade de mesmo nome na querystring. <b>Deve ser `true` para página de produto, e `false` para modal.</b>

## Eventos

O Buy Button lança os seguintes eventos:

- <b>`vtex.modal.hide []`</b> quando `redirect=false` e o botão é clicado.
- <b>`vtex.cart.productAdded []`</b> quando `redirect=false`, o botão é clicado e a resposta do AJAX volta.

Adicionalmente, o Buy Button escuta pelos seguintes eventos:

- <b>`vtex.sku.selected [productId, sku]`</b>
- <b>`vtex.sku.unselected [productId, selectableSkus]`</b>
- <b>`vtex.quantity.changed [productId, quantity]`</b>
- <b>`vtex.accessory.selected [productId, accessory]`</b>


---

# Minicart

## Uso

Chame o plugin em uma `div` vazia:

    $('.portal-minicart-ref').minicart(options);

- <b>`options`</b> opcional, é um objeto que pode ter as seguintes propriedades

    - <b>`valuePrefix`</b>
        default: `"R$ "`. Define o texto a ser exibido antes do valor.

    - <b>`valueSufix`</b>
        default: `""`. Define o texto a ser exibido depois do valor.

    - <b>`availabilityMessages`</b><commit_msg>Adiciona documentação para NotifyMe<commit_after>### Índice

- Plugins
    - [Sku Selector](#sku-selector)
    - [Quantity Selector](#quantity-selector)
    - [Accessories Selector](#accessories-selector)
    - [Buy Button](#buy-button)
    - [Notify Me](#notify-me)
    - [Minicart](#minicart)

- Coming soon...
    - NotifyMe
    - Price

- [Notas](#notas)


---

# Sku Selector

## Uso

Chame o plugin em uma `div` vazia:

    $('.sku-selector-container').skuSelector(data, options);

- <b>`data`</b> deve ser um JSON de SKUs padrão da API.

- <b>`options`</b> opcional, é um objeto que pode ter as seguintes propriedades:
    - <b>`selectOnOpening`</b>
        default: `false`. Se `true`, na inicialização do plugin seleciona o primeiro SKU disponível (o primeiro que vier no array).

    - <b>`modalLayout`</b>
        default: `false`. Se `true`, usa o template de modal.

    - <b>`warnUnavailable`</b>
        default: `false`. Se `true`, mostra form de "avise-me" quando um SKU indisponível for selecionado.

    - <b>`showPriceRange`</b>
        default: `false`. Se `true`, mostra o preço mínimo e o máximo dentre os SKUs selecionáveis com as dimensões já selecionadas.

## Eventos

O Sku Selector lança os seguintes eventos:

- <b>`vtex.sku.ready []`</b> quando o Sku Selector é renderizado.
- <b>`vtex.sku.dimensionChanged [productId, name, value]`</b> quando uma dimensão é selecionada.
- <b>`vtex.sku.selected [productId, sku]`</b> quando um SKU é definido.
- <b>`vtex.sku.unselected [productId, selectableSkus]`</b> quando o SKU torna-se indefinido.


---

# Quantity Selector

## Uso

Chame o plugin em uma `div` vazia:

    $('.quantity-selector-container').skuSelector(productId, quantity, options);

- <b>`productId`</b> o ID do produto.

- <b>`quantity`</b> default: `1`. A quantidade inicial do produto. .

- <b>`options`</b> opcional, é um objeto que pode ter as seguintes propriedades

    - <b>`readonly`</b>
        default: `true`. Define se o input de quantidade deve ter o atributo readonly.

    - <b>`max`</b>
        default: `5`. Define a quantidade máxima que pode ser selecionada.

    - <b>`text`</b>
        default: `"Selecione a quantidade:"`. Define o texto a ser exibido.

    - <b>`style`</b>
        default: `"text"`. Define o tipo de input a ser usado. Opções possíveis: `"text"`, `"select"`, `"number"`

## Eventos

O Quantity Selector lança os seguintes eventos:

- <b>`vtex.quantity.ready [productId, quantity]`</b> quando o Quantity Selector é renderizado.
- <b>`vtex.quantity.changed [productId, quantity]`</b> quando a quantidade é mudada.

Adicionalmente, o Quantity Selector escuta pelos seguintes eventos:

- <b>`vtex.quantity.changed [productId, quantity]`</b> a quantidade pode ser mudada por meio de scripts externos e o plugin se atualizará.


---

# Accessories Selector

## Uso

Chame o plugin em uma `div` vazia:

    $('.acc-selector-container').accessoriesSelector(productId, data, options);

- <b>`productId`</b> o ID do produto.

- <b>`data`</b> deve ser um JSON de acessórios padrão da API.

- <b>`options`</b> (nenhuma no momento.)

## Eventos

O Accessories Selector lança os seguintes eventos:

- <b>`vtex.accessory.selected [productId, accessory]`</b> quando um acessório é selecionado ou removido. O objeto `accessory` tem a propriedade `quantity`, que será 0 ou 1, dependendo do caso.


---

# Buy Button

## Uso

Chame o plugin na `a` que age como botão de comprar:

    $('.buy-button').buyButton(productId, data, options);

- <b>`productId`</b> o ID do produto.

- <b>`data`</b> opcional, é um objeto que pode ter as propriedades `sku`, `quantity`, `seller` e `salesChannel`.

- <b>`options`</b> opcional, é um objeto que pode ter as seguintes propriedades

    - <b>`errorMessage`</b>
        Mensagem de erro que será alertada se o usuário clicar no botão sem ter escolhido um SKU. Default: *"Por favor, selecione o modelo desejado."*

    - <b>`redirect`</b>
        default: `true`. Determina a propriedade de mesmo nome na querystring. <b>Deve ser `true` para página de produto, e `false` para modal.</b>

## Eventos

O Buy Button lança os seguintes eventos:

- <b>`vtex.modal.hide []`</b> quando `redirect=false` e o botão é clicado.
- <b>`vtex.cart.productAdded []`</b> quando `redirect=false`, o botão é clicado e a resposta do AJAX volta.

Adicionalmente, o Buy Button escuta pelos seguintes eventos:

- <b>`vtex.sku.selected [productId, sku]`</b>
- <b>`vtex.sku.unselected [productId, selectableSkus]`</b>
- <b>`vtex.quantity.changed [productId, quantity]`</b>
- <b>`vtex.accessory.selected [productId, accessory]`</b>


---

# Notify Me

## Uso

Chame o plugin em uma `div` vazia:

    $('.portal-notify-me-ref').notifyMe(productId, options);

- <b>`productId`</b> o ID do produto.

- <b>`options`</b> (nenhuma no momento.)

## Eventos

O Notify Me lança os seguintes eventos:

- <b>`vtex.notifyMe.submitted [productId, sku, promise]`</b>: quando a form é enviada.

Adicionalmente, o Notify Me escuta pelos seguintes eventos:

- <b>`vtex.sku.selected [productId, sku]`</b>
- <b>`vtex.sku.unselected [productId, selectableSkus]`</b>


---

# Minicart

## Uso

Chame o plugin em uma `div` vazia:

    $('.portal-minicart-ref').minicart(options);

- <b>`options`</b> opcional, é um objeto que pode ter as seguintes propriedades

    - <b>`valuePrefix`</b>
        default: `"R$ "`. Define o texto a ser exibido antes do valor.

    - <b>`valueSufix`</b>
        default: `""`. Define o texto a ser exibido depois do valor.

    - <b>`availabilityMessages`</b>
{'fraction_non_alphanumeric': 0.1487233231707317, 'fraction_numerical': 0.0007621951219512195, 'mean_word_length': 3.5441558441558443, 'pattern_counts': {'":': 0, '<': 173, '<?xml version=': 0, '>': 173, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '34572', 'n_tokens_mistral': 4029, 'n_tokens_neox': 3820, 'n_words': 1158}