Índice

• Plugins

  • Sku Selector
  • Quantity Selector
  • Accessories Selector
  • Price
  • Buy Button
  • Notify Me
  • Minicart

• Notas

---

Sku Selector

Uso

Chame o plugin em uma div vazia:

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

• data deve ser um JSON de SKUs padrão da API.

• options opcional, é um objeto que pode ter as seguintes propriedades:

  • selectOnOpening default: false. Se true, na inicialização do plugin seleciona o primeiro SKU disponível (o primeiro que vier no array).

  • modalLayout default: false. Se true, usa o template de modal.

  • warnUnavailable default: false. Se true, mostra form de "avise-me" quando um SKU indisponível for selecionado.

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

Lança os seguintes eventos:

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

---

Quantity Selector

Uso

Chame o plugin em uma div vazia:

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

• productId o ID do produto.

• options opcional, é um objeto que pode ter as seguintes propriedades

  • unitBased default: false. Define se deseja usar seletor a granel (calculadora de quantidade).

  • unitVariations default: []. Se unitBased == true, especifica as opções de unidade para cada Sku. É uma coleção de {skuId: Number, measurementUnit: String, unitMultiplier: Number}.

  • max default: 10. Define a quantidade máxima que pode ser selecionada.

  • initialQuantity default: 1. Define a quantidade selecionada inicialmente.

  • decimalPlaces default: 2. Define a quantidade de casas decimais do input de unidades. Não deve exceder 12.

Eventos

Lança os seguintes eventos:

• vtex.quantity.ready [productId, quantity] quando o Quantity Selector é renderizado.
• vtex.quantity.changed [productId, quantity] quando a quantidade é mudada.

Escuta pelos seguintes eventos:

• vtex.quantity.changed [productId, quantity] 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);

• productId o ID do produto que é pai dos acessórios.

• data deve ser um JSON de acessórios padrão da API.

• options (nenhuma no momento.)

Eventos

Lança os seguintes eventos:

• vtex.accessories.updated [productId, accessories] quando um acessório é alterado. O array accessories contém os acessórios de um determinado produto, com propriedades como sku e quantity.

---

Price

Escuta por mudanças no Sku selecionado e atualiza as labels de preço.

Usa informações padrão de preço quando não há Sku selecionado.

Uso

Chame o plugin em uma div. Se esta conter algum HTML, este será usado quando um Sku não estiver definido.

$('.productPrice').price(productId, options);

• productId o ID do produto.

• options opcional, é um objeto que pode ter as seguintes propriedades

  • originalSku default: null. Deve ser definido se a opção acima for true.

Eventos

Escuta pelos seguintes eventos:

• vtex.sku.selected [productId, sku]
• vtex.sku.unselected [productId, selectableSkus]

---

Buy Button

Uso

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

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

• productId o ID do produto. Pode ser um array de IDs de produto -- neste caso, vai ser um botão que vai servir para comprar todos os produtos ao mesmo tempo.

• data opcional, é um objeto que pode ter as propriedades sku, quantity, seller e salesChannel.

• options opcional, é um objeto que pode ter as seguintes propriedades

  • errorMessage 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."

  • redirect default: true. Determina a propriedade de mesmo nome na querystring. Deve ser true para página de produto, e false para modal.

  • instaBuy default: false. Se true, ao ser selecionado um Sku disponível, o botão se clica.

  • hideUnselected default: false. Se true, esconde-se quando não há Sku selecionado.

  • hideUnavailable default: false. Se true, esconde-se quando o Sku selecionado está indisponível.

  • target default: null. Define o query parameter target. Um valor válido é "orderform".

  • requireAllSkus default: false. Se productId for um array, essa opção determina se todos os IDs de produto devem ter um Sku selecionado, ou se aceita comprar parcialmente (somente os selecionados).

Eventos

Lança os seguintes eventos:

• vtex.modal.hide [] quando redirect=false e o botão é clicado.
• vtex.cart.productAdded [] quando redirect=false, o botão é clicado e a resposta do AJAX volta.

Escuta pelos seguintes eventos:

• vtex.sku.selected [productId, sku]
• vtex.sku.unselected [productId, selectableSkus]
• vtex.quantity.changed [productId, quantity]
• vtex.accessory.selected [productId, accessory]

---

Notify Me

Uso

Chame o plugin em uma div vazia:

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

• productId o ID do produto.

• options opcional, é um objeto que pode ter as seguintes propriedades

  • ajax default: true. Define se o submit do form deve ser feito com AJAX.

  • strings Define as mensagens exibidas. Default:

      {
          "title": "",
          "explanation": "Para ser avisado da disponibilidade deste Produto, basta preencher os campos abaixo.",
          "namePlaceholder": "Digite seu nome...",
          "emailPlaceholder": "Digite seu e-mail...",
          "loading": "Carregando...",
          "success": "Cadastrado com sucesso. Assim que o produto for disponibilizado você receberá um email avisando.",
          "error": "Não foi possível cadastrar. Tente mais tarde."
      }
    

Eventos

Lança os seguintes eventos:

• vtex.notifyMe.submitted [productId, sku, promise]: quando a form é enviada.

Escuta pelos seguintes eventos:

• vtex.sku.selected [productId, sku]
• vtex.sku.unselected [productId, selectableSkus]

---

Minicart

Uso

Chame o plugin em uma div vazia:

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

• options opcional, é um objeto que pode ter as seguintes propriedades

  • valuePrefix default: "R$ ". Define o texto a ser exibido antes do valor.

  • valueSufix default: "". Define o texto a ser exibido depois do valor.

  • availabilityMessages Define as mensagens exibidas para cada código de disponibilidade da API. Default:

      {
          "available": "",
          "unavailableItemFulfillment": "Este item não está disponível no momento.",
          "withoutStock": "Este item não está disponível no momento.",
          "cannotBeDelivered": "Este item não está disponível no momento.",
          "withoutPrice": "Este item não está disponível no momento.",
          "withoutPriceRnB": "Este item não está disponível no momento.",
          "nullPrice": "Este item não está disponível no momento."
      }
    

  • showMinicart default: true. Define se o minicart deve ser mostrado.

  • showTotalizers default: true. Define se o totalizers deve ser mostrado.

Eventos

Lança os seguintes eventos:

• vtex.cart.productRemoved [] quando um item é removido pelo minicart.
• vtex.minicart.mouseOver []
• vtex.minicart.mouseOut []
• vtex.minicart.updated []

Escuta pelos seguintes eventos:

• vtex.cart.productAdded [] o Minicart se atualiza.
• vtex.cart.productRemoved [] o Minicart se atualiza.

---

Notas

Notas gerais

As opções podem ser passadas de três jeitos. Eles são, em ordem de prioridade:

1. Por JavaScript, na chamada do plugin.
2. Com atributos data- nos elementos.
3. Modificando as opções padrão (objeto $.fn.nomeDoPlugin.defaults).

Após um plugin ser inicializado, o elemento-alvo conterá, em seu objeto data (acceso via $().data()), uma referência à sua instância do plugin.

Dependências

Plugin	jQuery	front.utils	Dust (core)
Sku Selector	✔	✔	✔
Quantity Selector	✔	✗	✔
Accessories Selector	✔	✔	✔
Price	✔	✔	✔
Buy Button	✔	✗	✗
Notify Me	✔	✗	✔
Minicart	✔	✔	✔